UI設計入門啓示錄

隨著現今數字互聯網技術的發展,UI設計成為近些年互聯網就業非常熱門的專業。但熱門並不代表很多同學都其有所瞭解。通常情況下,國外院校並沒有單獨設立的UI設計專業,都會包括在交互設計裡。

另外,由於UI經常與UX,交互,數媒這些理念混雜在一起,因此要想快速跨入UI設計大門,需要經過以下3步

  • 學習UI的第一步,就是得搞清楚概念;
  • 其次從審美意識和軟件開始技能拔高;
  • 最後需要參考成功案例從中得到啟發。


01

概念明晰


UI代指User Interface Design,中文釋義為用戶界面設計,又稱用戶界面工程。指的是在用戶體驗和交互的指導下對計算機、電器、機器、移動通訊設備、軟件或應用以及網站進行的設計。

其目的是幫助用戶快速獲取信息,高效利用被設計對象完成任務。好的用戶界面設計強調流暢使用,不會讓用戶花不必要的精力去學習適應。能夠根據用戶的習慣,讓用戶能夠最大限度的使用所需功能。

在作品集中,UI主要體現在項目後期模型設計中,只需根據前期設定好的項目屬性進行個性化創作即可。

UX代指User Experience Design,中文釋義為用戶體驗設計。是以用戶為中心的一種設計手段,以用戶需求為目標而進行的設計。設計過程注重以用戶為中心,用戶體驗的概念從開發的最早期就開始進入整個流程,並貫穿始終。

在作品集中,用戶體驗涉及到項目早期的用戶調查、中期的信息建構以及末期的交互設計。在這之中,貫穿用戶體驗設計整個流程的人本精神是目前各類設計開發時都需要考慮的重點。

其目的在於從功能方面滿足用戶的真實需要,每個流程能作為前一步流程的測試反饋,以低廉的成本及時修正可能出現的BUG,從而在產品未分析一下。

於UX有關的專業,往往會和UI也有一定的融合,以後職業發展可以是交互設計師,用戶體驗師,新媒體策展人等。

16屆G同學 交互設計 金斯頓大學


UI設計入門啟示錄


02

入門必備


瞭解清楚UI和UX的概念之後,我們再來看一看與兩者相關的軟件有哪些:

UI設計需要用到各類平面軟件,例如PS、AI、ID等。其設計方式偏平面,利用扁平化的設計對界面進行描述即可,大到界面的整體風格、顏色、版式,小到界面中含有的字體、圖標、圖片等。若需要作品展示,則可把在平面軟件中的最終效果圖放在影視後期軟件中按需求拼接組合即可。

當然一個優秀的UI設計師,除了要讓軟件變得有個性有品位,還要讓軟件的操作變得舒適簡單、自由,充分體現軟件的定位和特點。

UI設計入門啟示錄


所以,與之相應,要求UI設計師掌握的知識面會比較寬,除了掌握平面設計要求的軟件(Photoshop, Illustrator, InDesign)外,還要求掌握Wireframing線框圖創作工具,去向客戶展示他們的設計想法放在現實裡會是什麼樣的。另外,還需熟的HTML和CSS技巧, 和基本的JavaScript知識。

UI設計入門啟示錄


與UI不同,UX一般需要的設計軟件為AXURE、Sketch等,能夠展現界面跳轉關係的交互原型設計軟件。若不需要用戶利用電子設備進行測試,而選擇紙模測試的話,同學們也可用基礎平面軟件進行UX原型設計及調試。


UI設計入門啟示錄

Axure VS Sketch


除了瞭解軟件之外,一個在職場上成功的設計師或者在留學過程中能夠成功申到名校的準留學生,需要具備的素質精煉到一個詞就是:審美。

畢竟技術學習只要肯花時間,在網上海搜教程就可以速成PS的基本用法,但是審美意識是需要大量的書籍閱讀,豐富的生活閱歷去長期累積知識鏈。當然不是說技術不重要,技術同樣也會日積月累中成熟起來,不單單是操作的流暢性,還有對實現效果的聯想性。

說到審美提升,推薦大家去Behance,Issuu,Dribble,Adobe Porfolio官網上分析優秀案例,並且自己也可以提交作品集在網站上,接受批判性建議。

比如,下面這位藝術家作品,就運用了插畫形式表達AR概念,科技感結合UI視覺衝擊給人予最直觀的審美意識。


UI設計入門啟示錄


03

成功優秀學員案例


接下來展示的作品頁會用到一些有用的UI知識。以上文中已提到的G同學的作品集進行分析。在G同學的整本交互設計作品集中充滿著UI元素,這也為他的申請提高了競爭力。

G同學的第一個項目裡,採取了紅藍黑的搭配,遵從了APP主配色不超過三種的原則。LOGO與項目名字Vcball的首字母V形成呼應,當時也參照了黃金分割方法。

16屆G同學 交互設計 金斯頓大學


UI設計入門啟示錄


下面是G同學項目二的一張信息架構圖,與平常看到的完全扁平不同,他給邊框加上陰影,表現是基於地球上的一個旅行APP。黃色主色調給你一種明朗的意識感,視覺優化也會增加用戶使用率,提高滿意度。這些都是一個交互設計師應該考慮到的。

16屆G同學 交互設計 金斯頓大學


UI設計入門啟示錄



G同學的第三個項目是關於音樂與情緒有關的項目。同時發散出三原色在腦海中的配比,可想而知項目的主題色應該為紅綠藍三色,但由於直接將這種顏色作為大塊面積平鋪並不合適,所以G同學利用黑白色去做一個大色塊的鋪陳,紅綠藍為輔助。

(項目三相關作品)

UI設計入門啟示錄


UI設計入門啟示錄


G同學的第四個項目是選擇了VR展覽館作為對科技潮流的認知概念作品。因為VR技術尚不成熟,如果有3D眩暈症的同學,就不適合用。由此G同學通過配色的處理,做了一個藍綠色的VR效果。藍綠色也是公認的舒適色配比,這樣從實用性上增強了VR普及率。

(項目四相關作品)

UI設計入門啟示錄


分享到:


相關文章: