background preloader

Transitional Interfaces — Design/UX

Transitional Interfaces — Design/UX
Designers love to sweat the details. Much time is spent pixel-fucking buttons, form styles, setting type, & getting those icons as sharp as a tack. A+, great job, don't stop you guys. ...but there's little consideration about how it all fits together outside of a static comp. You tap a button and the form just ...appears? Oh, ok sweet. How? Folks keep throwing around the word “delight” when referring to animation and cute interactions. Animation leverages an overlooked dimension — time! Let's take a look at some simple ideas: In traditional animation, a breakdown determines how a mass moves from Point A to Point B.

App UI 設計超詳解!該怎麼設計行動商務 App 才不會惹火消費者? | TechOrange《 商業、設計、軟體服務 | 行動商務市場潛力無限 俗話說:「一機在手,希望無窮」,擁有一支智慧型手機或平版,就像擁有行動辦公室一般,不論身在何處都能快速處理工作。 而且別說是行動辦公室,在上面簡直就是一個小型生活圈:聊天、看電影、購物等等日常事物都能快速滿足,拿著智慧型手機或平版,彷彿讓你走遍天下暢行無阻。 智慧型手機和平版這麼夯,這也難怪許多電子商務網站都想砸錢投資,行動商務儼然已成為龐大的潛在市場,根據 eMarketer 統計,其在 2012 的全球成長率是 86%,且達到 250 億美元的市場(計畫能在 2016 年達到 860 億)。 行動商務是一個全新的平台,在某個程度上行動商務可說是個毫無邊界的領域。 Christian Holst 的研究團隊測試了 18 個行動商務網站:1-800-Flowers、Amazoz、Avis、Best Buy、Buy.com、Coastal.com、Enterprise.com、Fandango、Foot Lockers、FTD、GAP、H&M、Macy’s、REI、Southwest Airlines、Toys “R”Us、United Airlines、Walmart。 但儘管測試了目前為止最大型的行動網站,但在測試的過程中仍發現有許多有待改進之處。 (以下文字以 Christian Holst 的研究團隊第一人稱撰寫) 讓主頁面一目瞭然 問題: 當你進入主頁面,映入眼簾的是五分八門的圖像或過於簡單的頁面設計時,你還會有意願繼續瀏覽嗎? 如果使用者無法第一時間從主頁面上得到整體概念時,很容易降低使用者對網站的信任感,甚至無法順利買到所想要的商品。 根據測試,70% 的受測者第一次登入主頁面或產品目錄頁時,儘管已知道要從何找到特定產品,仍會先大略瀏覽感興趣的區塊,或者在找到想要的產品後,瀏覽一至兩個其他種類的產品,以便下單前先看看其他選擇,或者藉此來提升對網站的好感。 (上圖,受測者即便已在目錄區找到男裝選項,仍會先大略瀏覽整個網路頁面) 由此可見,第一印象非常重要,能否讓手機用戶第一眼就能在介面上找到他們想要的,即是決定成敗的關鍵,若覺得這樣說不夠具體,那從以下反面的例子來看能讓你有更清楚的概念: 過多視覺元素 避免在主頁放置過多且需要極大專注力的圖像元素,盯著頁面看久都會感到眼花撩亂。 (多數受測者看到 Macy’s 網路頁面,明顯都露出受不了的神情。) 密切注意動畫跑馬燈

Designing For The Empty States Understand how to add some delight into an app by designing the empty states and give users a better experience. Empty states are places in apps that have no content or data. They are empty. A blank page. Traditionally empty states are overlooked as most designers focus on how best to display lots of content or data. It’s common for empty states to be dealt with by developers as they are often caused by exceptions (such as no internet connection). There are three mains types of empty states. 1. First impressions are vital. When someone signs up for an app, the chances are high that they know what it does. 2. Consider the inbox. Take a look at how Sparrow, Gmail and the default iOS Mail app handle the empty inbox. Sparrow shows an icon representing a traditional inbox and the phrase ‘Inbox Zero’. Gmail goes a step further by injecting some character into the app with the smiling sun. 3. Sometimes the people will experience an empty state as part of an error. Conclusion Contribute

Hack Your Maps Web maps have come a long way. Improved data, cleaner design, better performance, and more intuitive controls have made web maps a ubiquitous and critical component of many apps. They’ve also become one of the mobile space’s most successful transplants as more and more apps are powered by location-aware devices. The core web map UI paradigm itself—a continuous, pannable, zoomable surface—has even spread beyond mapping to interfaces everywhere. Article Continues Below Despite all this, we’ve barely begun to work web maps into our design practice. Have you ever taken apart a map? This article is a long overdue companion to Paul’s piece. Opinionated about open#section1 Paul makes a strong case for why you might want to use open mapping tools instead of the established incumbent. There is nothing mysterious about web maps. In short, we’ll be working with a fully open mapping stack. Starting out#section2 I’m a big fan of Sherlock Holmes. A tale of places#section3 Maps are data#section4

Je ne suis pas un ergonome — Gilles Demarty Lorsque j'ai démarré chez SQLi, j'ai signé un contrat de travail de Consultant Ergonome Expert. De même, souvent, quand je discute avec des clients, on m'appelle ergonome et on me parle de "l'ergonomie que j'ai faite". Pourtant, cher lecteur, j'ai un aveu à te faire : je ne suis pas un ergonome. Non pas que je n'applique pas des principes d'ergonomie dans mon activité de tous les jours: je sais comment les utiliser, et quelles sont les limites du nombre de Miller, des Lois de Hick et de Fitts, et des principes du Gestalt. Je ne suis pas un ergonome ; je suis un Designer d'eXpérience Utilisateur… et un Designer d'eXpérience Utilisateur n'est PAS un ergonome. C'est un fait, l'ergonomie et les Designers sont souvent amalgamés dans le monde du Web, mais ils sont bien différents. Faisons ensemble le chemin pour différencier l'Ergonomie et le Design d'eXpérience Utilisateur (que j'appellerais UX Design). Le but de l'ergonomie est donc de rendre un outil Utilisable.

CSS3 Transition | css3教程-css3实例-css3动画 | W3CPlus 上一节花了大篇幅整理了CSS3中动画属性中的Transform,今天我们接着一起来看CSS3动画属性中的另一个属性Transition。 W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习transition的具体使用 语法: transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间段,变换的速率变化transition-timing-function,变换延迟时间transition-delay。 一、transition-property: 语法: transition-property : none | all | [ <IDENT> ] [ ',' <IDENT> ]* transition-property是用来指定当元素其中一个属性改变时执行transition效果,其主要有以下几个值:none(没有属性改变);all(所有属性改变)这个也是其默认值;indent(元素属性名)。 1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如:background-color,border-color,color,outline-color等css属性; 4、integer离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生 如:outline-offset,z-index等属性; 二、transition-duration: 取值:

提升品质!丰富APP动态效果的六点原则 这篇文章是百度云UE负责人@elya妞撰写的,从动效的6个方面详析怎样借移动应用强力提升APP品质!篇幅虽短,但是总结精炼,很值得一读。 @elya妞 :如果想让你的移动应用更活泼更灵动,丰富的动效是不可少的,丰富的动效可以让你的应用更具活力,充满生机;丰富的动效可以让你的应用彰显效率,提升品质感;丰富的动效可以让你的应用充满魅力,引人探索;丰富的动效可以让你的应用减少焦虑,消除等待感;丰富的动效可以让你的应用充满韵味,有节奏感;丰富的动效可以让你的应用有出奇的信息组织,整洁高效。 动次打次再来一篇动感干货: 《掌握动效设计! 这里主要介绍六种简单通用的方式 ———— 转场、邀请、过渡、反馈、缩放、吸附。 原则一:转场 由于手机屏幕空间有限,更多的内容会被隐藏在屏幕后边,或者屏幕的左边、右边、下边,转场动效能帮助应用营造一种空间方位感。 原则二:邀请 直接提供邀请,告知用户可以做的事,效果最直观,引导性最好。 原则三:过渡 当应用正在加载数据的时候,一定要给予过渡,让用户知道应用正在努力工作,系统级的过渡分为两种——进度条和菊花转,进度条是用在可预知完成进度和剩余时间的情况下;菊花转是用在无法预知剩余时间的情况下。 不是所有情况下,都要清晰的告知用户当然任务的加载进度的,比如iPhone自带的短信应用,发送短信的时候有一个进度条,本意是好的,让用户知道短信发送的进度。 原则四:反馈 当任务成功或失败之后,需要有办法告知用户。 如果是成功类的提醒,往往只是告知状态就可以了,用户无需执行操作,反馈就可以自己消失。 原则五:缩放 在一寸土一寸金的手机界面上耕耘,恨不得盖个复式小洋楼,一行当两行用。 比如Bluga这个输入框,当你不需要输入的时候,它看起来就是一个输入的入口,但是当你点击的时候,输入的辅助信息都出来了,更大的文字撰写框、位置、图片、发送按钮,你可以打开盒子,编辑一条丰富的消息。 原则六:吸附 吸附是网格系统中一个很具有美学色彩的设计,当你拖拽着一个应用切换位置的时候,这个应用会被自动吸附到对齐网格的位置,保证界面整洁利索(不像Nokia的某些手机,Widget可以满屏幕拖拽,跟我凌乱的桌面一样);当你拖拽一个应用到另外一个应用上的时候,就可以变成一个文件夹,这里也是通过文件夹的样式和吸附的效果,让用户明白建立文件夹的交互的。 从今天开始,努力提升你的应用的品质,让它动起来吧!

UIColor: Understanding Colour in iOS | iOSing Something as trivial as changing a colour or adding a colour should be pretty simple to achieve, one that shouldn’t take long to do or much thinking. Sadly with iOS this isn’t as straight forward as you assume at first and because of this i thought i would throw together a really simple tutorial explaining how colours work. This really is the most basic tutorial i can think of, i mean i think someone who’d recently suffered a massive head injury could come to terms with UIColor on iOS after this tutorial. So lets get to it. How Colours Work Lets look at the colour in terms of HTML simple because i’m a web designer and it’s the most simple solution i can think of. In HTML/CSS you would typically define a colour outright, for example to make the background of the website red, you’d apply red to the background of body. …or if you wanted to apply a HEX colour you would define it merely as the following. Pre-Defined Colours self.view.backgroundColor = [UIColor yellowColor]; An Even Better Way

Web IDEs: the future of coding Still using desktop code editors? Web integrated development environments (IDEs) are a new way to build your web projects directly in the browser, often saving development time and making collaboration easier. The humble browser used to just serve up simple HTML documents, but it’s often now your first stop for just about any task. Think about it — document editing, file sharing, image manipulation, server backups, 3D rendering, music production and just about any other work traditionally done in desktop software can now be handled by a web service. I’ve actually become reluctant to install anything anymore, as there’s usually a great web alternative that just requires a simple account signup to use it. But even with all the great services on the web, web development itself has been one of the last frontiers for this trend, perhaps because of developers’ reluctance to work online. Coding offline is crazy Most developers build websites on their desktop before putting them online.

Briefs crée des prototypes interactifs d’app iOS Briefs[1.0.1 / Démo – US – 179,99 € – OS X 10.8 – Briefs, LC] est un outil de prototypage pour applications iOS qui permet de tester une interface avec son interaction, directement sur un appareil iOS. Ce principe n’est pas nouveau, mais ce logiciel fait le pari du natif : même s’il est dédié à un designer et même s’il ne nécessite pas de savoir coder en Objective-C, il offre un rendu réaliste, avec les animations de base d’iOS. De quoi se faire vraiment une idée d’un design avant de le mettre en place concrètement dans Xcode. Puisqu’il s’agit d’un outil dédié à la création de prototypes et non au développement, vous ne verrez aucune ligne de code dans Briefs. Briefs utilise son propre vocabulaire qu’il faut d’abord appréhender. Autant dire qu’un manuel ne sera pas de trop pour Briefs, mais il n’y en a pas encore pour le moment. Quand vous avez placé tous les éléments d’interface, Briefs propose ensuite de créer des liens entre les écrans qui composent votre application.

[知識觀念]動畫12原則 - 【動畫創作研究社】 - 創作革命†REVOLUTION 前言 這裡是不才腰 阿腰真的不是做教學的料 也不是畫圖的料 (你到底在這幹麻) 這次是因為有好想推給各位動畫人的好東西 所以還是不才的做了不太完整的介紹...還有腰流的(可能不太對)圖解... (有缺的圖解會慢慢補上,最近阿腰忙到爆炸)(圖因為時間關係有點潦草,真的看不懂悄悄我我會從新繪製) 希望有研究的人可以跳出來糾正阿腰!!! ---------- 動畫12原則是Disney公司的動畫師幾10年來的經驗所整理出來的最高原則, 所有動畫師都是把這12原則當作聖旨在遵循著, 從30年前動畫開始起步一直到現在都還是很受用的12原則, 這裡就做點初步的介紹與妖流圖解說明(弱)。 這12點原則就是: 1. 顧名思義就是利用擠壓及伸展兩種變形來強調畫面的張力, 利用物體或人物形狀的變形來強調瞬間的物理變化。 排球急速下降運動中途被強制中斷,產生極誇張的變形。 樹因為強風吹拂而彎曲。 2. 開會聽見別人抹黑自己,不得不拍桌起來抗議。 3. 創作革命學院似乎發生了甚麼事情? 動畫的編劇跟畫面全部都是由動畫師完成, 因此編劇、分鏡、構圖、走位、畫面應用等等都是很重要的工作, 必須很精細的算出來畫出來, 才能夠避免掉很多多出來的無趣鏡頭或是少加上的關鍵鏡頭。 空白腳本的製作需要依照動畫師的需求製作。 接續動作是從第一格開始畫,依序畫到最後一格便會成為一部動畫。 關鍵動作則是從中找到最關鍵的那一格動作, 繪製後在取捨關鍵動作與關鍵動作中間的補間動畫, 有需要的在繪製出來,接續起來便會成為動畫。 5.Follow-through and OverlappingAction跟隨動作及重疊動作:沒有任何物體可以突然停止。 垂袋向前移動,瞬間減速直到停止的時候。 有重量的東西在有速度進行的時候,不可能說停就停, 就跟人在跑步要停下來也需要煞車一樣, 而當煞車的時候人也會向前仰是一樣的道理。 重複動作的重要性在於讓觀者的目光停留在動畫師希望的地方上, 所以事實停止一方的動作,讓想要給觀者看的地方繼續動作便能達到目的。 指責一個人的時候的手勢。 也就是說一個動作的完成到結束,從頭到尾都不是等速運動。 7. 8. 9. 10. 乒乓大賽。 11. 好的畫技跟不好的畫技(?)。 12. ---------- 圖子的手寫醜醜字改成打字了

App图片墙/瀑布流 - 最美应用 - 花瓣画板 woofeng.cn Snapguide新版ios7风格 - 手机界面 - 黄蜂网woofeng.cn Pixel Perfection A lot of designers throw around the term pixel perfection. But what does it really mean? Googling it really didn’t help. With this article, I am going to not only attempt to define it but also give clear examples on how to achieve it. I will also share design files from which you can deconstruct and analyze. Download .sketch files You’ll need Sketch to open these files: Sharpness “Sharp” is defined as razor-edged and honed. By looking closely at this design, you’ll notice a light shadow and a white shadow. Perfect Position & Dimension Understanding perfection is not enough. In Photoshop, that means pixel snapping vector points manually by selecting them, then Command + Shift dragging them. In Sketch, it’s even more precise because you can simply select each sub-shape and edit round the numbers (x, y, width and height). Obsession Pixel perfection is an obsession and a standard to which serious designers live by. Go ahead and download my .sketch files and spot the half pixels.

Related: