ui設(shè)計(jì)包括那些內(nèi)容

　　ui設(shè)計(jì)包括那些內(nèi)容？UI設(shè)計(jì)師的工作大體包括兩個(gè)方面：一是圖形設(shè)計(jì)，包括軟件產(chǎn)品中所有能看到的界面、圖標(biāo)、插畫等;二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程。具體的工作流程在不同的團(tuán)隊(duì)存在一定差異，主要有以下幾個(gè)方面：

　　整理需求
 

　　在設(shè)計(jì)工作開(kāi)始之前先需要了解產(chǎn)品的需求。通過(guò)產(chǎn)品經(jīng)理提供的產(chǎn)品文檔，或者直接與用戶溝通獲得。而這些需求往往是零碎甚至復(fù)雜的，設(shè)計(jì)師需要從中整理出產(chǎn)品背后的用戶需求層次和潛在邏輯，找出用戶痛點(diǎn)癢點(diǎn)，以便針對(duì)具體問(wèn)題通過(guò)設(shè)計(jì)解決。
 

　　這里推薦日本著名設(shè)計(jì)師，佐藤可士和的《超整理術(shù)》?？梢詭椭阍诹鑱y的信息中抽絲剝繭，厘清思路。
 

　　低保真交互
 

　　在整理出產(chǎn)品需求之后，我們就要把它們記錄下來(lái)，制作出低保真交互。
 

　　可以將軟件中的界面通過(guò)最簡(jiǎn)單直接的方式繪制出來(lái)，并用線條連接以表明每個(gè)頁(yè)面之間的關(guān)系。通過(guò)這種方式，可以初步把產(chǎn)品的交互原型一步步描繪出來(lái)，這其中可能會(huì)伴隨反復(fù)的修改甚至推翻從來(lái)，所以對(duì)設(shè)計(jì)師的耐心和專業(yè)能力都是比較嚴(yán)苛的考驗(yàn)。
 

　　很多團(tuán)隊(duì)總是有一個(gè)誤區(qū)，就是上來(lái)就說(shuō)出一個(gè)想法，立刻就讓設(shè)計(jì)師做出高保真效果圖，這種方式可以說(shuō)是設(shè)計(jì)師的噩夢(mèng)，因?yàn)橥ㄟ^(guò)低保真設(shè)計(jì)稿勾勒出大概布局和交互，修改起來(lái)非常容易;而高保真設(shè)計(jì)圖卻需要耗費(fèi)非常多的時(shí)間和精力，在不確定的情況下匆匆設(shè)計(jì)高保真是非常不明智的選擇，往往會(huì)造成設(shè)計(jì)團(tuán)隊(duì)精力的巨大浪費(fèi)，并影響整個(gè)項(xiàng)目的進(jìn)度。
 

　　搭建交互原型市面上有很多產(chǎn)品，筆者最常用的是摹客原型，這是一款免費(fèi)的在線設(shè)計(jì)產(chǎn)品，簡(jiǎn)單明了，支持多人協(xié)作，對(duì)效率提升非常明顯。
 

　　界面設(shè)計(jì)
 

　　終于到了設(shè)計(jì)師大展身手的時(shí)候了!界面設(shè)計(jì)主要包括確認(rèn)視覺(jué)風(fēng)格，典型界面設(shè)計(jì)，字體設(shè)計(jì)，圖標(biāo)設(shè)計(jì)，制定規(guī)范批量輸出界面設(shè)計(jì)等。設(shè)計(jì)師在這一階段有較多的發(fā)揮空間，通過(guò)之前對(duì)產(chǎn)品的理解，對(duì)界面的大小、位置、版式、顏色等等制定標(biāo)準(zhǔn)。但低保真交互原型是需要服從的，因?yàn)檫@是整個(gè)團(tuán)隊(duì)討論的結(jié)果。
 

　　動(dòng)效設(shè)計(jì)
 

　　新生代的互聯(lián)網(wǎng)產(chǎn)品，大量地融合了交互動(dòng)效，也是各類競(jìng)品的重要亮點(diǎn)之一，所以懂得交互動(dòng)效對(duì)新時(shí)代的設(shè)計(jì)師們來(lái)說(shuō)，也是必備的能力之一。
 

　　開(kāi)發(fā)還原檢查
 

　　不是設(shè)計(jì)稿完成設(shè)計(jì)師就可以休息了。產(chǎn)品上線之前最重要保證最終落地的效果和品質(zhì)。開(kāi)發(fā)還原的過(guò)程中，程序員們可能會(huì)遇到各種潛在的問(wèn)題，這個(gè)時(shí)候和他們保持溝通和配合是非常必要的。
 

　　傾聽(tīng)用戶
 

　　這可能不是UI設(shè)計(jì)師的本職工作，但是筆者認(rèn)為設(shè)計(jì)師有必要去了解。從用戶的評(píng)論和反饋中，往往能發(fā)現(xiàn)設(shè)計(jì)師容易忽略的問(wèn)題，通過(guò)對(duì)這些問(wèn)題的改進(jìn)正是我們提升產(chǎn)品和設(shè)計(jì)能力的最好途徑。
 

　　做設(shè)計(jì)的人基本都有這些特質(zhì)：有發(fā)現(xiàn)美的眼光;勇于創(chuàng)新;敢于想象;善于動(dòng)手實(shí)踐;能夠接受新鮮事物;對(duì)新潮流，新趨勢(shì)充滿好奇，有一顆熱愛(ài)設(shè)計(jì)的心的人都適合。
 

　　UI設(shè)計(jì)按用戶和界面來(lái)分可分成四種UI設(shè)計(jì)。
 

　　分別是PC端UI設(shè)計(jì)，移動(dòng)端UI設(shè)計(jì)，游戲UI設(shè)計(jì)，以及其它UI設(shè)計(jì)。
 

　　PC端UI設(shè)計(jì)
 

　　PC端UI設(shè)計(jì)，也就是電腦用戶，界面指的就是電腦上的操作界面。像電腦版的QQ，微信，PS等軟件和網(wǎng)頁(yè)的一些按鈕圖標(biāo)等。
 

　　移動(dòng)端UI設(shè)計(jì)
 

　　移動(dòng)端UI設(shè)計(jì)，也就是手機(jī)用戶，界面指的就是手機(jī)界面，也就是說(shuō)手機(jī)上的所有界面都是移動(dòng)端UI設(shè)計(jì)。比如微信聊天界面，QQ聊天界面，手機(jī)桌面 。
 

　　游戲UI設(shè)計(jì)
 

　　游戲UI設(shè)計(jì)，用戶也就是游戲UI用戶，界面指的是游戲中的界面，像手游王者榮耀，端游英雄聯(lián)盟和一些其它游戲中的界面，登錄界面、個(gè)人裝備屬性界面也都是屬于游戲UI設(shè)計(jì)。
 

　　第四種：其它UI設(shè)計(jì)
 

　　像VR界面、AR界面、ATM界面、一些智能設(shè)備的界面，比如智能電視、車載系統(tǒng)等等，用戶較少，但又需要，未來(lái)有可能很火，有可能保持現(xiàn)狀。
 

　　UI設(shè)計(jì)師的職能大體包括三方面：
 

　　圖形設(shè)計(jì)
 

　　即傳統(tǒng)意義上的“美工”。當(dāng)然，實(shí)際上他們承擔(dān)的不是單純意義上美術(shù)工人的工作，而是軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。
 

　　交互設(shè)計(jì)
 

　　主要在于設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。
 

　　用戶測(cè)試/研究
 

　　這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過(guò)以目標(biāo)用戶問(wèn)卷的形式衡量UI設(shè)計(jì)的合理性。如果沒(méi)有這方面的測(cè)試研究，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)極大的風(fēng)險(xiǎn)。
 

　　軟件只是一個(gè)工具，千萬(wàn)不要覺(jué)得會(huì)了軟件就會(huì)了設(shè)計(jì)，不要太依靠軟件了，會(huì)了工具后還要學(xué)習(xí)理論知識(shí)才能成為一個(gè)合格的設(shè)計(jì)師。
 

　　常見(jiàn)的UI設(shè)計(jì)界面
 

　　啟動(dòng)頁(yè)
 

　　首次打開(kāi)使用app時(shí)一般會(huì)彈出一個(gè)啟動(dòng)頁(yè)面，這也是是影響用戶第一印象的重要因素，這種最初的愉悅體驗(yàn)很有可能讓這款app流行起來(lái)。這就是為什么要格外重視啟動(dòng)頁(yè)的原因。
 

　　啟動(dòng)頁(yè)是用戶打開(kāi)APP時(shí)看到的第一個(gè)界面，它們通常很簡(jiǎn)潔，往往是一個(gè)logo、app的名稱或者是這個(gè)產(chǎn)品的一句slogan，呈現(xiàn)在用戶眼前。
 

　　為了確保啟動(dòng)頁(yè)在各個(gè)不同分辨率的屏幕上適配良好，UI視覺(jué)設(shè)計(jì)師們常常會(huì)把它們放在屏幕的中間位置或者底部位置。
 

　　啟動(dòng)頁(yè)的建議顯示時(shí)間是4~8秒之間，超過(guò)這個(gè)區(qū)間，用戶可能會(huì)感覺(jué)厭煩。此外，最好顯示加載進(jìn)度，這樣一些不耐煩的用戶就會(huì)知道還要多久才可以進(jìn)入app。
 

　　引導(dǎo)頁(yè)
 

　　引導(dǎo)頁(yè)是APP可能提供給新用戶的一組介紹產(chǎn)品功能、特性以及優(yōu)點(diǎn)的界面，它們?cè)谟脩羰状问褂玫臅r(shí)候加載。幫助用戶熟悉它的控件和對(duì)應(yīng)功能，讓用戶更好的上手使用，并且?guī)椭脩襞袛噙@款軟件是否有用。
 

　　雖然每一款app的結(jié)構(gòu)和內(nèi)容都是非常獨(dú)立的，然而它們的引導(dǎo)頁(yè)還是有一些相同的設(shè)計(jì)趨勢(shì)。而很多引導(dǎo)頁(yè)都習(xí)慣于用插畫的形式來(lái)表現(xiàn)他們的新特性或者優(yōu)點(diǎn)，這對(duì)用戶很有吸引力，同時(shí)開(kāi)發(fā)成本也很低。
 

　　設(shè)計(jì)師們也常常會(huì)為app創(chuàng)建一個(gè)卡通形象，用它來(lái)模擬真實(shí)的使用場(chǎng)景，將它作為一種連接用戶與app的情感紐帶。還有引導(dǎo)頁(yè)的文案也是十分重要的，它應(yīng)該是簡(jiǎn)短的、有幫助的并且具有可讀性。
 

　　Dating App
 

　　數(shù)據(jù)統(tǒng)計(jì)界面
 

　　很多app都包含數(shù)據(jù)統(tǒng)計(jì)界面。它提供的數(shù)據(jù)越多，設(shè)計(jì)難度就越大。設(shè)計(jì)師需要確保所有的重要數(shù)據(jù)在屏幕上都是清晰可見(jiàn)并且有用的，曲線圖、比例尺和統(tǒng)一的icon可以使整個(gè)界面看上去很流暢、很整潔。
 

　　此外，數(shù)據(jù)統(tǒng)計(jì)界面需要為不同的數(shù)據(jù)劃分不同的區(qū)域，以方便用戶閱讀。
 

　　Bright Vibe Calendar App
 

　　電商類app界面 產(chǎn)品列表頁(yè)
 

　　所有的電商平臺(tái)主要目的都是為了銷售產(chǎn)品，它的視覺(jué)設(shè)計(jì)對(duì)用戶的決策有很大的影響。產(chǎn)品列表是公司銷售的一系列商品。設(shè)計(jì)師的工作是設(shè)計(jì)一個(gè)可以吸引用戶并且鼓勵(lì)他們購(gòu)買商品的頁(yè)面。
 

　　移動(dòng)端的產(chǎn)品列表也可以像一些web端的電商平臺(tái)一樣，將產(chǎn)品類目放置在一個(gè)容器中，可以通過(guò)上滑來(lái)查看，一行中放置的產(chǎn)品數(shù)量應(yīng)該根據(jù)屏幕寬度來(lái)決定。
 

　　Cafe Coupon app
 

　　產(chǎn)品詳情頁(yè)
 

　　這個(gè)界面是給那些想要進(jìn)一步的人，提供更多關(guān)于產(chǎn)品的信息，它用來(lái)展示產(chǎn)品的一些主要信息，以此來(lái)幫助用戶決定他們是否真的需要這個(gè)產(chǎn)品。
 

　　設(shè)計(jì)師一般將產(chǎn)品的展示圖片放在屏幕中央，相關(guān)描述放在圖片下方。設(shè)計(jì)師可以將尺寸、材質(zhì)或者其他數(shù)據(jù)分成不同的模塊，以便用戶可以輕松的找到他們所需要的信息
 

　　珠寶電商app
 

　　確認(rèn)支付頁(yè)面
 

　　如今越來(lái)越多的人愿意使用智能手機(jī)線上支付，各大公司紛紛對(duì)這一環(huán)節(jié)開(kāi)始加以重視，力求打造最便捷的支付體驗(yàn)。
 

　　支付是用戶購(gòu)買商品的最后一步，設(shè)計(jì)師的職責(zé)是讓用戶在使用的過(guò)程中感覺(jué)舒服。首先，確認(rèn)支付頁(yè)面的必有的部分是一個(gè)表單，用來(lái)填寫一些個(gè)人信息，諸如姓名、銀行卡賬號(hào)此類。
 

　　填寫信息類別取決于用戶在何地產(chǎn)生購(gòu)買行為。此外，至關(guān)重要的一點(diǎn)是讓用戶知道他個(gè)人信息是安全的。所以設(shè)計(jì)師必須通過(guò)一些視覺(jué)元素讓用戶知道這些信息不會(huì)被泄露出去，令他們安心。
 

　　可以使用一系列已經(jīng)約定俗成的icon，它們被賦予了特定意義，并且經(jīng)過(guò)了大公司的檢驗(yàn)。
 

　　Cinema app
 

　　社交軟件界面 列表頁(yè)
 

　　人們常常使用各種各樣的社交軟件聊天或者瀏覽動(dòng)態(tài)，列表頁(yè)是一個(gè)連續(xù)不斷的頁(yè)面，包含用戶想要瀏覽的動(dòng)態(tài)或者其他消息。
 

　　實(shí)踐表明，移動(dòng)端的用戶喜歡快速的瀏覽列表頁(yè)，這就是為什么他們需要一個(gè)簡(jiǎn)潔清爽的視覺(jué)設(shè)計(jì)的原因，不要加載過(guò)多的視覺(jué)元素。
 

　　信息可以通過(guò)用戶滑動(dòng)屏幕，逐個(gè)呈現(xiàn)，確保導(dǎo)航欄清晰可觸，一屏中的最后一條信息應(yīng)該被部分顯示。
 

　　Music app
 

　　播放頁(yè)
 

　　人們可以通過(guò)它來(lái)控制自己聽(tīng)到的歌曲，該功能包括切歌、暫停和播放，這里需要醒目、易于識(shí)別的button。
 

　　這一部分通常放在屏幕底部中央，上方主要部分放置一個(gè)與歌曲相關(guān)的圖片，但是也有一些設(shè)計(jì)師會(huì)在此區(qū)域做一些音樂(lè)可視化的動(dòng)效，這對(duì)于設(shè)計(jì)師來(lái)說(shuō)是展示想象力和創(chuàng)造力的好機(jī)會(huì)。
 

　　ECHO app
 

　　現(xiàn)如今，移動(dòng)端app快速發(fā)展，每天都有大量的新商品出現(xiàn)，它們?cè)诮鉀Q用戶新型需求的同時(shí)也產(chǎn)生了很多新型界面，設(shè)計(jì)師應(yīng)該做好準(zhǔn)備面臨這一挑戰(zhàn)，一直保持創(chuàng)新精神，從啟發(fā)中迸發(fā)靈感。
 

　　同時(shí)，個(gè)性化設(shè)置數(shù)據(jù)也是所有社交網(wǎng)絡(luò)app的關(guān)鍵部分，它引導(dǎo)用戶進(jìn)入虛擬社區(qū)網(wǎng)絡(luò)，并且開(kāi)始與其他人進(jìn)行分享。設(shè)計(jì)師的主要任務(wù)就是通過(guò)流暢的UX設(shè)計(jì)，使這一步驟盡可能的方便友好。據(jù)交互設(shè)計(jì)組織所說(shuō)。
 

　　設(shè)計(jì)師首要考慮的是，個(gè)性化設(shè)置界面應(yīng)該清晰明確，展示的信息數(shù)量應(yīng)該限制在一定范圍內(nèi)。否則整個(gè)界面看上去會(huì)很亂很復(fù)雜同時(shí)要時(shí)刻確保導(dǎo)航欄清晰可見(jiàn)，這樣用戶就不用花費(fèi)太多精力去摸索app。
 

　　個(gè)性化設(shè)置界面的設(shè)計(jì)應(yīng)該以目標(biāo)受眾為主導(dǎo)，如果想要你的app滿足用戶的使用需求，那么用戶研究是必不可少的。
 

　　UI設(shè)計(jì)包括的東西很多，如果你現(xiàn)在是零基礎(chǔ)或者是想轉(zhuǎn)行學(xué)好UI設(shè)計(jì)，最好的學(xué)習(xí)方式就是報(bào)班系統(tǒng)學(xué)習(xí)，學(xué)的全面，學(xué)的專業(yè)，學(xué)完就業(yè)薪資高，只有不斷提升自己，提高收入水平，才能擁有更好的生活。