UI設(shè)計(jì)相關(guān)知識

1、1. 什么是UI設(shè)計(jì):User In terface （用戶界面），簡稱UI，是指對軟件的人機(jī)交互、操作邏輯、 界面美觀的整體設(shè)計(jì)。2. UI設(shè)計(jì)分三個(gè)分支:1、研究界面一-圖形設(shè)計(jì)師Grap hie UI desig ner ，簡稱GUI,國內(nèi)目前大部 分UI工作者都是從事這個(gè)行業(yè)。包括（網(wǎng)頁設(shè)計(jì)，軟件界面，移動(dòng)端界面設(shè)計(jì)）， 每天工作做著各種界面設(shè)計(jì)。2、交互設(shè)計(jì)師，做整個(gè)項(xiàng)目的交互流程。3、用戶體驗(yàn)研究師，主要是通過各種方法去了解用戶現(xiàn)在需要什么樣的體驗(yàn)什么樣的界面，從而對這個(gè)項(xiàng)目的總體性體驗(yàn)做決策的。用戶界面設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心

2、理學(xué)、設(shè)計(jì)學(xué)、語言學(xué)等在此都扮演著重要的角色。用 戶界面設(shè)計(jì)的三大原則是：置界面于用戶的控制之下；減少用戶的記憶負(fù)擔(dān)；保 持界面的一致性；即要符合用戶的心智模型。所以一個(gè)優(yōu)秀的UI設(shè)計(jì)師，從技能上講，不僅能畫圖標(biāo)，還能做好界面, 會很多交互知識。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、 簡單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。圖標(biāo)，界面，交互知識都是需要長期的經(jīng)驗(yàn)積累，所以 UI這條路很長，要學(xué)的技能很多，大家加油吧！UI設(shè)計(jì)師一定要做的事情（PS配置技巧）如果你是設(shè)計(jì)移動(dòng)UI界面又是Photoshop 新手，那么今天分享的技巧教 程很適合你，雖然說是移動(dòng)界面設(shè)計(jì)，但

3、同樣適用于其它設(shè)計(jì)工作，比如網(wǎng)頁設(shè) 計(jì)、平面設(shè)計(jì)等等，讓我們開始吧。1.P hotosho P新建文檔設(shè)置 操作：菜單T文件T新建 寬度：640像素 高度：1136像素（4英寸iPhone設(shè)備） 分辨率：72像素/英寸（ppi） 顏色模式：RGB顏色 背景內(nèi)容：白色（可選） 顏色配置文件：不要色彩管理此文件（更多顏色設(shè)置后） 像素長寬比：方形像素配置如下圖:A1J夷歐理）：5401偉案度但）：|n361像累分群$但）:1 ffi索革寸d趣世轅云尅）：Il貽a前色T fsi普彙內(nèi)容: 1白色A鬲級ES&KS丈件（Q）： 1不要對就玄襠進(jìn)行色碧昔理d穌檢S出00： 1辦橡黑J荷個(gè)）：慄標(biāo)蜃1迪電加

4、0石Eflfi尢卜:2如2.對齊設(shè)置這個(gè)處就是當(dāng)你使用圖層、形狀等操作時(shí)自動(dòng)對齊網(wǎng)格，畫矢量圖不怕模糊 邊緣，確保每個(gè)像素保持清晰。設(shè)置: 菜單f視圖f對齊 菜單f視圖f對齊到f全部3. 首選項(xiàng)設(shè)置操作：菜單 T編輯T首選項(xiàng) T常規(guī)，建議按下圖設(shè)置啟用輕擊平移 僅僅是一個(gè)滑移效果，占內(nèi)存又不能提高操作效率，建議關(guān)掉。根據(jù)HUD垂直移動(dòng)來改變圓形畫筆硬度 功能挺好用的，按Alt+右鍵左右/上下移動(dòng)可以分別改變畫筆的大小和硬度。將矢量工具與變換與像素網(wǎng)格對齊 這個(gè)強(qiáng)烈建議UI設(shè)計(jì)開啟這個(gè)功能，這個(gè)讓你來矢量力不會產(chǎn)生半像素虛邊, 十分好用。但在需要微調(diào)整時(shí)可暫時(shí)關(guān)閉它。4. 文本設(shè)置字體我一般把字

5、體設(shè)置為犀利，如果你是PhotoshoP CC版本，它有一個(gè)Win dows LCD/Mac LCD抗鋸齒功能，文字可以為網(wǎng)頁一樣效果了，所以建議 升級到Photoshop CC 吧。操作：首先選定文本 字符工具（AA）選擇 Windows LCD/Mac LCD5. 全局光繼蘋果iOS人機(jī)界面指南，你應(yīng)該把燈光設(shè)置為 90 。操作：圖層-圖層樣式-全局光 -90 6. 網(wǎng)格設(shè)置現(xiàn)在設(shè)計(jì)iOS界面都要兼容視網(wǎng)膜（Retina ），所以我把每個(gè)網(wǎng)格設(shè)置為 2像素，這樣我就不怕圖像在視網(wǎng)膜設(shè)備下變得模糊了。操作：菜單f編輯f首選項(xiàng)f參考線、網(wǎng)格和切片，網(wǎng)格線間隔：4像素;子網(wǎng)格2?；蛘呔W(wǎng)格線間隔：

6、2像素；子網(wǎng)格1。我喜歡前者入_7. 導(dǎo)出設(shè)置不管我們是做網(wǎng)頁不審設(shè)計(jì)iOS APP應(yīng)用程序時(shí)，導(dǎo)出圖像最好是使用”存儲為Web所用格式”來導(dǎo)出。這里通過”存儲為 Web格式”導(dǎo)出PNG-24為例，其中默認(rèn)設(shè)置比較重要,如下圖: 操作：菜單f文件f存儲為Web格式所用格式預(yù)設(shè)：PN G-24 透明：勾選 交錯(cuò)：未勾選嵌入顏色配置文件：未勾選(Photoshop CC 版本才有) 轉(zhuǎn)換為sRGB :未勾選 質(zhì)量：兩次立方8. Retina 顯示器設(shè)置如果你是使用帶 Retina視網(wǎng)膜的MacBook Pro ，你應(yīng)該確保你是使用2800 X1800像素(1440 X900點(diǎn))操作：Apple菜單 f 系統(tǒng)偏好設(shè)置 f 顯示 f 最適合顯示器9. 顏色配置顏色配置是極為復(fù)雜的一個(gè)操作，如果你不是這領(lǐng)域的大神， 那么還是老老實(shí)實(shí)的用推薦的配置吧，這里我選擇了Marc EdwardsO 的顏色配置選項(xiàng)