2011年涌現出諸多優秀設計,隨著操作系統的更新和硬件性能的提升,用戶對移動應用的品質需求也呈現上升趨勢,界面設計又被提升到一個新的高度。移動應用不再是將內容從互聯網搬至移動設備,而是解決設備本身的問題,根據用戶需求從視覺感受、風格趨勢、操作方式、信息架構和內容呈現等各個方面挖掘設計的可能性,為用戶帶來新穎的體驗。
本文匯總今年熱門產品的界面設計,從中總結出未來一年需要重點關注的設計趨勢,供大家參考。
趨勢一:極簡主義的應用圖標
從App Store的國外知名產品的設計動態看, 啟動軟件的圖標設計正在趨近極簡化風格的設計。
極簡主義風格的設計,視覺表現的元素簡約,能夠讓用戶快速的記憶應用類產品。LBS產品Gowalla ,在2010年初時候的應用圖標如下圖左效果,應用圖標呈現為復雜的袋鼠造型和GO字母的結合體,表現元素造型復雜;經過1年多的產品升級版本迭代,此時的Gowalla的圖標已經是右邊效果圖,典型的極簡主義應用圖標,簡約美觀。
如下圖所示的path軟件的應用圖標設計,由原來的立體感的設計演變為極簡的、相對扁平化微漸變的設計風格。極簡的應用圖標設計,背景色統一,突出品牌“P”,視覺上傳達給用戶一種十足的品質感。
又如入圍2011最佳產品工具類排行的百度搜索,應用圖標的設計也趨向極簡主義設計風格。由原來的相對具象的圖形表現方式向極簡主義的設計風格趨近,從視覺傳達的角度,提升了應用圖標的整體感和品質感。
趨勢二:適配多樣化的分辨率
回顧過去幾年,從智能手機發展初始階段的240×320的分辨率手機,到目前主流的480×800的分辨率手機,手機的分辨率呈現多樣化并向高精度發展,目前Galaxy Nexus的分辨率甚至達到了1280×720,所以屏幕適配性是衡量操作系統的重要指標之一。
Android3.0之后重要的改進就是增強了適配性,平面化的圖形便于橫向拉伸,分辨率增大時,頂部可以由兩欄合并為一欄,手機和平板可以使用同一個程序,所以應用程序將更多的考慮高分辨率的顯示效果。
試想我們在設計一款應用軟件的界面時,需要同時照顧到多種分辨率手機用戶,并不是一件非常容易把握的事情。密切關注移動硬件市場情況,了解適配多樣化硬件分辨率的手機用戶的使用習慣,分析多樣化分辨率界面設計的方法,也是2012年我們設計師需要關注和研究的趨勢之一。
趨勢三:平面化的視覺風格
自WP7使用Metro風格之后,Windows8為代表的界面會將這種新興設計風格推向主流,Metro的特點就是簡潔與直觀,沒有過分華麗的炫目背景與精致的功能圖標。
除了windows 8的設計外,X box360等產品也在使用這種設計風格,界面風格設計也呈現平面化、格子風的設計趨勢,簡約而華麗的設計給用戶帶來了全新的視覺體驗,強化Metro統一的品牌感。如下圖:
除此之外,Android 4.0系統的視覺設計風格也整體趨向平面化、格子風趨勢。android 4.0系統的視覺設計,放棄了原有的設計風格,整體正在向平面化、格子風的設計方向進化。雖然沒有那么強烈的Metro設計風格,但是這足以可以體現Metro風格的影響力。如下圖所示:
平面化、格子風正在流行,并正在影響著眾多的移動應用的視覺設計,但未來移動應用不會嚴格遵從官方的標準,在此基礎上將衍生出更多的創新設計,豐富這一設計風格。
趨勢四:越來越豐富的動效
動效設計和交互視覺都息息相關,是一種動態的交互行為的用戶反饋。優秀的動效設計,能夠增加用戶交互的親和力和趣味性,提升產品的用戶體驗。動效會被越來越多的平臺軟件應用,智能手機硬件的提升,給動效體驗設計帶來了展示的機會,給軟件產品的用戶體驗升級提供了更大的空間。
如上圖是韓國Naver的一款看房地圖的軟件,它采用了放大收縮的動效。用戶點擊地圖后,地圖本身放大,然后轉入街景界面;用戶關閉街景時,采用收縮的動效還原到地圖界面。這一細節的動效設計,給用戶一種酷炫的感覺,同時增強了界面間變化的連貫性。
如上圖的Path左下角的動效設計,這已經成為2011年代表性的設計。此軟件多處用到了動效,用的恰到好處,為產品贏得了良好的用戶口碑,為產品在短時間類增加了大量的用戶。
另外,在PC端的動效已經在Metro設計中廣泛運用,參見蘋果電腦酷炫的動效體驗設計可以贏得用戶的欽賴。動效設計豐富了交互,補充了視覺,恰當的運用動效能夠提升產品的用戶體驗。
趨勢五:電影化的開場界面
好的開場是成功的一半,越來越多的應用會采用動態的全景照片作為自己的開場界面,或者采用高保真的圖片作為應用的首屏壁紙。這種斑斕艷麗的視覺效果,為應用爭得了良好的第一印象,讓應用變得更加的生動和迷人。
Flipboard是一個華麗的閱讀產品,最開始推出的是iPad版,目前已經推出了iPhone版,它讓你在手機上也能擁有雜志一般的閱讀體驗。Flipboard在iPhone版本上,推出了封面故事功能,將熱點的新聞和圖片,直接在封面上展示。用戶還可以詳細定制出現在封面故事上的內容,當然你也可以關閉它。
iPhone版Flickr客戶端啟動之后,就是一系列高精度圖片的動態輪播,讓你體驗到艷麗多彩的視覺沖擊。
中文攝影雜志PhotoMagazine的開場,則像是一場精心炮制的剪切動畫,多個鏡頭依次出現在屏幕上,一張張美麗的攝影照片襯托出鮮艷的人像和風景,讓攝影雜志的文藝氣息深入人心。電影化的啟動界面,可以直接提升用戶對產品的好感度但也要考慮到多張圖片的大小,及動畫效果加載效率的問題。
趨勢六:合理的用戶引導
由于手機界面的承載能力有限,產品功能的不斷膨脹,必須要在用戶打開應用之后告知他某些新奇的功能,引導他完成某些主要任務流程,讓用戶不至于迷失在陌生應用中不知所措。幫助用戶快速掌握應用的使用方法,體驗到應用的樂趣,新手引導成了一個必須考慮的設計環節。
Foursquare和Gowalla會在合適的時機,提醒你可以執行某個操作。某個按鈕挪了位置,快速去添加好友,開始簽到并與好友分享圖片。通過這樣一種Tips告知的形式,讓用戶關注到系統的狀態,引導用戶可以繼續走向哪里,可以啟動很好的幫助用戶熟悉應用的作用。
用戶引導的直接目標是幫助用戶更好的使用產品,終極目標是提升用戶滿意度。雖然,大多數情況下,我們可以通過合理的設計,盡可能的簡化功能,讓用戶無需引導和幫助,就可以完成必要的任務。但是實際上,手機產品的限制和對強大功能的追求,導致這個目標很難達到,因此越來越多的應用開始使用用戶引導來幫助用戶快速熟悉產品。
趨勢七:突出顯示的主要功能
產品的定位和核心功能決定了主界面的布局,對于不同信息架構的產品,主界面會有很大的不同,但是如何使產品從同類產品的相似界面中脫穎而出呢?答案是:專注。
對于秉承了“開啟即用”設計策略的移動應用來說,多而全的功能點和復雜的應用結構并不適用。從主界面點擊超過三次才能操作的功能被使用機率則非常低,普通用戶不會樂于使用深層界面被掩藏的功能
同樣,也有數據表明,在界面上突出某項功能的視覺特征,會提高用戶使用該功能的機率;對具有“利用碎片化時間”和“顯示區域較小”特征的移動應用來說,讓用戶在多個功能按鈕中進行選擇,也會成為影響用戶體驗的因素。
因此,一定要找出產品的核心功能,并在主界面上突出顯示。
integram是一個以圖片為媒介的垂直化社交網絡,對這個產品來說,圖片只是作為載體的形式出現,核心價值是通過分享建立的朋友關系。所以在產品的主界面上,將“share”按鈕的樣式區分于其他標簽,突出顯示核心功能。
拍照和簽到類應用中,在標簽欄突出主要功能,主要功能的使用率也是衡量產品交互的重要指標。
另一個影響視覺設計的因素是:設計的重點與單個功能的使用率。
在UGC模式的拍照和簽到類應用中,從用戶處得到內容是設計中的難點,而“拍照”則是使用率較高的功能,所以在標簽欄的視覺設計上突出“拍照功能”。
趨勢八:隱藏的側邊欄菜單
部分移動應用由于發展時間比較長,已經變得有些“臃腫”,默認的五個標簽欄已經滿足不了架構需求。類似Pad的側邊欄越來越多出現在手機界面設計,有助于減少界面的層級關系,充分利用顯示空間,或者讓目錄型數據便于在較低分辨率的界面中操作。
Facebook&Path
如果返回上一級才能跳轉頁面,會極大的增加用戶查找信息的難度,使用側邊欄可以讓應用的架構更為清晰。
側邊欄可以保證視覺的穩定性,如果和界面操作不沖突的話,可以依靠左右滑動手勢調出側邊欄,提示操作效率。側邊欄也可以放置操作按鈕,但可能會導致界面看起來顯得擁擠,更多的側邊欄樣式及應用場景還需要設計師不斷地進行嘗試。
側邊欄也是手機界面架構的一種新方式,容納更多的功能,同時要保證界面層級關系清晰。
趨勢九:革命性的語音交互
設備硬件為取代其他終端產品和實現新穎的功能提供了技術基礎,用戶與設備之間的交互方式不僅局限受觸摸屏,語音和拍攝在2011年的移動應用中發揮了巨大的作用,促成微信和instagram等熱門產品。
Siri被譽為革命性產品,不管其是否夸大其詞,它成功將語音交互引入到移動設備中,比起語音命令更為智能,賦予它人性化的特征。語音可以用來操作界面、發起搜索和輸入內容,但整個操作過程中像是與人對話,一定程度上降低的學習成本,同時讓應用富有情感化。
百度手機瀏覽器Android率先引入語音搜索,目的也是解放雙手,提供更為自然的操作方式。語音交互比起單純的觸摸更難設計,除了要解決最基本的識別性問題,還需要交互輔助解決識別率和使用環境嘈雜等問題。
語聊可能是今年最火的功能,音頻讓用戶溝通更為方便,在此基礎之上還能衍生出更豐富的語音交互方式,比如語音表情、網絡電話和視頻電話等等。
語音輸入是語音識別的基礎應用,技術基本成熟,2012年有望廣泛實現在手機的輸入法中,為用戶的輸入方式帶來便利。
新穎的交互技術必然還會存在各種缺陷,需要交互設計發揮自身設計優勢,充分利用技術的優點,盡量避免技術不成熟引發的體驗問題,一定程序上也是促進技術的發展。
趨勢十:演變中的手勢操作
以N9為代表,滑動手勢取代Home鍵,進入多任務、功能列表還是應用程序,都可以使用滑動手勢操作。滑動操作將非常頻繁地出現在觸摸屏操作中,設計中使用滑動手勢取代點擊有諸多優點,比如避免點擊區域導致的誤操作問題、提升操作效率、隱藏控件并節約顯示空間等,百度手機輸入法獨創的滑動輸入也是早期手勢操作的代表性案例。
N9手機
取締按鍵是未來手機的必然趨勢,滑動手勢會發揮更大的作用。
iPhone版Flipboard向上滑動實現翻頁,不過效果過于強烈,視覺上并不連貫,但也是滑動手勢在移動應用中嘗試性設計。滑動手勢不但可以用來操作平級界面之間的跳轉,也能用來作為進入上下級界面的操作方式。
百度手機瀏覽器WP7版獨創單指滑動工具欄可以縮放頁面,隨意控制頁面比例,未來還會有更多的手勢應用在常用界面中。還是瀏覽器利用兩指滑動新建界面或者進入其他多標簽頁,將滑動手勢定義為快捷操作,為高級用戶提高了操作效率。同時注意引導用戶學習特有的手勢操作,有助于提升用戶對于應用的使用粘度。
結語
研究設計趨勢是為了掌握的設計資訊和前沿的研究方向,從眾多設計中感知規律并能靈活運用到自己的設計當中,甚至是引領設計潮流,這也是創新設計的必備要素。