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.
提升品质！丰富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.
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.
HTML5 Video Bumpers Video is a bigger part of the web experience than ever before. With native browser support for HTML5 video elements freeing us from the tyranny of plugins, and the availability of faster internet connections to the workplace, home and mobile networks, it’s now pretty straightforward to publish video in a way that can be consumed in all sorts of ways on all sorts of different web devices. I recently worked on a project where the client had shot some dedicated video shorts to publish on their site. They also had some five-second motion graphics produced to top and tail the videos with context and branding. This pretty common requirement is a great idea on the web, where a user might land at your video having followed a link and be viewing a page without much context. Known as bumpers, these short introduction clips help brand a video and make it look a lot more professional. Adding bumpers to a video What if the bumpers could be added dynamically? HTML5 bumpers Wrong So what can we do?
30 Menu Navigation Designs for Mobile User Interface Menu navigation is one of the essential elements of both web and mobile version. In the early days of web design trends, a simple bullet lists will do. With the technological advancements, however, web designers are able to create an extraordinary menu navigation design using the features of CSS. Since there are various open source CSS resources that can be accessed with just one click, today is easier than yesterday. Sure there’s a bunch of drop-down menu navigation (PSD) which every designer can download. Usability is an essential goal of mobile websites, and usable menu navigation designs with good mobile user interface is something that should be done. With our previous collection of mobile UI that revolves around search bar designs, you’ll notice that crafting a great user interface considering the user experience and everything is not easy to create. You might want to take a look at the following related articles: Youturn Mobile Navigation UI Dribble for iPhone 5 Mobile Portfolio