一、UI設(shè)計的概念

軟件設(shè)計可分為兩個部分：編碼設(shè)計與UI設(shè)計。UI的本意是用戶界面，是英文User和 Interface的縮寫。從字面上看是用戶與界面2個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。

UI設(shè)計分為實體UI和虛擬UI，互聯(lián)網(wǎng)說的UI設(shè)計是虛擬UI，一般是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。

二、UI設(shè)計師

“UI”的本義是用戶界面，是英文User和interface的縮寫。UI設(shè)計師簡稱UID（User Interface Designer），指從事對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計工作的人。

UI設(shè)計師的涉及范圍包括商用平面設(shè)計、高級網(wǎng)頁設(shè)計、移動應用界面設(shè)計及部分包裝設(shè)計

工作內(nèi)容

編輯負責軟件界面的美術(shù)設(shè)計、創(chuàng)意工作和制作工作；根據(jù)各種相關(guān)軟件的用戶群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計；對頁面進行優(yōu)化，使用戶操作更趨于人性化；維護現(xiàn)有的應用產(chǎn)品；收集和分析用戶對于GUI的需求。

工作經(jīng)驗

主要要求從業(yè)人員精通Photoshop、Illustrator、Flash等圖形軟件，

1. 負責公司產(chǎn)品在智能電視、PC端、移動端頁面/應用的整體設(shè)計；

2. 基于用戶體驗、人機交互、圖形化設(shè)計、界面設(shè)計等前沿理論實現(xiàn)產(chǎn)品風格設(shè)計；

3. 充分理解產(chǎn)品策劃思路及理念，配合產(chǎn)品經(jīng)理和研發(fā)人員實現(xiàn)產(chǎn)品各種界面的視覺設(shè)計；

4. 建立和完善產(chǎn)品界面視覺設(shè)計規(guī)范；

5. 根據(jù)交互設(shè)計及產(chǎn)品規(guī)劃，完成產(chǎn)品（iPhone、Android 、Web平臺App及網(wǎng)站）相關(guān)的用戶界面視覺設(shè)計。

6. 配合產(chǎn)品開發(fā)中的圖形界面（GUI）設(shè)計。

7. 完成產(chǎn)品相關(guān)推廣活動的專題頁面、FLASH的設(shè)計及制作。

8. 與研發(fā)團隊充分溝通協(xié)作，確認可控的誤差范圍和視覺效果的最終實現(xiàn)；

9. 根據(jù)視覺設(shè)計的發(fā)展趨勢及用戶研究的結(jié)果不斷優(yōu)化產(chǎn)品的圖形界面（GUI）

UI初學者需具備的知識架構(gòu)

1、視覺設(shè)計部分：

首先，視覺設(shè)計不僅僅是做ICON，做界面或者界面元素。

很多人認為，如果去互聯(lián)網(wǎng)公司做視覺方向ui設(shè)計，只會簡單做圖標、界面就OK。這是極其幼稚的想法。

一般公司如果花錢雇專職視覺設(shè)計師的話，那么整個公司的美術(shù)設(shè)計工作一般都會給視覺設(shè)計做。這就要求你幾乎精通平面設(shè)計師所會的所有知識。

所以，如果你想今后在視覺領(lǐng)域混，那么以下幾項技能必不可少：

1）平面構(gòu)成；

2）色彩構(gòu)成；

3）版式設(shè)計；

4）心理學；

5）美術(shù)繪畫；

6）設(shè)計意識；

2、交互設(shè)計師應該具備的基本能力：

1）了解用戶體驗設(shè)計、可用性原則；

2）信息挖掘、用戶調(diào)研、數(shù)據(jù)分析；

3）良好的邏輯能力；

4）心理學；

5）交互設(shè)計原則、不同平臺的規(guī)范；

6）產(chǎn)品視覺感；

7）溝通能力。

三、項目開發(fā)流程

圖中也展現(xiàn)了UI設(shè)計師在項目開發(fā)過程中的工作內(nèi)容

四、.UI學習/設(shè)計步驟

規(guī)范基礎(chǔ)-軟件基礎(chǔ)-圖標設(shè)計-界面設(shè)計-切圖交互-用戶產(chǎn)品

跟著步驟一步步的走。

1.自學UI平臺：UI設(shè)計者 – 一個免費自學UI設(shè)計APP

2、UI設(shè)計的規(guī)范

【一致性原則】

堅持以用戶體驗為中心設(shè)計原則，界面直觀、簡潔，操作方便快捷，用戶接觸軟件后對界面上對應的功能一目了然、不需要太多培訓就可以方便使用本應用系統(tǒng)。

• 字體 -保持字體及顏色一致，避免一套主題出現(xiàn)多個字體； -不可修改的字段，統(tǒng)一用灰色文字顯示。
• 對齊 -保持頁面內(nèi)元素對齊方式的一致，如無特殊情況應避免同一頁面出現(xiàn)多種數(shù)據(jù)對齊方式。
• 表單錄入 -在包含必須與選填的頁面中，必須在必填項旁邊給出醒目標識（*）； -各類型數(shù)據(jù)輸入需限制文本類型，并做格式校驗如電話號碼輸入只允許輸入數(shù)字、郵箱地址需要包含“@”等，在用戶輸入有誤時給出明確提示。鼠標手勢 -可點擊的按鈕、鏈接需要切換鼠標手勢至手型；保持功能及內(nèi)容描述一致 -避免同一功能描述使用多個詞匯，如編輯和修改，新增和增加，刪除和清除混用等。
• 建議在項目開發(fā)階段建立一個產(chǎn)品詞典，包括產(chǎn)品中常用術(shù)語及描述，設(shè)計或開發(fā)人員嚴格按照產(chǎn)品詞典中的術(shù)語詞匯來展示文字信息。

【準確性原則】

使用一致的標記、標準縮寫和顏色，顯示信息的含義應該非常明確，用戶不必再參考其它信息源。

• 顯示有意義的出錯信息，而不是單純的程序錯誤代碼。避免使用文本輸入框來放置不可編輯的文字內(nèi)容，不要將文本輸入框當成標簽使用。使用縮進和文本來輔助理解。使用用戶語言詞匯，而不是單純的專業(yè)計算機術(shù)語。高效地使用顯示器的顯示空間，但要避免空間過于擁擠。保持語言的一致性，如“確定”對應“取消”,“是”對應“否”。

【可讀性原則】

• 文字長度

文字的長度，特別是在大塊空白的設(shè)計中很重要，太長會導致眼睛疲憊，閱讀困難。太短又經(jīng)常會造成尷尬的斷裂效果，斷字的使用也會造成大量的復合詞，這些斷裂嚴重的影響了閱讀的流暢性。

• 空間和對比度

每個字符同線路長度，間距也是重要的。所以每個字符之間的空間至少等于字符的尺寸，大多數(shù)數(shù)字設(shè)計人員習慣選擇一個最小的文字大小的150%為空間距離，這就可以留下足夠的空間。當每一行中讀取大段的文字，且線路長度過多或線之間的空間太少，都會造成理解困難。

• 對其方式

無論是在文本中心，還是偏左，或者是沿著一個文件的右側(cè)對齊，文本的對齊相當重要，可以極大地影響可讀性。一般而言，文本習慣向左對齊，因為它反映了你的閱讀方式 – 從左至右。你熟悉每一行開始和結(jié)束的地方。

 【布局合理化原則】

在進行UI設(shè)計時需要充分考慮布局的合理化問題，遵循用戶從上而下，自左向右瀏覽、操作習慣，避免常用業(yè)務功能按鍵排列過于分散，以造成用戶鼠標移動距離過長的弊端。多做“減法”運算，將不常用的功能區(qū)塊隱藏，以保持界面的簡潔，使用戶專注于主要業(yè)務操作流程，有利于提高軟件的易用性及可用性。

菜單 -保持菜單簡潔性及分類的準確性，避免菜單深度超過3層。 -菜單中功能是需要打開一個新頁面來完成的，需要在菜單名字后面加上“…”?！局贿m用于C/S架構(gòu)，B/S請無視】。
按鈕 確認操作按鈕放置左邊，取消或關(guān)閉按鈕放置于右邊。
功能 -未完成功能必須隱藏處理，不要置于頁面內(nèi)容中，以免引起誤會。
排版 -所有文字內(nèi)容排版避免貼邊顯示（頁面邊緣），盡量保持10-20像素的間距并在垂直方向上居中對齊；各控件元素間也保持至少10像素以上的間距，并確保控件元素不緊貼于頁面邊沿。
表格數(shù)據(jù)列表 -字符型數(shù)據(jù)保持左對齊，數(shù)值型右對齊（方便閱讀對比），并根據(jù)字段要求，統(tǒng)一顯示小數(shù)位位數(shù)。滾動條 -頁面布局設(shè)計時應避免出現(xiàn)橫向滾動條。頁面導航（面包屑導航） -在頁面顯眼位置應該出現(xiàn)面包屑導航欄，讓用戶知道當前所在頁面的位置，并明確導航結(jié)構(gòu)，如：首頁>新聞中心>歐科智能招商服務平臺正式發(fā)布，其中帶下劃線部分為可點擊鏈接。
信息提示窗口 -信息提示窗口應位于當前頁面的居中位置，并適當弱化背景層以減少信息干擾，讓用戶把注意力集中在當前的信息提示窗口。一般做法是在信息提示窗口的背面加一個半透明顏色填充的遮罩層。

【軟件基礎(chǔ)】

PS、AI、Skech、mockingbot、mockplus、chainco、cutman、Axure等等

制作原型，界面，圖標制作，素材制作，切圖等等相關(guān)步驟的軟件都需學會。

當了解的越多會發(fā)現(xiàn)，有更多新型提高效率好用的軟件，例如pixate、xmind、AE......以及更多mac上面的國外app制作軟件。

3.圖標設(shè)計

當然，也有圖標素材。

Iconfont-阿里巴巴矢量圖標庫中國最大的圖標素材庫，還可以制作iconfont

素材網(wǎng)站（底部有鏈接）：

4.界面設(shè)計

欣賞臨摹優(yōu)秀作品

5.切圖交互

Cutterman - 最好用的切圖工具（ps插件，親測好使）

6.用戶產(chǎn)品

這個就不多說了，進入公司跟著項目走一遍就知道了。

最重要的是跟大家分享一些素材網(wǎng)站：大家可以根據(jù)關(guān)鍵詞搜索

1.綜合類UI素材下載平臺

·網(wǎng)頁UI免費下載_網(wǎng)頁UI素材免費下載--千圖網(wǎng)www.58pic.com

·ui圖片素材_ui設(shè)計模板大全【免費下載】_90設(shè)計網(wǎng)

·優(yōu)秀網(wǎng)頁設(shè)計聯(lián)盟-SDC-網(wǎng)頁設(shè)計師交流平臺-聽講座，聊設(shè)計，找素材，盡在優(yōu)設(shè)網(wǎng)

·黃蜂網(wǎng)-設(shè)計優(yōu)選 - 黃蜂網(wǎng)woofeng.cn·

25學堂-專注APPUI界面設(shè)計,分享移動互聯(lián)網(wǎng)優(yōu)秀產(chǎn)品

·方酷 - UI設(shè)計|APPUI|手機UI設(shè)計分享平臺

·UI設(shè)計網(wǎng)uisheji.com-專業(yè)的ui設(shè)計APP界面設(shè)計學習分享交流平臺 -

·UI設(shè)計者 - 一個免費自學UI設(shè)計APP

·素材中國_免費素材共享平臺www.sccnn.com

·PS飯團網(wǎng) psefan.com - 不一樣的素材庫！精選設(shè)計師高逼格素材下載

·PS教程,Photoshop教程網(wǎng) - 思緣教程網(wǎng)

·標志集合圖片_標志集合設(shè)計素材

·平面設(shè)計網(wǎng)_平面設(shè)計作品欣賞-中國設(shè)計網(wǎng)

·我圖網(wǎng),提供圖片素材及模板下載,專注正版設(shè)計作品交易·

·中國站長網(wǎng)_與站長攜手走向成功_cnzz.cn_站長網(wǎng)

2.UI領(lǐng)域素材下載

·AUI-靠譜的移動前端框架

·優(yōu)閣網(wǎng)(UIGREAT) - UI設(shè)計師學習交流社區(qū) - Powered By EduSoho

·UE設(shè)計平臺-網(wǎng)頁設(shè)計，設(shè)計交流，界面設(shè)計，酷站欣賞

·云瑞設(shè)計－ui設(shè)計與體驗博客

·網(wǎng)站UI設(shè)計說明范本（設(shè)計風格指南） - 學UI網(wǎng)

·UI設(shè)計/UI界面設(shè)計/交互設(shè)計 - 作品欣賞 - 設(shè)計帝國

·UI中國

·xiaopiu-在線APP原型設(shè)計

·AE制作圓球讀取動畫 FeatMax from TinyHouse

·UI動效_UI動畫_AE做ui動效-Uimaker-專注于UI設(shè)計

3.UI原型素材下載

·原型庫 - AxureRP高保真原型案例實戰(zhàn)，原型設(shè)計，可以如此簡單!

·axure原型素材 - Axure原創(chuàng)教程網(wǎng)

·教育學習網(wǎng)站常用圖標矢量素材下載-非凡圖庫

·html5模板,html5網(wǎng)頁模板,html5網(wǎng)站模板免費下載_模板王

4.icon（圖標素材下載）

· Iconfont-阿里巴巴矢量圖標庫

· icon圖標庫-icon圖標庫|矢量圖標庫-千圖網(wǎng)www.58pic.com

·IconPng.com 愛看圖標網(wǎng)，免費中文圖標搜索引擎！

· 千圖網(wǎng)-免費圖標下載，圖標搜索引擎ICON(PNG/ICO/ICNS)圖標下載

·圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀UI設(shè)計師互動平臺

· http://xiaba.shijue.me/search

·搜索結(jié)果 icon : PS筆刷吧-筆刷免費下載

·icon下載 - 學UI網(wǎng)

·下載資源搜索_CHINAUI優(yōu)艾網(wǎng)

·icon - 搜索結(jié)果 - 25學堂

·UI設(shè)計師靈感庫-優(yōu)界網(wǎng)

·icon圖片_專題_素材中國

· iOS8 App圖標模板尺寸規(guī)范[4.0]最新出爐

·PrestaShop 官方圖標包開源 含svg、eps和圖標字體格式

·一淘無線圖標庫 - 公開圖標庫 - Iconfont

5.UI設(shè)計導航平臺

1.設(shè)計導航 - 精選最好的設(shè)計網(wǎng)站大全

2.SDC設(shè)計師網(wǎng)址導航

3.牛大拿_最貼心的設(shè)計師導航_Niudana.com

4.輕設(shè)計 - 飛屋設(shè)計

5.UI設(shè)計師導航網(wǎng)

6.1納米學習網(wǎng)站導航

7.快搜 — 搜索快人一步

8.設(shè)計之家 - 傳播先進設(shè)計理念 推動原創(chuàng)設(shè)計發(fā)展

9.設(shè)計師導航-圖翼網(wǎng)(TUYIYI.COM)

6. UI專屬論壇社區(qū)

·UI中國

· UCD大社區(qū) - 以用戶為中心的設(shè)計

· Show and tell for designers

· UI設(shè)計者 - 一個免費自學UI設(shè)計APP

·掘金

· 優(yōu)閣網(wǎng)(UIGREAT) - UI設(shè)計師學習交流社區(qū)

·http://app.xueui.cn/ http://www.appui.mobi/

·設(shè)計經(jīng)驗技巧知識分享 - 黃蜂網(wǎng)woofeng.cn

·25學堂-專注APPUI界面設(shè)計,分享移動互聯(lián)網(wǎng)優(yōu)秀產(chǎn)品

· http://www.fondcool.com/

·設(shè)計心得-UI設(shè)計網(wǎng)uisheji.com - 設(shè)計理念-

·圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀UI設(shè)計師互動平臺

· MobileUI莫貝網(wǎng) - 移動設(shè)備界面設(shè)計專業(yè)網(wǎng)站.

·云瑞設(shè)計－ui設(shè)計與體驗博客

· UE設(shè)計平臺-網(wǎng)頁設(shè)計，設(shè)計交流，界面設(shè)計，酷站欣賞

·AUI - 高性能移動前端框架

·設(shè)計達人 | 愛設(shè)計，愛分享。

·axure原型素材 - Axure原創(chuàng)教程網(wǎng)

· 原型庫 - AxureRP高保真原型案例實戰(zhàn)，原型設(shè)計，可以如此簡單!

·UI設(shè)計_UI_UI教程-Uimaker-專注UI設(shè)計

·蜜豆首頁

· 作品流 | 騰訊原創(chuàng)館

·Material Design, Daily - MaterialUp

·花瓣 Pinterest

· 十五言 - 每個人都在創(chuàng)造

· UI設(shè)計/UI界面設(shè)計/交互設(shè)計 - 設(shè)計欣賞 - 設(shè)計帝國

·少數(shù)派 - 高質(zhì)量應用推薦媒體

7.UED相關(guān)

·騰訊CDC

·騰訊MXD移動互聯(lián)網(wǎng)設(shè)計中心

·騰訊ISUX - 社交用戶體驗設(shè)計

·TGideas-騰訊游戲官方設(shè)計團隊

· 百度用戶體驗中心

· http://ued.taobao.org/blog/

·攜程設(shè)計委員會-Ctrip Design Committee

· 新浪UED | 一個關(guān)注用戶體驗、關(guān)注工作流、關(guān)注作品質(zhì)量的有愛團隊

·騰訊游戲官方設(shè)計團隊

·TGideas

· 騰訊網(wǎng)UED

· 阿里巴巴中國站用戶體驗設(shè)計部

·阿里巴巴國際UED

·阿里媽媽MUX

·網(wǎng)易用戶體驗設(shè)計中心

·FEX 做最專業(yè)的前端

·百度EUX企業(yè)產(chǎn)品用戶體驗中心

·奇舞團 360旗下前端開發(fā)團隊

·攜程設(shè)計委員會

·暢游視覺設(shè)計中心

8.平面素材下載（設(shè)計UI過程中還是會多多少少用到平面素材）

·PSD素材,PSD素材免費下載,PS素材,PS素材下載-站長素材

·圖片網(wǎng)_背景圖片素材網(wǎng)_qq空間圖片素材_圖片大全_素材中國17素材網(wǎng)

·素彩網(wǎng)-素材天下,ps素材,矢量素材,psd素材免費下載,ppt模板,素材中國,免費素材網(wǎng)

·素材天下網(wǎng)-PSD素材免費下載-矢量素材-PPT模板-中國素材免費下載網(wǎng)站

·愛圖網(wǎng) - 圖片素材,PSD素材,矢量素材,設(shè)計圖庫,淘寶素材,設(shè)計素材圖片網(wǎng)

·素材搜索-設(shè)計素材搜索聚合

·紅動中國免費素材網(wǎng)_中國最大的免費素材網(wǎng)！

·大圖網(wǎng) - 影樓素材,PSD素材,矢量素材,高清圖片素材,高品質(zhì)設(shè)計素材共享

·68Design_網(wǎng)頁設(shè)計師|UI設(shè)計師|電商設(shè)計師

·設(shè)計本-中國室內(nèi)設(shè)計師網(wǎng)_室內(nèi)設(shè)計聯(lián)盟_裝修設(shè)計公司大全

·懶人圖庫 - 矢量圖,JS代碼,網(wǎng)頁素材 - 學會偷懶，懶出境界！

·設(shè)計達人 | 愛設(shè)計，愛分享。

·矢量圖 - PSD矢量,AI矢量,EPS矢量,矢量素材下載 - 第7頁 - 素材集市

·優(yōu)設(shè)記 - 最全jquery插件下載 - 高質(zhì)量網(wǎng)頁素材

·微信小程序模板下載_免費微信小程序圖片設(shè)計素材_【包圖網(wǎng)】

9.字體設(shè)計/學習平臺

中文字體字體設(shè)計欣賞+字體下載：

字體傳奇網(wǎng)-中國首個字體品牌設(shè)計師交流網(wǎng)

圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀UI設(shè)計師互動平臺

找字網(wǎng),您的字體管家!免費字體下載,字體設(shè)計!

書法字體轉(zhuǎn)換器在線轉(zhuǎn)換-藝術(shù)字體在線生成器設(shè)計

第一字體網(wǎng)字體下載