想快速進階?先學會有理有據(jù)分析UI界面
長期以來一直會有同學在有展示反面案例的公開課或分享中問:這些案例差在哪兒,能不能具體分析?
對于初級階段的設計師來說,區(qū)分設計的優(yōu)劣確實是很重要的一件事,是一種專業(yè)素養(yǎng)的表現(xiàn)。但盯著做的不好的案例得勁薅,希望通過他們來進步的做法是低效的、徒勞的。
所以今天我們分享的,就是如何學會辨識設計的優(yōu)劣,以及從中積累專業(yè)有效的經(jīng)驗。
一、界面的問題分析能力
首先做 UI 我們肯定需要具備一定的界面分析能力,能對界面的好壞形成客觀和主觀的不同理解。
主觀分析任何人都可以做到,因為看到任何設計都會形成自己的個人感受,只要把這些感受總結出來就行。而專業(yè)的設計師懂得如何在主觀基礎上,進一步用專業(yè)的思路去分析它,形成相對客觀的結論。
不是說主觀觀點就沒用,而是作為專業(yè)人士看到設計作品時不能只會情緒輸出,還必須掌握專業(yè)的分析和辨識能力。
這種分析能力包含下面三個緯度:
- 審美的基本辨識
- 專業(yè)的認知分析
- 經(jīng)驗的積累反思
1. 審美的基本辨識
審美能力是任何設計師貫穿整個職業(yè)生涯都再打磨和鍛煉的軟技能,我們在過去做過很多分享。
其中我們提到,審美可以用專業(yè)的技巧去審,但這有門檻也需要時間學習,這個過程太長,也不適用于前期的入門學習階段。
這個階段我們主要做的就是對設計能有個基本的辨識,哪些是專業(yè)的,哪些是業(yè)余的……或者說,哪些是好看的,哪些是丑陋的。
這種模糊的劃分不需要應用到非常專業(yè)的知識,因為業(yè)余的設計 —— 沒有去“審”的必要。
我們要做的是從成片的設計中篩選出優(yōu)秀的設計,從這些設計中進行找到靈感和收獲,而業(yè)余的設計不會帶給我們?nèi)魏握虻氖找妗?/p>
對它們進行歸類非常容易,就是 —— 對比。通過查看、對比不同的案例,來形成對優(yōu)劣之間的判斷。比如下面站酷隨便找的反面案例,很多同學一看可能感覺不出來有什么問題,差在哪兒。
但是,只要你多去找一些同類的界面,能讓你給出做的還不錯評價的放一起對比,就會發(fā)現(xiàn)高下立判。
只要看得多,對比做的多,很快就能建立出對業(yè)余和專業(yè)的認識標準、尺度,很多作品雖然你不一定能說出它哪里差,但一看就知道它的設計不行,可以直接被略過。
這個劃分過程是模糊、籠統(tǒng)的,但沒關系,因為足夠差的設計不值得我們?nèi)リP注,尤其是很多一無是處的設計,想要分析它哪里不行都會語塞,因為看哪里哪里設計不行。這也是很多直播課程中要我分析反面案例我很難下嘴的原因,因為要分析問題等于把整個界面的設計重講一遍。
只有達到及格線以上的專業(yè)設計有值得我們分析的必要,而我們第一步要做的就是具備篩選出這些設計的能力,節(jié)省我們自己的時間加快學習的效率。
2.專業(yè)認知分析
第二點就是專業(yè)認知分析,這個就是用 UI 相關的設計規(guī)范、規(guī)則、理論去分析界面。
設計規(guī)范通常指系統(tǒng)級的規(guī)范,比如標準系統(tǒng)組件應用的方式,字體參數(shù)的設置數(shù)值都有標準,設計師在引用過程中不能跳出原來的標準。
設計規(guī)則則是 UI 設計領域中形成的一些技法、實踐行為,比如文字、圖標排版中,是以占位背景的矩形邊緣為標準,而不是以圖形輪廓的邊緣為標準。
設計理論就是和界面設計相關的專業(yè)理論知識了,除了平面四要素、格式塔、配色這些視覺理論外,還包括體驗和交互的相關理論。
掌握這些專業(yè)知識,知道它們具體應用和落地的方法,才可以在界面分析中進行應用,找出存在錯誤的地方。所以理論知識掌握的越多,判斷的標準和依據(jù)也就越多。
3. 經(jīng)驗的積累反思
理論雖然必要,但設計的世界里不是非黑即白的,在具體的場景中有很多規(guī)則是需要用來打破的。
比如使用 4 的倍數(shù),在很多布局細節(jié)中是無法貫徹的,那么就要果斷的使用奇數(shù)或質(zhì)數(shù)。小數(shù)點也不是一定不能使用的,圖標的描邊就可以使用小數(shù)來切換不同的粗細等等。
比如之前餓了么頭部標題沒有和下方元素左對齊,不是不符合對齊原則,而是為了解決視覺差的問題。
除了設計細節(jié)外,更上層的還包括控件、組件應用的合理性,涉及到體驗、交互和對業(yè)務本身的理解。這就需要通過自己的長期的積累和總結來認識了。
以上幾點可以知道,系統(tǒng)的評價是包含多個緯度的,也是有門檻的。而這種能力不僅可以評判別人的設計,也可以用來自查,是推動我們進步的動力之一。
想要獲得評價、分析頁面的專業(yè)能力,就不要把目光聚焦在差異、業(yè)余的設計作品上。而是要建立更高的標準,并通過持續(xù)學習和掌握優(yōu)秀、正確的設計思路。
二、分析頁面能力的作用
分析頁面是通過建立正確的標準來找出不符合標準的地方,如果沒有這個標準就僅僅是挑刺和“抬杠”…
這個問題會頻發(fā)在新手和初級設計師的環(huán)境中,比如之前我們有做不少改版的案例,有一個是關于學員電商首頁視覺改版的案例,下面有幾條評論是這樣的:
看到這種評論我肯定是黑人問號表情……
在一個面向視覺的優(yōu)化,沒有業(yè)務、產(chǎn)品、增長需求干擾的場景里,那么目光就要聚焦在視覺上,才能找到真正有用的缺點。而不是在一個最基礎的界面改版中,明明界面本身的問題還沒提出來,卻開始談論一大堆更宏觀的問題。
就像我們覺得要提升自己的工作效率,但不找出影響工作效率的具體問題,只在那思考祖先猿猴時期的生物習性和基因遺傳下的缺陷……
這種能力之所以重要,是因為在正式項目中,是一定要展開頁面分析的。尤其是在面對項目升級、改版,競品的分析中,都要通過頁面分析來總結問題,并為后續(xù)的設計提供依據(jù)。
任何設計的優(yōu)化都可以總結成下面的流程模型:
而找出問題這個過程本來就有很強的專業(yè)性和針對性,你找出的問題可以是視覺的,也可以是體驗、交互、產(chǎn)品、業(yè)務、市場、運營、技術的,如果一開始我們沒有圈出一個明確的范圍,那么最終整理結論的時候就缺乏重點,也無法對后續(xù)的實踐做出真正的引導。
界面分析是設計分析中最簡單也最基礎的部分,學習和掌握這部分能力,就是學會從想要的角度切入對產(chǎn)品進行分析。清晰的把視覺設計問題剝離出來,我們才可以更好的歸納體驗和交互的問題,并為今后業(yè)務、產(chǎn)品的問題分析做好準備。
比如產(chǎn)品體驗五要素中,就是分層分緯度來分析產(chǎn)品,其中視覺層是最底層也最基礎的部分。
能把視覺和其它問題分清楚,就不會別人談視覺你談業(yè)務,別人談業(yè)務你說交互,別人說體驗你談設計,不僅你的設計評審過不了,在設計會議中爭吵很多時候也是主題越跑越偏。
想要提升這部分能力,首先要具備一定的設計基礎,對如何設計有了一定的標準,再去臨摹或分析線上的設計,從中判斷哪些細節(jié)和你的標準有出入。分析背后的原因,是他們不對還是你不對,或者項目還有其它的考量導致。
比如這期學員現(xiàn)在做作業(yè)中會提出的一部分問題,就是開始關注細節(jié)并思考和認知不同的原因,這是進步最快的做法。
如果這個環(huán)節(jié)都做不到,就不要快進到戰(zhàn)略、產(chǎn)品、運營層面的分析,這只會助長我們高談闊論的氣焰,且越發(fā)的輕視和忽略細節(jié)。
放其它崗位上,就是天天和你談公司戰(zhàn)略管理但是做不好自己本職工作,且發(fā)現(xiàn)不了自己工作哪里做得不好的同事。
在整個產(chǎn)品領域中,設計的細節(jié)可以不重要,但在設計的崗位里:
見微知著……
結尾
UI 設計的分析能力,就是先從界面開始,而分析界面從學習理論和設計思路中積累。如果只圍繞界面視覺本身的分析都沒辦法給出結論,或者故左右而言他……
就不只是鍛煉自己純杠的能力,而是展示自己不專業(yè)的事實!
作者:超人的電話亭
想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術