- 相關(guān)推薦
初學(xué)UI設(shè)計(jì)有什么方法
初學(xué)UI設(shè)計(jì)有什么思路？下面分享下我通過分析APP的方法，希望對你有幫助。
1. 產(chǎn)品層面
分析一款app，首先從產(chǎn)品層面入手，因?yàn)楫a(chǎn)品定位決定著后續(xù)的交互設(shè)計(jì)、視覺設(shè)計(jì)、運(yùn)營策略等等… 通�？梢詮娜齻�維度來分析產(chǎn)品定位：
1)干什么的(核心需求)
首先問自己它是干什么用的，解決了用戶哪個痛點(diǎn)。嘗試對產(chǎn)品有綜合性和概括性的理解，然后用一句話來描述它。好的產(chǎn)品基本都可以用一句話講清楚。
2)給誰用的(用戶群體)
只有充分了解用戶屬性，才能分析一款產(chǎn)品有沒有做出符合目標(biāo)用戶群體的設(shè)計(jì)。
下面是荔枝FM，用戶群體以文藝小清新，90后為主。因此，它在內(nèi)容層面：以清新，治愈型情感話題為主;視覺層面：更加文藝，清新，個性化;交互形式：更有趣味性。
同為音頻產(chǎn)品的喜馬拉雅，用戶年齡段區(qū)間比較廣。因此，內(nèi)容層面：大而全，包含PGC+UGC，目標(biāo)是打造聲音旗艦;交互和視覺層面：更普適性，中規(guī)中矩，不愿被風(fēng)格化。
因?yàn)檫@樣更能夠被大眾所接受。
所以，當(dāng)你在吐槽一個產(chǎn)品的設(shè)計(jì)不夠有逼格的時候，也要思考下，是否因?yàn)樗麄兊挠脩羧后w不適合那么做。就好比你把“快手”的設(shè)計(jì)搞的很“”instagram”，反而會讓用戶有距離感，會感覺產(chǎn)品不是服務(wù)于他們的，而流失。
3)什么時候用的(使用場景)
一個好的產(chǎn)品，會更多的從用戶的實(shí)際使用角度去出發(fā)，將各種場景元素綜合起來，在合適的場景滿足用戶的需求，提供良好的體驗(yàn)。
使用場景可以分兩個維度：1. 時間 2. 地點(diǎn)。
1. 時間
是否考慮用戶在什么時候會使用自己的產(chǎn)品，白天、晚上、下班的路上，還是晚上睡覺前。針對用戶時間來做設(shè)計(jì)的最普遍的例子就是夜間模式和自動調(diào)節(jié)亮度的功能，在不同的時間段(光照強(qiáng)度)，針對產(chǎn)品做出相應(yīng)的設(shè)計(jì)，以得到最優(yōu)的用戶體驗(yàn);
2. 地點(diǎn)：用戶在不同地點(diǎn)會產(chǎn)生不同的需求，同時，同樣的產(chǎn)品，在不同的地點(diǎn)帶給用戶的體驗(yàn)也是不一樣的，比如新聞資訊類產(chǎn)品，用戶使用高峰期是早上上班路上，那么就要考慮用戶在公交或地鐵上的場景，當(dāng)它一手扶把手一手拿手機(jī)，在大屏幕手機(jī)單手持握的狀態(tài)下，是不是可以用更多“滑動”操作代替“點(diǎn)擊”。
2. 交互層面
1)好找嗎(交互框架)
好找，指的是交互的框架布局是否合理和流暢，能否讓用戶在合適的場景快速找到解決問題的辦法。
比如，抖音app，用戶來這主要就兩件事，1.看別人的視頻，2.自己錄視頻。
它在首屏就滿足了這兩個核心需求。1.首頁默認(rèn)“推薦”的視頻自動播放，滿足觀看視頻的用戶需求;2.頁面底部中間的“加號”就是拍攝的入口，滿足錄制視頻的需求。
2)好用嗎(體驗(yàn)&反饋)
好用，指的是解決問題是否高效，反饋是否符合用戶預(yù)期。同樣可以幫助用戶解決問題， 肯定效率越高，用戶越愿意用。
還拿抖音舉例，圖1，上下滑動切換視頻(高效)，屏幕右側(cè)是互動相關(guān)功能(方便單手操作)。
圖2，評論頁面，半屏展示而非全屏跳轉(zhuǎn)(更沉浸)，避免打擾用戶觀看視頻。
圖3，當(dāng)你在看別人有趣視頻的場景下，想自己嘗試錄制，點(diǎn)擊圖1(標(biāo)注2)，音樂封面，進(jìn)入圖3，可看更多達(dá)人錄制的同一音頻的視頻，同時點(diǎn)擊底部“使用”可快速進(jìn)入錄制頁面。
整個體驗(yàn)非常流暢、高效。一條龍的滿足你的“看”和“拍”的需求。(不過他們也是參考國外的musical.ly，有興趣的可以下載玩兒一下。)
再比如，instagram 里“關(guān)注”tab下的消息列表(圖1)，如果你想更多了解給你點(diǎn)贊或者關(guān)注你的人的信息，除了點(diǎn)擊頭像進(jìn)入他的個人頁面以外，也可長按列表，隨之彈出用戶的基本信息以及近期照片(圖2)�？梢詼p少盲目跳轉(zhuǎn)頁面的成本，提升用戶操作效率。
3)有趣嗎
當(dāng)一個產(chǎn)品，在滿足了交互框架合理，且易用的情況下，那么在小的交互細(xì)節(jié)給一些有趣的彩蛋，會更吸引用戶。
比如，QQ會員中心里上拉刷新的小企鵝，會隨著你的手勢張嘴閉嘴(我不會告訴你我剛發(fā)現(xiàn)的時候上下上下的拉了好幾分鐘 )。
還有Snapchat里下拉刷新時，上面的小人兒會吐著彩虹飛上去，背景顏色也會隨著變化(截了10幾張圖都沒截到有彩虹的 放棄了 你們自己去看吧- -)。
而且在未來，“有趣”將占一個產(chǎn)品越來越大的比重，之前張小龍也說過：“有趣>功能>交互>界面”。所以，讓用戶用著開心并樂于傳播很重要。
3. 視覺層面
1)合適嗎(風(fēng)格定位)
好的視覺設(shè)計(jì)，不是好不好看，而是符不符合自己的產(chǎn)品定位和目標(biāo)用戶特征的。就像不同職業(yè)、不同性格的人，穿衣風(fēng)格也不同。
(比如，碼農(nóng)在我們印象中是穿格子襯衣，背著雙肩包。但是，如果你看到一個紋著大花臂，扎著小臟辮，牛仔褲掉的露半個屁股的男生在拍代碼的一定會打亂你心中的秩序。)
舉個視覺風(fēng)格定位比較優(yōu)秀的例子，same，它是一款針對95后的，去中心化，興趣社交平臺。有豆瓣，貼吧，微博的一點(diǎn)影子，但是這些影子并沒有影響它成為一個有自己個性的產(chǎn)品。(最后一張圖是我在“證件照拍起來呀呼”頻道里 哈哈哈哈 也是夠了)
整體色調(diào)以藍(lán)、白為主，簡潔輕快;icon也非常有趣味性，像藍(lán)色圓珠筆隨意繪制的感覺，營造輕松的氛圍。
2. 擴(kuò)展性強(qiáng)嗎(品牌DNA)
視覺設(shè)計(jì)不僅局限在界面設(shè)計(jì)，同時也能考慮核心元素在各個環(huán)節(jié)拓展性，給用戶傳遞整體的品牌理念(類似平面設(shè)計(jì)里的VI設(shè)計(jì))。
比如藍(lán)色same小人兒，根據(jù)不同的頻道拓展不同的icon。
引導(dǎo)頁面設(shè)計(jì)風(fēng)格也跟界面ui和icon相呼應(yīng)的，加深用戶對品牌形象的認(rèn)知。
包括它們的運(yùn)營設(shè)計(jì)，也是以主形象“same小人兒”為演變對象，雖然沒有固執(zhí)統(tǒng)一成藍(lán)色線條，但不管運(yùn)用到哪里，一眼就能分辨出這是same的東西。
3)細(xì)節(jié)到位嗎(品質(zhì)感)
細(xì)節(jié)能夠體現(xiàn)一個產(chǎn)品的品質(zhì)感和情懷。因此，在體驗(yàn)一個APP的時候，模塊與模塊的間距、icon的處理、字體的運(yùn)用、按鈕圓角大小的考究，等等… 同樣值得我們?nèi)プ屑?xì)分析和探索的。
下面這個APP叫Noodler，面條控必備。插畫風(fēng)格特別精良貌美，北歐風(fēng)格的面條圖鑒，細(xì)節(jié)處理的非常好。
總的來說，好的設(shè)計(jì)不單單是icon多么精美、界面樣式多么流行、配色多么好看。而是能夠做出符合自己產(chǎn)品氣質(zhì)，且區(qū)別于競品;讓人一下記住，且?guī)椭脩魧ζ放朴姓嬲J(rèn)知的作品。
【初學(xué)UI設(shè)計(jì)有什么方法】相關(guān)文章：
什么是ui設(shè)計(jì)11-13
小升初學(xué)習(xí)預(yù)習(xí)方法04-19
初學(xué)者鋼琴慢練方法09-06
初學(xué)者學(xué)鋼琴大拇指訓(xùn)練方法09-22
什么是方法重載11-15
初學(xué)者練瑜伽需要注意什么12-26
初學(xué)游泳作文11-02
方法重載和方法重寫的區(qū)別是什么11-16
ai ei ui教案03-29