亚洲精品无码久久久,日韩中文字幕中文无码久本草,奶真大水真多小荡货av

2014年移動應用交互設計10大趨勢

sj33cn — Thu, 17 Apr 2014 12:04:10 +0000

在移動互聯網飛速發展的這幾年，每年都會有一些新鮮的設計趨勢涌現出來。2014年，又有哪些新的設計趨勢脫穎而出呢？百度MUX有一群關注趨勢的小伙伴，從大量的APP中去發現設計范式，挖掘設計趨勢，預測出2014年在移動產品中會被廣泛應用的十大交互設計趨勢。希望這些新穎的設計模式，為設計師們帶來創新設計靈感，進而為用戶帶來新鮮有趣的體驗。

1 轉場動效的極致平滑（TRANSITION ANIMATION IS SMOOTH EXTREME）

移動APP越來越強調沉浸式的體驗，頁面和頁面之間切換也需要更加的流暢，轉場動效需要更加的極致和平滑。如果你還沒有為你的APP提供轉場動效，那么你已經落伍了，如果你還是使用比較傳統的轉場動效，如向左滑動、放大縮小，那么你的體驗也已經落伍了。平滑無縫的切換和體驗，信息需要沒有阻力的傳遞，用戶需要集中注意力，專注于目標任務來進行一系列的操作。我們相信，優先注重轉場動效的移動產品，會有極大的產品競爭力。

Yahoo! New Digest Making of Making Facebook Paper

Yahoo! New Digest/Making of Making/Facebook Paper，都對轉場的動效進行了精心的設計，平滑流暢的體驗讓我們眼前一亮。

設計師設計移動APP的的動效，需要像導演一樣，布局不同場景中，界面元素的登場方式，不同元素之間的出現、運動、消失要足夠的連貫。必要時，信息框架需要優化重構。動效的語義需要保持一致，避免認知的混淆。如果使用擬物化的動效語言需要符合物理定律。

2 多樣化新手引導（ VARIOUS GUIDANCE）

靜態圖片或蒙灰圖層的新手引導容易被用戶忽略，眼前一亮的新手引導才能讓用戶有學習的欲望與沖動。新穎的新手引導往往會突破靜態圖片這種方式，通過生動的故事、吸引眼球的動效、場景化的圖片、語音引導及視頻小短片等新穎的新手引導突破靜態圖片的方式，吸引用戶的眼球。

Hue

視覺動效類的引導，各種視差動效、過渡動效、入場動效、強化動效等等多種多樣，“Hue”通過動效將功能及引導元素串聯起，活潑的展現在用戶面前，也不失為一種吸引眼球的方式。

為Ta鬧鐘

語音視頻類的引導，“為ta鬧鐘”則直接應用一個制作精良的動畫短片讓你了解APP的使用場景，激起用戶對功能的嘗試欲望。

另外，Facebook paper的新手引導使用真人語音配合動效教學基本的操作手勢，而且是一步一提醒的交互形式，非常簡單、“醒耳”。

3 信息框架扁平化（FLAT INFORMATION FRAMEWORK）

APP設計中一個比較重要的設計因素，是效率的最大化。2013年我們追求界面扁平，注重通過弱化視覺效果，來強化功能主義，界面風格的扁平化，還遠遠不夠，2014年應該從信息架構角度，再進一步的去應用扁平化的設計理念，這就是信息架構的扁平化趨勢。

信息框架扁平目的是減少信息層級，追求信息到達用戶的最短距離。通常，移動APP的層級關系不比網頁直觀，不不存在面包屑或是站點地圖允許用戶任意跳轉。縱深的返回機制會增加用戶操作成本，扁平的信息框架會從根本上解決上述問題。

Google Now

Google Now使用卡片式列表框架展示信息，把用戶需要的信息展示在首頁，將搜索結果前置，省去輸入、點擊和頁面跳轉的步驟，讓用戶更快捷的獲取所需要的信息。

Drippler

Drippler主要提供和自己設備相關的提示、軟件更新等所有信息。首頁以瀑布流的方式展示信息，支持頂部下拉菜單進行篩選，省去更多分類入口，縮短用戶到達信息詳情頁的步驟。

4 動態數據可視化（Dynamic data visualization）

人類身體的微妙變化、運動耗能都會產生大量的數據。近幾年由于可穿戴設備的興起，人們可以通過數據更深入了解自己的身體。結合數據可視化的概念，這將掀起又一熱浪。

現今數據可視化不只是靜態展現數據，用戶希望通過互動及時獲取數據流，動態數據可視化（Dynamic data visualization）將更加強調數據轉譯實時更新的圖形，以及動態的圖形化表達。

Moves

實時數據監測，Moves會根據你的運動情況在后臺計算步數、距離和時間，然后生成簡單易懂的圖表幫助你了解一天的運動情況和地點，如果你一邊走一邊掏出手機查看Moves，隨著你步數的一步步邁出，oves相應運動的圓形會跟著你的步伐震動，同時數字也在不斷增長，伱會產生一種莫名的成就感；Nike+會隨著你跑步的行為以語音方式提醒你跑步的公里、速度；其他還有 Nike+furlband、latin。

UP Coffee

動態數據呈現，靜態圖形僅能表現數據的單一數據屬性，當圖形以動態效果呈現時，便能多維度呈現給用戶實時信息、同時能與用戶形成互動，提高數據表現的趣味性。

UP Coffee是一款追蹤你體內咖啡因影響你睡眠的動態展示APP，計算你飲入的咖啡因與體內水分反應，引導你睡眠的最佳時間。

5 精細的視差效果（FINE PARALLAXF EFFECT）

視差是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的感官體驗。視差動效在網站中應用不少了，在移動應用中，除了一些讓人眼前一亮的新手引導頁，還有一些精細的視差效果應用也能給我們帶來錯落有致的新鮮體驗。

視差效果的應用需要橫向考慮哪些是前景，哪些是背景元素，考慮在滾動的過程中狀態的停留和過程中的效果呈現。

CORSSFADER

CORSSFADER/ IFTTT/ HUE產品都采用了精細化的視差設計，效果非常吸引人。

App Flow

微視差的設計，App Flow在從圖文結構向文字轉換閱覽體驗的過程中，標簽前景、圖片背景、底部文字區域部分在滾動過程中速度均不相同，呈現錯落有致的效果，并且前景標簽的形狀會發生變化與文字場景融為一體。

Yahoo天氣

Yahoo天氣通過橫向劃動切換的方式查看兩個城市天氣時，前景的框和背景的圖片以不同的速度滾動，如話劇表演序幕徐徐拉開的效果。

6 分層結構（LAYERED INTERFACES)

通常，屏幕界面以水平方式展示，沒有縱深層級感。然而iOS7的發布引發了一種層次感的變革，模糊背景、帶有縱深感的層次及動效，拓展了屏幕空間，塑造出內容的層級感，這種設計手法，也被很多設計師逐漸運用到自己產品中去了。

分層結構可以想象在立體空間中，在XY軸的基礎上，增加Z軸。將當前所在的界面蓋在另一個的上面，將信息分層歸納，體驗上能夠感覺到明顯的層級感，區分主次信息的展示。這種設計更專注于內容，更多的暴露信息，減少結構層級，操作高效。

Cal

Cal是Any.Do 的團隊推出的一款設計精良的智能日歷應用，主要內容的展示采用卡片形式而非全屏顯示，大家可以明顯的感覺到卡片和底圖兩個層級，能夠烘托場景、交代背景、渲染氣氛，帶入情境，給人無限想象。

DayBoard

還有的設計雖然在當前界面沒有看出層次，其實只是將層級隱藏起來了。如DayBoard，它其實是側邊欄形式變更過來的，通過動效擴展了屏幕空間，渲染出帶有縱深感的層次，將操作區和內容區劃分開，培養用戶使用習慣，使人印象深刻。

7 大視野背景（FULLSCREEN IMAGE BACKGROUND）

不不論是大屏電子設備、汽車的全景天窗甚至是落地的陽臺玻璃，人們總在追求更大的顯示區域和更佳的顯示效果，大視野在同類產品中總是能在同類產品中帶來更突出的體驗，在移動應用中也是如此。

大背景圖片已經成為營造設計氛圍主要手法，需要設計師具有更好的細節雕琢能力才能出效果，會讓APP更生動，更具創造力。

小貼士提醒，由于背景可能造成干擾，導致前景的內容可讀性變弱。需要把重要操作用明確的按鈕區隔出來，閱讀型文字跟背景圖要用明顯的反色，甚至把文字浮在半透明蒙層上。

The Whole Pantry

Flink

VSCO Cam

來看這些產品The Whole Pantry / Flink / VSCO Cam，他們都有一些共同的特點，提升視覺表現力度，豐富情感化元素。一些信息或操作，浮動在圖片上。這種設計方法，對字體和排版設計要求更高，難度也更多，但極容易渲染出氛圍。

8 虛擬現實的游戲化（GAMIFICATIONS OF VIRTUAL REALITY）

眾所周知，虛擬現實技術是對未來游戲產業發展關鍵的技術之一。近期，Facebook花20億美元收購沉浸式虛擬現實技術廠商Oculus VR，索尼也正式公開了虛擬現實技術，微軟以1.5億美金購買可穿戴計算技術和專利。這些收購都預示著巨頭公司要在虛擬現實領域里大展手腳了。

通過肢體、視覺和聽覺等感官體系直接與虛擬場景交互，可以重建并簡化交互方式，由原來的間接控制到直接交互；實現一維到多維空間體驗全新體驗。虛擬現實的游戲化和社交化都將會得到更廣泛的應用。

口袋妖怪

“口袋妖怪”結合Google map，當用戶到達Google 地圖上所標注的妖怪捕捉點時，使用手中的智能手機的相機拍攝界面進行掃瞄的方式交互，便可以從屏幕中發現它們的蹤影，進而丟出“寵物球”來進行捕捉；用虛擬現實技術給用戶創造一種輕量游戲化的現實增強的交互體驗。

Ingress

Ingress的現實增強游戲，通過真實世界的體驗基礎上，用不同的視角觀察它，從而實現不同的“真實生活”。結合 Google 地圖和導航生成一副虛擬的游戲地圖，但是地圖上的街道、路線和地點都是真實的。玩家需要按照地圖收集并積攢虛擬的“XM”能源，就像真人版《吃豆人》。收集足夠的能源可以前往“傳送門”完成“黑客”任務，傳送門一般都設置在美術館、圖書館這樣的公共場所。

9 任務窗口模式（TASK WINDOW MODE）

手機越來越大，視野越來越廣，給我們帶來更優越體驗的同時也帶來了很多煩惱。面對大屏手機單手操作和手指操作范圍有限的劣勢，如何讓用戶靈活地操作成為設計師思考的問題；而另一方面，設計上能否因為大屏帶來體驗上更大的突破呢？

設計師們通過懸浮窗口進行了很大膽的嘗試，利用小窗口鏡像操作大屏幕，甚至可以同時展示多窗口，執行多任務，不但解決大屏手機手指操作受限的問題，而且拓展了大屏手機的功能，使屏幕空間得以充分的利用，給大屏手機帶來全新的交互體驗。

Galaxy Note 3

多任務窗口模式，跳出傳統手機單屏使用的思路，三星Galaxy Note 3允許多窗口同時存在，可以實現同屏顯示兩個應用了。比如，同時顯示郵件和相冊，用戶可以在主屏幕選擇運行幾個特定的任務。多任務窗口充分利用大屏手機顯示空間，提升用戶的操作效率。

百度瀏覽器PAD版

如今，手機和Pad的區別越來越小，Pad的大屏操作，已經有些優秀的設計，比如百度瀏覽器PAD版，可以同時展現2個預覽區，還可以自由控制視頻懸浮窗。

10 主動服務式設計（PROAC SERVICE DESIGN）

現在的APP怎么才能獲得用戶的芳心呢？功能可靠、界面高大上？還有一種可能性，就是智能和貼心，如果可以讀懂用戶當前的需求，并主動提供解決方案，為用戶省去那些搜索、選擇、糾結等不必要的步驟，還能抓不住用戶的心么？尤其是移動場景下，場景變化往往會產生新的需求，這時更需要我們主動提供貼合當前場景的服務。

所謂的主動服務式設計，就是在用戶主動操作之前，識別到用戶的需求同時還能友好的給出最快捷的解決方式。

Shopkick

Shopkick讓智能推送和智能導購成為現實，識別用戶的地理位置信息，推送更有場景引導式的信息，主動為用戶提供更有價值的信息。

Cover

Cover是一款支持安卓用戶自定義創建鎖屏菜單的應用程序，同時支持識別用戶的情景（開車、家中或者工作），自動調整鎖屏的內容，允許用戶快捷切換和喚起合適的應用。

寫在最后：每位設計師都應該對設計趨勢有自己的敏感度，研究前沿的設計方向，關注最新的設計模式，并靈活的應用在實際的設計中，為你的設計增添有趣新穎的體驗。

圓形風格的移動應用實例

sj33cn — Sun, 03 Nov 2013 14:56:19 +0000

譯者注：人腦處理圓形中的信息更加快和有效，設計得當可兼具良好的使用性以及更大的吸引力，本文以移動設備為例，這一類設備恰好是使用圓形的指尖形狀，為設計提供了更大的自由度，本文適合移動端設計的同學以及對此感興趣的同學，不僅從交互上并且從視覺上都能夠對以圓形為基本元素的設計起到一定的啟發作用。

原文地址：http://designmodo.com/mobile-apps-circle/

圓形被認為是能夠被人眼最快識別出的對象之一。這就意味著我們的大腦有能力處理在圓形中的信息比處理在常規的三角或矩形中的數據略快一些。對于小型的以手勢為基礎的交互界面中，這種能力真的非常關鍵。這一點對移動設備來說尤為典型，在大多數的情況下，這成為了選擇基本UI元素形狀的決定性因素。賞心悅目的曲線取代了尖銳邊緣，有助于營造一種溫暖舒適的氣氛，讓感觀愉悅。它有效地增強了用戶體驗，讓交互界面簡單而明了。

選擇圓形一個最普通的原因就是它模仿指尖的形狀的能力下意識也將圓形元素與按鈕聯系在一起。因此，作為一條規律，你很容易發現行為召喚的按鈕（call-to-action buttons）應用在環形結構后，有相當一部分應用程序大肆地在設計中使用這一形狀。例如，音樂導向的應用，或者是可視化的鬧鐘以及時鐘都離不開環形結構。

本文的選例都是帶有明確的圓形風格的移動交互界面，這些界面自然地融入了UI流暢性，更多的可用性和吸引力。

Eli Williamson設計的Lock Screen Concept使用絢麗的相片背景來吸引用戶的注意力。緊湊的排版，醒目的圓形圖案以及主體的白色給應用增加了雅致與空間感。

Cüneyt ?EN設計的Timer有著綠色的發光風格。近似霓虹閃爍式的圖標及帶有光效圓形在黑暗的純色背景下非常顯眼。

Timm Kekeritz設計的Partly Cloudy被貼上了懷舊的標簽。柔和的調色板，新穎的旋鈕，復合的畫布營造出一片舊日情懷。

Marco Nenzi設計的ClapUp由于逼真的旋鈕和按鈕，新穎的時鐘以及質樸的白色背景而看起來清爽而且高端。

Jakub Antalík設計的Coffely，由于扁平風格的精彩應用簡潔而自然地呈現出準確而輕快的界面。

Circle在整個設計中都應用了圓形元素，從頭像顯示，狀態通知以及其它按鈕都用到了圓形。

Megamegacube設計的Quotes app讓事情保持簡單易懂，將時髦的紅色背景，平實的白色的圖案元素以及常規字體巧妙地結合在了一起。

Corey Liu設計的Charging Animation采用了現實主義方式。設計師巧妙地將生活元素植根于帶有綠色液體的中心圖標中，使它看起來栩栩如生且魅力非凡。

Michael Sambora設計的Bikester #2 wip展現了淡色與一系列精致細節刻畫核心部件相結合產生的有力的視覺沖擊。

Tomáš Zeman設計的Company Income App基于Metro 8美學，出色的集成了淡淡的二維單色圓形元素及大量自由空間。

Nate Dicken設計的Foresee – Let’s Go Swimming!特意注入了一些明亮的顏色來使交互界面看起來明亮而歡快。

Boris Valusek設計的Superminds呈現出慣用的水平條紋式的布局，每一行都包含著圓形頭像和小標題。

Zahir Ramos設計的Laundry Master App，通過完美集成擬物化洗衣機相關按鈕和旋鈕和驚艷的刻畫，吸引了常規客戶，從而在這類應用中獨樹一幟，脫穎而出。

Ben Dunn設計的Napp App成功應用一些整齊微妙的整體控制牢牢地抓住了用戶的注意力。

Alex Bender設計的Movenpick app是一個美食相關應用。通過用令人垂涎的冰淇淋球照片在交互界面增加圓形風格，描述了可以買到的產品的整體多樣性。

Vlad Mereuta設計的WheelTunes，是一個基于手勢的帶有很棒音樂氛圍的播放器。中心圓形頭像主圖標也起著播放進度條的作用。

Simon用幾乎所有空白背景，基本的圖形框架和潦潦幾筆文字宣揚著最小化設計風格。

Michal Ratajczak設計的Trail Offroad Nightmode給人一種模糊的感覺。應用類似60年代的圖標以及受到鐘表界面的啟發計算機字體，在深色背景的襯托下，增添了UI的復古情趣。

Uriel Albarran O. 設計的Mixer elements刻畫了占據了整個空間的逼真而精致的黑色輪盤。

Louis Saville設計的Hack Day App Preview擁有和諧的藍色風格，并出色地被白色相關加粗樣式和可辨識的圖標所補充，體現了很商務的感覺。

Ismail MESBAH設計的Phone App UI – Party Maker運用跳動顏色的混合，和俱樂部主題高度模糊的背景、光滑的粗字體以及派對導向的圖標都非常地搭調。

Celia Sun設計的Celia’s Weather傳達出歡快與清澈的感覺。主體的淺灰調色系，略微膨脹的旋鈕，精巧的陰影，準確注入的明亮元素，讓交互界面顯得簡潔細膩。

Frantisek Krivda設計的Flat Style Color Wheel通過顯眼的由藍色到白色漸變的圓環來展示數據。

Ali O. ??設計的Gas combi remote control app是由精巧的圖案、和諧的調色盤、漂亮的光和影創造出來的。

Samuel Bednár設計的Alarm Clock App通過交錯的樣本刻畫出了非同尋常的鐘表界面，所有元素都是扁平風格的設計。

Arles Festival, iPhone App V2.0利用有吸引力的輕少女風格的導航系統。基于網格，菜單上的每個項目都有著精細的點畫筆觸、線框圖標和優雅的大寫字母。

Myroslav Galavai設計的Plant monitoring tool擁有自然啟迪風格的UI，展現了非常棒的照片操作、相片集按鈕和纖維質感的背景。

Ronge Ruan設計的HR Alarm Clock利用大量圖案元素添以充滿活力的效果。明亮的放射狀漸變和淺色背景帶來了積極的情緒。

總結

圓形風格的應用程序交互界面非常常見。旋鈕、按鈕、開關、進度條、頭像以及其他種種經常以圓形出現，并添以振動狀漸變、巧妙的陰影、精細的圖標、單色扁平感及易辨識的風格。這一形狀對于基于手勢的iPhone和其它智能手機的交互界面并不驚奇。

圓形感覺的交互界面看起來很現代和高級嗎？它們容易被識別嗎？圓形能夠增加應用的可用性嗎？請通過評論來和我們交流你的觀點。

本文轉自騰訊ecd