2014年移動(dòng)端界面設(shè)計(jì)分析

0 評(píng)論 16005 瀏覽 10 收藏 13 分鐘

移動(dòng)互聯(lián)網(wǎng)時(shí)代的悄然襲來改變著我們的生活方式,因此有大批設(shè)計(jì)力量涌入了移動(dòng)端的設(shè)計(jì)領(lǐng)域中,這也說明了大家越來越重視用戶在各個(gè)設(shè)備終端層面的體驗(yàn)。在規(guī)劃產(chǎn)品時(shí),往往會(huì)把PC端和移動(dòng)端的產(chǎn)品放在同等重要的地位進(jìn)行思考。然而,設(shè)備的多樣性和產(chǎn)品形態(tài)的多樣性為設(shè)計(jì)師們帶來的既是更多的發(fā)揮空間,也同樣是更大的挑戰(zhàn)。這些產(chǎn)品在設(shè)計(jì)之間有何不同?如何規(guī)劃不同平臺(tái)上產(chǎn)品的功能?設(shè)計(jì)時(shí)有哪些差異?2014移動(dòng)端的界面設(shè)計(jì)是非常值得探討的話題。

唯一主色調(diào)

2014年,追求極簡(jiǎn)設(shè)計(jì)風(fēng)格,主色調(diào)可能只是選定一種色彩,然后調(diào)整透明度或者飽和度,(說得通俗些就是將色彩變淡或則加深),從而產(chǎn)生新的色彩,這樣能夠很好的表達(dá)界面層次、重要信息,并且展現(xiàn)良好的視覺效果。這樣的頁(yè)面看起來色彩統(tǒng)一,有層次感。當(dāng)前上線的一些移動(dòng)應(yīng)用都采用極少的色彩,甚至放棄所有的顏色。僅僅用一個(gè)主色調(diào)就能展現(xiàn)良好的視覺效果。

?

多彩色風(fēng)格設(shè)計(jì)

Metro 引領(lǐng)的多彩色風(fēng)格是與唯一主色調(diào)形成對(duì)照關(guān)系的設(shè)計(jì)風(fēng)格,多彩撞色更多的表現(xiàn)于多種純色塊的使用,就是很簡(jiǎn)單的純顏色,只需要注意多彩配色的方式,就能得 到很好的視覺效果。多彩色拼接的設(shè)計(jì)風(fēng)格,一屏式的頁(yè)面排版布局,總體來說是時(shí)尚大氣簡(jiǎn)潔的設(shè)計(jì)?!岸嗖首采钡母拍?,在2014年手機(jī)端仍會(huì)繼續(xù)發(fā)展。

信息框架扁平化

在設(shè)計(jì)的表現(xiàn)形式上我們追求界面扁平,注重通過弱化視覺效果來強(qiáng)化應(yīng)用的功能。在移動(dòng)設(shè)備上,過多的層級(jí)會(huì)使用戶失去耐心而放棄對(duì)產(chǎn)品的使用。而且移動(dòng)端上 頁(yè)面小,沒太多地方擺多層的tabs導(dǎo)航或者面包屑導(dǎo)航,就只剩下左上角的一個(gè)“返回”按鈕作為導(dǎo)航了,可以一次接一次的深入,但跳轉(zhuǎn)了三、四次后,再看 左上角的“返回”按鈕,你已經(jīng)很難判斷出將會(huì)返回到哪里了。應(yīng)該從信息架構(gòu)角度,再進(jìn)一步的去應(yīng)用扁平化的設(shè)計(jì)理念,信息框架扁平化的目的是減少信息層 級(jí),追求信息到達(dá)用戶的最短距離,從根本上解決上述問題。
扁平化思想是一種讓設(shè)計(jì)者在界面設(shè)計(jì)過程中減少信息層級(jí)的思想。

動(dòng)態(tài)數(shù)據(jù)可視化

數(shù)據(jù)可視化設(shè)計(jì)是將枯燥繁瑣的列表和文字轉(zhuǎn)換為直觀的餅圖、扇形圖、折線型、柱狀圖等豐富直觀的設(shè)計(jì)元素,提高用戶體驗(yàn)。而且現(xiàn)今數(shù)據(jù)可視化不只是靜態(tài)展現(xiàn) 數(shù)據(jù),用戶希望通過互動(dòng)及時(shí)獲取數(shù)據(jù)流,若以動(dòng)態(tài)效果來呈現(xiàn),能多維度呈現(xiàn)給用戶實(shí)時(shí)信息,同時(shí)能與用戶形成互動(dòng),提高數(shù)據(jù)表現(xiàn)的趣味性。動(dòng)態(tài)數(shù)據(jù)可視化 將更加強(qiáng)調(diào)數(shù)據(jù)轉(zhuǎn)譯實(shí)時(shí)更新的圖形,以及動(dòng)態(tài)的圖形化表達(dá)。

移動(dòng)端的視差效果

視差滾動(dòng)是時(shí)下比較熱門的網(wǎng)頁(yè)設(shè)計(jì)技術(shù),通過讓多層背景以不同的速度移動(dòng)來形成立體的運(yùn)動(dòng)視差效果,雖然純屬視覺效果,但不可否認(rèn)在內(nèi)容滾動(dòng)時(shí)形成的視覺體 驗(yàn)非常出色!視差效果在網(wǎng)站中的應(yīng)用并不少見,若在移動(dòng)應(yīng)用中,是否也能運(yùn)用一些精細(xì)的視差效果,為用戶帶來全新的視覺體驗(yàn)。當(dāng)用戶在傾斜和移動(dòng)屏幕時(shí), 視差能讓用戶在屏幕上看到如3D一樣的視覺效果,帶來非常出色的感官體驗(yàn)。

分層結(jié)構(gòu)

分層結(jié)構(gòu)是通過動(dòng)效擴(kuò)展了屏幕空間,渲染出帶有縱深感的層次,將操作區(qū)和內(nèi)容區(qū)劃分開,培養(yǎng)用戶使用習(xí)慣,使人印象深刻,達(dá)到意想不到的效果。這種設(shè)計(jì)更專注于內(nèi)容,更多的暴露信息,減少結(jié)構(gòu)層級(jí),操作高效。

迎合用戶的使用習(xí)慣

迎合用戶的使用習(xí)慣,主要為了讓用戶在操作中簡(jiǎn)單到極致。用戶不喜歡經(jīng)常重復(fù)性輸入一些信息,如個(gè)人賬號(hào),安全信息,操作習(xí)慣,下次操作行為等,這些占用了用戶完成其他重要任務(wù)的時(shí)間。盡量減少用戶的輸入,并且用戶在輸入時(shí)可以給出適當(dāng)?shù)膮⒖肌?br /> 根據(jù)用戶的行為習(xí)慣,對(duì)移動(dòng)應(yīng)用的整體布局進(jìn)行重新策劃,使得簡(jiǎn)單、簡(jiǎn)單、再簡(jiǎn)單、簡(jiǎn)單到極致,通過清晰的流程和界面,讓用戶減少對(duì)應(yīng)用的思考以及尋找的時(shí)間;讓準(zhǔn)確的色彩和表述減少用戶心理斗爭(zhēng)的時(shí)間。

提供明確的導(dǎo)航

導(dǎo)航在移動(dòng)界面設(shè)計(jì)中是至關(guān)重要的,導(dǎo)航的主要作用在于:告訴用戶,我在哪?我去過哪?我可以去哪?我怎么去哪?我去哪能干什么?等等,這些都是導(dǎo)航的作 用。明確的導(dǎo)航設(shè)計(jì),可以增強(qiáng)用戶的體驗(yàn),讓用戶直接在主界面就可以看到對(duì)應(yīng)子界面中的信息,減少用戶盲目的操作。在任何地點(diǎn)都能回到主界面或退出應(yīng)用, 因此導(dǎo)航上的每個(gè)操作對(duì)用戶來說應(yīng)是符合邏輯的,用戶能夠較容易了解它要表達(dá)的信息與情感。

主操作欄的內(nèi)容不易過多

主操作欄的作用是為了把最重要的內(nèi)容展示給用戶,一般不超過三項(xiàng)。過多的內(nèi)容會(huì)對(duì)用戶造成干擾。因此簡(jiǎn)潔的主操作欄便于用戶的使用和了解,并且減少用戶發(fā)生錯(cuò)誤選擇的可能性。操作欄上的操作按鈕一般用來展示最重要、常用,而且頻繁使用的功能操作,比如移動(dòng)端界面左上角的返回按鈕。

以用戶為中心

用戶總是按照他們自己的方法理解和使用移動(dòng)端,所以從用戶的觀點(diǎn)考慮,想用戶所想,做用戶所做成了設(shè)計(jì)師們的設(shè)計(jì)考量標(biāo)準(zhǔn)之一。比如用戶在沒聯(lián)網(wǎng)的情況下發(fā)送信息或發(fā)表評(píng)論,相應(yīng)的內(nèi)容會(huì)自動(dòng)保存在手機(jī)端,聯(lián)網(wǎng)后只需重新發(fā)送即可,不需要重新輸入內(nèi)容。

合理的用戶引導(dǎo)

由于手機(jī)界面的承載能力有限,產(chǎn)品功能的不斷膨脹,必須要在用戶打開應(yīng)用之后告知他某些新奇的功能,引導(dǎo)他完成某些主要任務(wù)流程,幫助用戶快速掌握應(yīng)用的使 用方法,讓用戶快速體驗(yàn)到應(yīng)用的樂趣,激起用戶對(duì)功能的嘗試欲望。引導(dǎo)語句必須簡(jiǎn)短,聚焦在最重要的任務(wù)上,減少用戶的思考時(shí)間,讓用戶不至于迷失在陌生 應(yīng)用中不知所措。同時(shí)也要避免接連不斷的展示引導(dǎo)信息,這樣不僅會(huì)產(chǎn)生短期加重記憶方面的問題,而且會(huì)讓新用戶覺得你的應(yīng)用過于復(fù)雜,望而生畏。

擬真動(dòng)態(tài)

將現(xiàn)實(shí)中的運(yùn)動(dòng)現(xiàn)象簡(jiǎn)化抽象,形成了移動(dòng)端中一些蠻有特色的動(dòng)畫效果。比如天氣應(yīng)用中,全屏的氣象動(dòng)畫優(yōu)雅而逼真,洋洋灑灑的雪粒、悠然飄浮的云朵、劃破天際的閃電傳達(dá)出一種獨(dú)特的表現(xiàn)力,給用戶更完整,更真實(shí)以及更具趣味的感官體驗(yàn)。

盡量使用圖形元素

眾所周知,圖形相較于文字更易于記憶和了解。最合理的方式是:“恰當(dāng)?shù)膱D形元素+簡(jiǎn)短的文字”,并整合到一個(gè)展示層面上,這種方式既有利于用戶閱讀,也可以 使多步驟的流程更直觀、易懂、易記憶。采用的圖形盡量簡(jiǎn)單易懂,形象具體。避免讓人產(chǎn)生歧義的圖標(biāo),因?yàn)檫@樣反而會(huì)誤導(dǎo)用戶,損失設(shè)計(jì)交互體驗(yàn)。比如圓形 是最容易讓人覺得舒服的形狀,尤其是在充滿各種方框的手機(jī)屏幕內(nèi),增加一些圓潤(rùn)的形狀點(diǎn)綴,立刻就會(huì)增加活潑的氣息,徒增好感。移動(dòng)界面運(yùn)用圓形選項(xiàng)按鈕 來設(shè)計(jì),讓選擇變得專注而明確,又不刻板老套。

總結(jié):

移動(dòng)端的設(shè)計(jì)根據(jù)不同產(chǎn)品的戰(zhàn)略和具體情境,設(shè)計(jì)要進(jìn)行靈活變化。其提倡的核心原則就是從用戶出發(fā),充分考慮用戶的使用體驗(yàn)。本文對(duì)移動(dòng)端界面設(shè)計(jì)進(jìn)行粗淺的分析,希望給大家?guī)硪恍┧伎己蛶椭?,有不足之處歡迎指正,也與諸君共勉。

作者:Anyforweb UDC中心
鏈接:http://design.anyforweb.com/Clients/ShtmlPages/News/newsDetail237.shtml
更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!