ui設(shè)計怎么做（ui設(shè)計怎么做成app）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計怎么做的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008

本文目錄:

• 1、UI設(shè)計工作流程是怎樣的?

• 2、如何做一個優(yōu)秀的UI設(shè)計師呢？

• 3、ui設(shè)計整個過程一般分為哪些步驟？

• 4、懂視生活

一、UI設(shè)計工作流程是怎樣的?

設(shè)計前：設(shè)計前的準(zhǔn)備也是很有必要的，很多設(shè)計師都是直接開始進(jìn)行設(shè)計，殊不知這樣做會給后續(xù)工作埋下無數(shù)的坑，比如：反復(fù)修改設(shè)計稿、需求方臨時增加幾個頁面、設(shè)計交付延期、效果不如預(yù)期等情況，這樣一來反而使得整個項目節(jié)奏慢下來，背離初衷。去了解業(yè)務(wù)，拉上需求方請他講講項目背景、業(yè)務(wù)目標(biāo)、用戶人群、競品分析以及跟現(xiàn)有業(yè)務(wù)的關(guān)聯(lián)等，這樣做的好處非常多。一方面能通過需求方的講述了解最真實的需求和產(chǎn)品目標(biāo)，便于后續(xù)設(shè)計中的決策;另一方面我們可以反向要求需求方把業(yè)務(wù)目標(biāo)梳理得更加透徹，避免在大方向上出現(xiàn)差錯。

設(shè)計中：我們需要先對交互原型進(jìn)行不斷的打磨，確保交互層面的體驗優(yōu)雅且符合用戶使用習(xí)慣。如果團(tuán)隊里配備了交互設(shè)計師，可以與交互同學(xué)做一些討論，敲定原型后與需求方再次進(jìn)行確認(rèn)，對齊各方意見。敲定原型后，就可以確定風(fēng)格了，風(fēng)格通常沒有明確的規(guī)定，只要風(fēng)格定義有依據(jù)加上平時對當(dāng)下流行趨勢的關(guān)注，風(fēng)格定調(diào)基本上不會有太大問題，也可以根據(jù)設(shè)計前準(zhǔn)備的一些機會點做針對性的設(shè)計，比如：插畫、質(zhì)感、細(xì)節(jié)、動效等。

設(shè)計后：一般設(shè)計師設(shè)計完成后，設(shè)計評審會對設(shè)計師的作品進(jìn)行評價，設(shè)計評審?fù)ㄟ^后，除了輸出設(shè)計內(nèi)容和對設(shè)計文件進(jìn)行整理歸檔外，后面還要做的事情基本上就是推進(jìn)設(shè)計落地與設(shè)計驗證了。設(shè)計落地環(huán)節(jié)設(shè)計師的參與非常重要，前面所有的工作是以上線的效果為標(biāo)準(zhǔn)，所以為了讓我們的付出不打折扣，需要在設(shè)計驗收時細(xì)致堅持，確保設(shè)計效果完美落地。除了督促開發(fā)同學(xué)們進(jìn)行調(diào)整，將設(shè)計細(xì)節(jié)標(biāo)注得更加清晰，復(fù)雜的交互輸出一份動畫 demo，更能幫助開發(fā)同學(xué)準(zhǔn)確理解設(shè)計意圖。

二、如何做一個優(yōu)秀的UI設(shè)計師呢？

一、兩道思維

很多 UI 拿到一個頁面原型的時候，就立馬打開各大設(shè)計網(wǎng)站找參考，然后照著參考頁面上的效果，生搬硬套到原型上，這只是達(dá)到了單純美化頁面的效果。

那么拿到原型后應(yīng)該帶著怎樣的思維來進(jìn)行思考呢？

第一道思維：交互思維

先了解頁面實現(xiàn)什么功能，功能的交互操作流程是怎樣的，也就是說用戶操作這個頁面上的功能時，用戶的行為路徑是怎樣的。

第二道思維：視覺思維

了解完功能、交互后，提取原型中視覺組成元素，細(xì)分歸類，每一類應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計。

然后交互與視覺一同結(jié)合來設(shè)計界面。

二、思維應(yīng)用

結(jié)合案例我們來看下兩道思維是如何進(jìn)行的。

第一道思維：交互思維

了解功能交互流程。

根據(jù)實例原型分析出用戶行為路徑：

用戶行為路徑：

注意點：

用戶行為路徑的獲取，一定要跟產(chǎn)品經(jīng)理、交互設(shè)計師進(jìn)行溝通確認(rèn)清楚。

用戶行為路徑某些步驟中，也有先后之分，比如第1步中，用戶輸入了賬戶地址后，才會有賬戶的相關(guān)數(shù)據(jù)顯示。

用戶行為路徑可以支撐信息內(nèi)容進(jìn)行歸類分組。

第二道思維：視覺思維

提取視覺組成元素。

視覺元素：

注意點：

提取視覺組件元素盡量詳細(xì)歸類。

如有視覺規(guī)范，視覺組件元素風(fēng)格應(yīng)用請遵循視覺規(guī)范。

如無視覺規(guī)范，同類視覺組件元素應(yīng)用統(tǒng)一性原則進(jìn)行設(shè)計。

三、檢驗方案

我們帶著兩道思維來檢驗一下這位設(shè)計師輸出的方案：

問題1：交互層級

問題所在：

數(shù)據(jù)顯示在前，輸入在后，交互操作層級有點混亂。

問題截圖：

問題解決：

用戶行為路徑中，第1步有個先后順序，先輸入地址，后顯示數(shù)據(jù)，在進(jìn)行信息內(nèi)容布局設(shè)計的時候同樣需要有先后順序，所以交互操作層級一定程度上影響著布局排版。

問題2：步驟關(guān)聯(lián)

問題所在：

「批量轉(zhuǎn)賬」按鈕歸類到了第1步的信息模塊中，交互操作邏輯有點不通暢。

問題截圖：

解決方案：

用戶行為路徑中，用戶核心費用信息后，最有可能的行為就是點擊「批量轉(zhuǎn)賬」按鈕，所以「批量轉(zhuǎn)賬」按鈕與轉(zhuǎn)賬費用信息的操作關(guān)聯(lián)性比較大，應(yīng)該在同一模塊里會更符合交互操作邏輯。

問題3：顏色應(yīng)用

問題所在：

主色、點綴色、輔助色各自的應(yīng)用范圍沒有規(guī)則，顏色應(yīng)用混亂。

問題截圖：

問題解決：

一個頁面或者項目中，各種顏色的應(yīng)用范圍需要有一定規(guī)范，文字使用什么顏色、按鈕使用什么顏色、輸入組件使用什么顏色、背景使用什么顏色都需要有對應(yīng)的使用規(guī)則。

問題4：輸入控件

問題所在：

輸入類組件樣式存在多樣性，同樣是輸入框，有多種樣式，會造成用戶交互操作上的認(rèn)知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，輸入類組件樣式應(yīng)用統(tǒng)一性原則，保持視覺風(fēng)格一致，從而減少用戶操作認(rèn)知偏差。

問題5：按鈕樣式

問題所在：

按鈕樣式應(yīng)用到不具備按鈕點擊屬性的對象上，用戶會認(rèn)為也是可點擊，會造成用戶交互操作上的認(rèn)知有誤。

問題截圖：

問題解決：

一個頁面或者項目中，不具備按鈕點擊屬性的元素盡量不要套用按鈕樣式，減少用戶操作認(rèn)知偏差。

舉個例子：人形的稻草套上人的衣服，成功了欺騙了人們，造成了認(rèn)知偏差。

問題6：信息展示

問題所在：

同類信息內(nèi)容的展示存在多樣式，傳達(dá)過程中加重了用戶的認(rèn)知負(fù)擔(dān)。

問題截圖：

問題解決：

一個頁面或者項目中，同類信息內(nèi)容的展示應(yīng)用相似性原則保持視覺風(fēng)格一致，因為相似性的布局可以更加高效地傳達(dá)信息。

舉個例子：電商頁面，金額信息展示；理財頁面，收益信息的展示；都是應(yīng)用相似性的布局，即統(tǒng)一又高效地傳達(dá)信息。

問題7：圖標(biāo)風(fēng)格

問題所在：

圖標(biāo)風(fēng)格不一致，圖形反白風(fēng)格，立體風(fēng)格，線性風(fēng)格。

問題截圖：

問題解決：

根據(jù)產(chǎn)品的特性，建議統(tǒng)一的圖標(biāo)風(fēng)格，選擇線性、面性、漸變、立體等風(fēng)格。

問題八：對齊間隔

問題所在：

頁面元素的對齊、間隔沒有規(guī)律，整體視覺顯得松散，不嚴(yán)謹(jǐn)。

問題截圖：

問題解決：

可以利用柵格系統(tǒng)，把頁面信息內(nèi)容規(guī)整起來。

四、優(yōu)化方案

根據(jù)發(fā)現(xiàn)的問題，我們來看一下優(yōu)化后的設(shè)計方案：

優(yōu)化1：交互路徑

根據(jù)用戶行為路徑，將相關(guān)聯(lián)的信息歸類到一個模塊，每個步驟劃分到一個模塊，相關(guān)聯(lián)的步驟合并到一個模塊，模塊內(nèi)完成各自的操作展示任務(wù)，模塊之間信息內(nèi)容互不干擾，但從結(jié)構(gòu)布局又能夠形成符合交互操作邏輯。

優(yōu)化2：顏色規(guī)范

規(guī)范顏色，配色的方法在這里不做深入討論，這里方法的是基于品牌色通過飽和度、亮度、透明度的變化來得出文字各層級的顏色、邊框的顏色。

優(yōu)化3：輸入控件

對輸入類控件的樣式進(jìn)行了統(tǒng)一，讓用戶從視覺上就能夠清楚地分辨出哪些是可以進(jìn)行輸入操作的，從而減少用戶對交互操作上的認(rèn)知成本，提高信息輸入效率。

輸入控件進(jìn)行交互時，要有交互狀態(tài)反饋，默認(rèn)狀態(tài)、選中狀態(tài)、錯誤狀態(tài)。視情況而定，可以增加鼠標(biāo)移上狀態(tài)和不可輸入狀態(tài)。

狀態(tài)變化時的顏色應(yīng)用，可以通過變換色相的透明度來保持色彩的一致性。

優(yōu)化4：按鈕規(guī)范

對按鈕進(jìn)行了分類，分為常規(guī)按鈕、圖標(biāo)按鈕、文字按鈕；對按鈕樣式用顏色進(jìn)行了統(tǒng)一；按鈕要有交互狀態(tài)反饋，不可點擊狀態(tài)、可點擊狀態(tài)、鼠標(biāo)移上狀態(tài)、鼠標(biāo)按下。

狀態(tài)變化時的顏色應(yīng)用，可以通過變換色相的飽和度、亮度、透明度來保持色彩的一致性。

優(yōu)化5：信息展示

對信息內(nèi)容應(yīng)用相似性原則進(jìn)行了排版的統(tǒng)一處理，每個小類信息的標(biāo)題與內(nèi)容采用統(tǒng)一排版格式，然后重復(fù)應(yīng)用，有助于提高信息獲取效率。

優(yōu)化6：圖標(biāo)風(fēng)格

這里的圖標(biāo)應(yīng)用于功能性圖標(biāo)，統(tǒng)一采用線性圓角風(fēng)格。功能性圖標(biāo)需要注意圖標(biāo)的形狀要能夠正確有效地傳達(dá)出功能的含義。

優(yōu)化7：對齊間隔

應(yīng)用柵格系統(tǒng)對視覺元素之間的對齊、間隔進(jìn)行調(diào)整，使頁面視覺更加嚴(yán)謹(jǐn)，頁面信息更容易閱讀。

五、總結(jié)

交互思維

了解頁面中的功能交互流程，梳理用戶操作行為路徑，可以對行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù)，最終有助于頁面信息內(nèi)容的排版布局。

視覺思維

提取視覺組成元素，對顏色、文字、控件、圖標(biāo)等每一類應(yīng)用統(tǒng)一性原則進(jìn)行規(guī)范設(shè)計，再通過視覺元素本身相互組合，最終應(yīng)用回信息內(nèi)容上，建立規(guī)范的視覺感。

設(shè)計一個頁面，交互思維和視覺思維是互相配合的，缺一不可，最終都是為了共同去構(gòu)造符合交互操作邏輯、滿足視覺美感的界面。

三、ui設(shè)計整個過程一般分為哪些步驟？

1. Storyboard 故事版：

主要負(fù)責(zé)人：產(chǎn)品經(jīng)理或交互設(shè)計師

最早大家開始討論用戶體驗流程，在白板上邊畫流程邊添加粗略的UI元素。會后交互設(shè)計師會在在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、交互設(shè)計師、UI設(shè)計師、包括技術(shù)工程師會一同作大量的討論，而且主要討論的是流程和主要功能，因此手畫故事版最快最方便并易于修改的。

此環(huán)節(jié)要敲定userflow，用戶流程及其中的關(guān)鍵步驟，每一步驟都是一個主要界面。

*白板上一般都是這樣，交互設(shè)計同學(xué)會在紙上重繪。

<img src="https://pic4.zhimg.com/5b5007aa23668ae60f26e87b5e807453_b.jpg" data-rawwidth="360" data-rawheight="240" class="content_image" width="360"/>

*移動產(chǎn)品設(shè)計這樣做也行，不買專用的模板本和工具尺，自己打印也行。

<img src="https://pic3.zhimg.com/e0816d618c789316adbd90e091f7cebe_b.jpg" data-rawwidth="400" data-rawheight="300" class="content_image" width="400"/>

2. Key wireframe 關(guān)鍵界面線框圖

主要負(fù)責(zé)人：交互設(shè)計師

在確定的用戶流程中，選出幾個關(guān)鍵的，有代表性的步驟，做細(xì)化的wireframe線框圖。線框圖里要確保每一個UI元素的設(shè)計，包括其大小和位置。我們做的線框圖是1:1的，也就是線框圖與實際界面尺寸一致。1:1的線框圖能在前期避免考慮不周和執(zhí)行困難等很多問題的出現(xiàn)。

此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局，以及全局的布局排版風(fēng)格。

*線框圖做成1:1最好。輸出到文檔里要添加說明。在后面的工作里，這份文檔可以讓UI設(shè)計同學(xué)和工程師同學(xué)共用。

<img src="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_b.jpg" data-rawwidth="439" data-rawheight="280" class="origin_image zh-lightbox-thumb" width="439" data-original="https://pic2.zhimg.com/ed48f0c692a530b4bb5903f50c7ef2f5_r.jpg"/>

3. Key visual design 關(guān)鍵界面視覺設(shè)計

主要負(fù)責(zé)人：UI設(shè)計師

此環(huán)節(jié)交互設(shè)計師會按確定的用戶流程及確定的布局風(fēng)格來繼續(xù)做其它界面的線框圖。UI設(shè)計師則同時開始做關(guān)鍵界面的視覺設(shè)計，進(jìn)行配色、樣式不同風(fēng)格的嘗試。

此環(huán)節(jié)要確定產(chǎn)品界面的視覺設(shè)計風(fēng)格。

4. All wireframe 全部界面線框圖

主要負(fù)責(zé)人：交互設(shè)計師

此環(huán)節(jié)交互設(shè)計師要完成全部界面的線框圖（1:1的）設(shè)計并且團(tuán)隊確認(rèn)。

*做完全部的線框圖，一般會出一個總結(jié)構(gòu)圖。如果有足夠大的場地，也可以逐頁打印出來貼到一面墻上。方便團(tuán)隊隨時參考。

<img src="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_b.jpg" data-rawwidth="599" data-rawheight="371" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic4.zhimg.com/9f67c96abfd05c88769252258aea0b6f_r.jpg"/>5. Prototype 可動原型

主要負(fù)責(zé)人：交互設(shè)計師

此環(huán)節(jié)依產(chǎn)品需求而定。如果靜態(tài)的線框圖還不能完整的體現(xiàn)出產(chǎn)品特點，那就需要做成可操作甚至有關(guān)鍵界面動畫示意的可動原型。通常是HTML的可動原型，特殊項目也曾經(jīng)做過Flash的。我還有一個奇葩朋友用PPT做過（PPT的開發(fā)工具+VB Script）幾乎接近成品界面的可動原型。

此環(huán)節(jié)的確認(rèn)同上一步，團(tuán)隊的理解會更精準(zhǔn)。

*忍不住帖一個PPT的開發(fā)工具面板，提供VS風(fēng)格的控件，并且直接用VB script寫控件邏輯！還可以帶dummy數(shù)據(jù)！客戶都以為你開發(fā)完畢了有木有。

<img src="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_b.jpg" data-rawwidth="596" data-rawheight="117" class="origin_image zh-lightbox-thumb" width="596" data-original="https://pic1.zhimg.com/2c1005ec8685f2765d802a7ff759b1cc_r.jpg"/>

6. UI design 全部界面視覺設(shè)計

主要負(fù)責(zé)人：UI設(shè)計師

完成全部界面的UI視覺設(shè)計。

此環(huán)節(jié)確認(rèn)全部UI設(shè)計。同時把確認(rèn)的UI更新到文檔里。

四、懂視生活

做好手機開發(fā)中的UI設(shè)計如下：

1、主色調(diào)與輔助色的搭配。

主色調(diào)的使用會給用戶留下一定的印象，所以要選擇好主色調(diào)。至于配色和輔助色就是為了配合襯托產(chǎn)品的主色調(diào)，不同產(chǎn)品的輔助色運用策略也不同。我們常說的鄰近色和對比色就是選擇輔助色的方法。

2、整個界面風(fēng)格的表達(dá)。

手機APP開發(fā)具體要采用的什么樣的設(shè)計風(fēng)格，還是要依據(jù)產(chǎn)品具體的需求等去進(jìn)行選擇。同樣的產(chǎn)品信息，在UI的表達(dá)上可以有不同的表達(dá)方式，而圖標(biāo)的設(shè)計風(fēng)格也有很多細(xì)微的差別，圓角還是直角，面還是線行，設(shè)計的語言邏輯和目的等等都需要在UI設(shè)計中去考慮。

3、情感化設(shè)計的表達(dá)。

在一些細(xì)節(jié)上需要考慮到情感化的設(shè)計，這樣可以去提升手機APP設(shè)計的品質(zhì)，提高用戶在使用體驗。而且好的設(shè)計師會在UI設(shè)計中引導(dǎo)用戶去解決問題，從而滿足用戶的需求。不過情感化設(shè)計的表達(dá)方式和風(fēng)格也要具體問題具體分析，并通過UI設(shè)計去進(jìn)行處理。

4、動效設(shè)計和產(chǎn)品的適配。

動效是進(jìn)行人機UI設(shè)計的一個體現(xiàn)，在一些跳轉(zhuǎn)頁面恰到好處地引用動效設(shè)計，可以提升用戶體驗度，為手機APP獲取更多用戶的好感。在設(shè)計動效的過程中，要考慮到用戶使用場景和需求等細(xì)節(jié)，而不是盲目的過度使用動效，還有一點UI設(shè)計要具備可兼容性。

以上就是關(guān)于ui設(shè)計怎么做相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。

推薦閱讀：

ui設(shè)計（ui設(shè)計軟件）

ui設(shè)計規(guī)范怎么寫（ui設(shè)計規(guī)范大全）

中國著名ui設(shè)計師（中國著名ui設(shè)計師排名）

為了生活努力賺錢的勵志句子（為了生活努力賺錢的勵志句子簡短）

老福特的cp生成器（老福特的cp生成器在哪）