2024-2-1 資深UI設(shè)計(jì)者
進(jìn)入設(shè)計(jì)這個行業(yè)也快一年了，這篇文章其實(shí)也算是寫給自己的一個總結(jié)。也望各位大佬，小弟如果有那些地方說不對，多多包涵，輕噴輕噴。廢話不多說了進(jìn)入正題。
UI設(shè)計(jì)師簡稱UID（User Interface Designer），指從事對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)工作的人。
這個時(shí)候估計(jì)有的朋友回想，這些我都知道啊。百度一下就出來了。那么好的，咱們現(xiàn)在來具體的說一下什么是人機(jī)交互、操作邏輯、界面美觀。
人機(jī)交互，是一門研究系統(tǒng)與用戶之間的交互關(guān)系的學(xué)問。系統(tǒng)可以是各種各樣的機(jī)器，也可以是計(jì)算機(jī)化的系統(tǒng)和軟件。人機(jī)交互界面通常是指用戶可見的部分。用戶通過人機(jī)交互界面與系統(tǒng)交流，并進(jìn)行操作。小如收音機(jī)的播放按鍵，大至飛機(jī)上的儀表板、或是發(fā)電廠的控制室。人機(jī)交互界面的設(shè)計(jì)要包含用戶對系統(tǒng)的理解（即心智模型），那是為了系統(tǒng)的可用性或者用戶友好性。
其實(shí)顧名思義，大家可以理解為用戶在某種特定的需求時(shí)，用何種方式能夠更方便更快捷的得到計(jì)算機(jī)的反饋。好比如有個客人來到某家酒店，而酒店有兩扇門，一扇門是不同的玻璃門另一扇則是自動門。說道這里我想大家多少都應(yīng)該理解了。同樣的兩扇門，自動門只需要客人走到指定的范圍能就可自由通過，而另一扇則需要客人走到門前后抬手去退才可打開。雖然僅僅是多了抬手這一部，但是前者對用戶更友好和方便。
例：
上面是我個人比較喜歡的一個游戲下載APP，其中用戶可以通過左右滑動手機(jī)即可快速的完成各個板塊之間的滑動切換，無需用戶在用手指去點(diǎn)擊下方的圖標(biāo)。
我記得在我第一次接觸智能手機(jī)的時(shí)候，絕大部分的APP都是需要用戶去點(diǎn)擊指定的圖標(biāo)才可完成板塊的切換。相對那時(shí)手機(jī)的屏幕相對較小，所以操作起來還算方便。但現(xiàn)今流行的各種大屏手機(jī)，絕大多數(shù)情況下用戶無法用一個手去完成想要的操作。那么這個時(shí)候身為設(shè)計(jì)師的咱們就想怎么去解決這個問題。而上面就是一個很好的例子。
說這么多其實(shí)我個人總結(jié)成一句話：“人機(jī)交互就是，如何讓用戶在任何情況和場合下，能夠更好更快更方便的，完成指定的操作與得到想要的結(jié)果。”
現(xiàn)在大家理解了人機(jī)交互，咱們再來說一下“操作邏輯”
操作邏輯可能對大部分新入的設(shè)計(jì)師來說可能很難理解。畢竟大家是學(xué)文科的居多，還有很多是從其他設(shè)計(jì)領(lǐng)域轉(zhuǎn)入U(xiǎn)I這個行業(yè)的。所以平時(shí)大家可能更重視版式啦、配色啦、字設(shè)啦、品牌啦等平面上的知識。所以操作邏輯這個更偏向理科生的東西大家平時(shí)接觸相對較少。不過沒事，其實(shí)操作邏輯這個大家平時(shí)多看多想多思考也不是很難理解。
上面這張圖我想大家應(yīng)該都見過，有人管它叫交互圖，有人管它叫原型圖，甚至有人管他叫交互原型圖。管他叫啥反正大家記住這就是頁面直接的操作邏輯。
咱們來舉一個簡單的例子：把大象裝進(jìn)冰箱需要幾部？（呵呵估計(jì)會有朋友噴我了……）
雖然這個例子很那個什么啊……你們懂得。但是這就是一個簡單的操作邏輯。打開冰箱門，把大象放進(jìn)去，關(guān)上冰箱門。
現(xiàn)在估計(jì)會有朋友想原來這就是操作邏輯，太簡單了。確實(shí)這只是一個小小例子，如果換做一個電商平臺的購物邏輯呢？用戶怎么購買，加入購物車后怎么結(jié)算，結(jié)算時(shí)需要用戶跳轉(zhuǎn)到那幾個相應(yīng)的界面。用一種確認(rèn)方式好，還是重復(fù)確認(rèn)好。甚至到一個驗(yàn)證碼的邏輯，是需要用戶短信驗(yàn)證就行，還是需要用戶短信郵箱同時(shí)驗(yàn)證的方式？那么這就涉及到各個頁面之間的操作邏輯。
而這個時(shí)候咱們就要考慮到，如何用更少的步驟去讓用戶完成這項(xiàng)任務(wù)。但是與此同時(shí)咱們還需要考慮到用戶的安全性與可靠性。（總不能隨便知道了密碼輸入了后就付款了地址電話啥也不填吧）
而且操作邏輯還不僅僅是頁面之間的關(guān)系，也涉及到用戶點(diǎn)擊了這個按鈕那么他會跳轉(zhuǎn)到那個頁面進(jìn)行下一步的操作，又或者用戶側(cè)滑了一下頁面會轉(zhuǎn)換到那個板塊。而這個時(shí)候就要集合到咱們之前提到的人機(jī)交互了。用戶用什么手勢來完成這步的操作，是左右滑動還是上下滑動，還是點(diǎn)擊。
所以呢操作邏輯與人機(jī)交互是相互結(jié)合的，但是呢人機(jī)交互是建立在操作邏輯之上的，首先咱們必須要梳理清楚頁面直接的關(guān)系，才能去具體的考慮讓用戶用何種方式去操作。在沒有操作邏輯之前，各位所想的任何人機(jī)交互都是無用功。
所以大家一定要切記先梳理操作邏輯，在開始其他設(shè)計(jì)。
好啦現(xiàn)在是大家熟悉的界面美觀這塊。我想這么不用我多說大家也了解。很明了就是讓用戶看著好看舒服想用。
其實(shí)呢相對也不是那么簡單。大家平時(shí)看的平面作品還是居多，但是在UI的界面美觀這里，不僅僅是一個放在那里不動的界面。它還會涉及到交互方式的動態(tài)效果。也就是人機(jī)交互。有人朋友可能就像，剛剛我不是說了人機(jī)交互就是用戶怎么操作完成相對的頁面跳轉(zhuǎn)等。
其實(shí)呢，人機(jī)交互也是需要設(shè)計(jì)美觀度的，比如下圖的按鈕。
這是一組收藏按鈕，這里它就涉及到首先是操作邏輯和人機(jī)交互，用戶點(diǎn)擊這個按鈕內(nèi)容被收藏到收藏夾。那么這個時(shí)候就來了，既然用戶收藏了這個內(nèi)容，也就表示無需再次收藏。那么這個時(shí)候這個按鈕就會變成，用戶再次點(diǎn)擊則取消收藏。
可能在大部分用戶眼里這是一個按鈕，其實(shí)大家可以理解為這是2個不同的按鈕。但是形狀相同。那么這個時(shí)候咱們就想，怎么才能讓在按鈕不改變基礎(chǔ)形狀的時(shí)候，能夠使用戶更好的理解這2個按鈕是不同的功能。所以咱們就把一個按鈕做成無填充，另一個則是由填充的。
而這組圖片則是用戶頂部下拉時(shí)刷新的效果，如果下拉后提示也沒有，那么用戶很有可能就不清楚這個下拉功能到底是干什么的。如果咱們加一個簡單的文字或者圖標(biāo)，想用戶提示用戶絕大多是情況下都會清楚“哦這是下拉刷新加載最新信息。”
通過上面的2個例子，大家也大致清楚了。UI的界面美觀，不僅僅是一個靜態(tài)的美觀，而靜態(tài)和動態(tài)相互結(jié)合的界面。但是呢對于大部分UI新人來說還是需要先做好靜態(tài)的頁面，再去考慮動態(tài)的效果這樣才能錦上添花。
說了這么多我想大家也清楚什么是UI設(shè)計(jì)師了。那么咱們來說說UI設(shè)計(jì)都分為哪幾類。
前面也提到了UI設(shè)計(jì)是人機(jī)交互設(shè)計(jì)、操作邏輯設(shè)計(jì)、界面美觀設(shè)計(jì)。相對來說這個很籠統(tǒng)。大家平時(shí)用的PS AI也包括這三項(xiàng)，而咱們平時(shí)用的APP，看的網(wǎng)頁也包括這三種。
那么UI設(shè)計(jì)到底分為幾類？我個人認(rèn)為分為4類，移動應(yīng)用設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、游戲界面設(shè)計(jì)、軟件界面設(shè)計(jì)。
沒錯，可能有的朋友會想為什么網(wǎng)頁、游戲、軟件也算在里面？下面咱們一個個來說。
通過名稱大家應(yīng)該就知道，其實(shí)就是咱們平時(shí)用的APP、應(yīng)用主題（各類圖標(biāo)）、甚至還有第三方桌面等。這都屬于移動應(yīng)用設(shè)計(jì)，而現(xiàn)在大部分物聯(lián)網(wǎng)公司，都是以APP開發(fā)為主。所以現(xiàn)在移動應(yīng)用設(shè)計(jì)還是趨向APP設(shè)計(jì)。不過你要是在一個甲方公司那么很有可能會設(shè)計(jì)到應(yīng)用主題和其他類型的設(shè)計(jì)。但是終歸脫離不了移動設(shè)備比如手機(jī)，平板電腦，甚至現(xiàn)在大部分電視也是使用的移動應(yīng)用軟件。
網(wǎng)頁設(shè)計(jì)雖然主要應(yīng)用是PC端，但是不要忘記它也是智能終端，雖然國家統(tǒng)計(jì)更多的人再用手機(jī)上網(wǎng)。但是不要忘記了，真正到了辦公的時(shí)候又有多少人用手機(jī)辦公。而在辦公時(shí)又有多少人用手機(jī)查閱資料。與此同時(shí)網(wǎng)頁設(shè)計(jì)，也涉及到了UI設(shè)計(jì)的三大設(shè)計(jì)人機(jī)交互、操作流程、界面美觀。所以他們都是同屬于UI設(shè)計(jì)的范疇。而隨著科技的飛速發(fā)展，產(chǎn)品的推廣方式更原化，很多移動應(yīng)用也有自己的PC終端。與此同時(shí)，很多PC網(wǎng)頁也在適應(yīng)時(shí)代的潮流盡量自適應(yīng)移動終端的標(biāo)準(zhǔn)。使用戶能有更好的體驗(yàn)。
游戲設(shè)計(jì)，很多朋友會說。網(wǎng)頁和APP這2個現(xiàn)在確實(shí)可以理解了，那么為什么游戲也算在UI設(shè)計(jì)里呢？
首先大家要知道，游戲在沒有界面之前就是一堆數(shù)字，給你一堆數(shù)字你會玩嗎？就會你會玩，你知道怎么玩嗎？這個時(shí)候就需要咱們UI設(shè)計(jì)師來根據(jù)產(chǎn)品需求為這堆看著就頭疼的數(shù)字化個妝。這樣才能吸引更多的玩家來玩，而這個過程就是UI設(shè)計(jì)。
如果大家理解了游戲設(shè)計(jì)，那么軟件設(shè)計(jì)這里就很好說了。顧名思義其實(shí)和游戲設(shè)計(jì)一樣。只不過一個是靠娛樂運(yùn)營，一個是靠辦公應(yīng)用，家庭應(yīng)用等方便大家來運(yùn)營。很簡單的例子：咱們用的PS也都是靠一堆數(shù)字代碼搭建出來的，而如果想讓用戶理解怎么使用它那么就需要一個界面在做這個橋梁。所以我個人認(rèn)為軟件設(shè)計(jì)也在UI設(shè)計(jì)的范疇內(nèi)。
通過前面的了解，大家對UI的定位應(yīng)該有了最基本的了解了。但是呢，估計(jì)又得朋友回想，這不是都包括UE和PM的工作內(nèi)容了嗎？沒錯因?yàn)閁I、UE、PM這3個崗位是互相串聯(lián)的，相輔相成的。
所以呢既然大家要想成為一個出色的UI設(shè)計(jì)師。不光要界面做的美觀好看。也要了解其他兩個方面的知識內(nèi)容再次基礎(chǔ)上繼續(xù)細(xì)化咱們的界面和產(chǎn)品，從而達(dá)到使產(chǎn)品能夠提升到一個更高的層面。
而且，我通過各大國外設(shè)計(jì)論壇了解到，國際趨勢也是漸漸地吧UE和PM的工作融合到UI的范疇內(nèi)。我個人的觀點(diǎn)是，這樣做有助于產(chǎn)品思路的一致性，我想大家都體驗(yàn)過背后站一堆甲方爸爸的感受。畢竟參與的人越多，產(chǎn)品的設(shè)計(jì)思路越有可能被打亂。從而造成，項(xiàng)目開始時(shí)設(shè)定的是圓形，最后結(jié)束的時(shí)候可能變成六邊形。這樣就偏離的設(shè)計(jì)初心，造成不倫不類的情況。
說了這么多大家應(yīng)該也了解了UI設(shè)計(jì)。我個人總結(jié)UI設(shè)計(jì)呢就是。我們是產(chǎn)品和用戶之間的橋梁。站在產(chǎn)品的角度去理解，坐在用戶的身邊去體驗(yàn)，跟在技術(shù)的領(lǐng)域去思考。
設(shè)計(jì)這個行業(yè)是一個學(xué)無止境的行業(yè)，只有大家保持著一顆熱愛而虔誠的心，才有可能走得更遠(yuǎn)更高。
最后，希望這篇文章能夠幫助到，想進(jìn)入U(xiǎn)I或者已經(jīng)進(jìn)入U(xiǎn)I行業(yè)的朋友們。本人僅是一個29歲才入行的咸魚，也望各位大佬大神手下留情，如有錯誤也望多多指點(diǎn)。
藍(lán)藍(lán)設(shè)計(jì)(m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司
銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)
軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.sillybuy.com