Transitional Interfaces — Design/UX

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 網路頁面，明顯都露出受不了的神情。） 密切注意動畫跑馬燈

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

App图片墙/瀑布流 - 最美应用 - 花瓣画板 woofeng.cn Snapguide新版ios7风格 - 手机界面 - 黄蜂网woofeng.cn app01 - 輕鬆向科技Say Hi ! sun loading animation Loading content. Please wait... 1) Click on the box on the right. 2) From the appeared dropdown select the desired preloader Select your preloader 24 Fr / 128x128 Sun watch 20 Fr / 128x128 Sun loader Partly cloudy Sunny 12 Fr / 128x128 Sun 9 Fr / 128x128 Chronos Type in your word, number or letterMaximum length: 30 symbols Word to animate A button corresponds to the image type you need to generate (GIF - Animated GIF, APNG - Animated PNG format). Note: .GIF format supports only absolute transparency or no transparency at all. Image type Set the background of a preloader to transparent. For GIF images all semi-transparent pixels will be in front of the selected background color. Transparent background The color of the preloader itself Foreground color The background color of a preloader. All transparent pixels will be filled with the given background. Background color Identifies the interval of time between frames switching. Animation speed Denotes width and height of a preloader in pixels. Keep original colors

Inspired UI - Mobile Apps Design Patterns [iPhone] Mobile Awesomeness Advertisement 1 2 3 4 5 6 7 8 9 ... 60 Next 40个最新的创意进度条设计 以前的进度条设计以拟物化为主，现在扁平化风格流行，连进度条也改变咯。这是40款最新收集的进度条设计，很多是Dribble上的作品，应潮流而生，想瞧瞧扁平化风格的进度条是怎样的，就来看看吧。如果你对拟物化的创意进度条更加有兴趣，那么来这里瞧瞧《18个读取进度条的优秀设计案例》 ================关于优设网================ “优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。【特色推荐】PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南