本書講了什么

本書是一本系統(tǒng)全面的UI入門教材，從零開始講解UI設計的方方面面氧卧。是平面設計師、交互設計師兆旬、產(chǎn)品經(jīng)理等相關(guān)人士的必讀之書假抄。

作者什么來頭

火星時代 ，已經(jīng)成為代表北京市的創(chuàng)意動漫龍頭企業(yè)，目前火星時代已成為Autodesk公司在中國唯一認可的標準認證教材研發(fā)機構(gòu)宿饱，并成為Auto 3ds Max/Maya授權(quán)認證教師培訓中心熏瞄。

第1課 UI名詞的由來

UI即User Interface，UI設計是指對軟件的人機交互谬以、操作邏輯强饮、界面美觀的整體設計。UI設計主要包括視覺設計为黎、交互設計邮丰、用戶體驗三個部分。

GUI:Graphical User Interface铭乾，圖形用戶界面剪廉。

HUI:Handset User Interface，手持設備用戶界面炕檩。

IA:Information Architecture,信息架構(gòu)斗蒋。

UX:User Experience，用戶體驗笛质。

IxD:Interaction Design,交互設計泉沾。

VD:Visual Design，視覺設計妇押。

CD:Content Design跷究，文案設計。

UR:User Research,用戶研究。

BI:Business Intelligence，市場分析猪半。

第2課 UI的分類

目前UI的設計范疇主要包括：

網(wǎng)頁界面、手持設備界面潭袱；

亞板電腦柱嫌、電腦系統(tǒng)锋恬、應用軟件與游戲界面；

智能電視界面编丘、可穿戴設備界面与学；

醫(yī)療及各種數(shù)碼機床等自動化控制界面；

遠程會議監(jiān)控嘉抓、虛擬現(xiàn)實等界面索守。

第3課 圖形界面發(fā)展史

各種操作系統(tǒng)及手機的演化史，略抑片。

第4課 UI行業(yè)發(fā)展前景

就是各種有前景卵佛。

第5課 常用軟件介紹

第6課 設計師必備技能

熟練操作繪圖軟件；

理解需求文檔和手繪能力；

文檔整理規(guī)范截汪。

第7課 UI設計工作流程

自主軟件產(chǎn)品開發(fā)流程

外包公司開發(fā)流程

網(wǎng)站推出流程

公司體制和文化環(huán)境對你的影響

以客戶需求為導向的公司疾牲；

以用戶需求為導向的公司/*首選*/；

以開發(fā)技術(shù)為導向的公司衙解；

以設計視覺為導向的公司阳柔；

以運營平臺為導向的公司；

創(chuàng)業(yè)型公司及小團隊/*全面*/蚓峦；

國企及事業(yè)型壟斷企業(yè)舌剂。

設計師的能力和性格對設計的影響

設計師本身的眼界；

設計師的溝通能力暑椰；

設計師的技術(shù)表現(xiàn)霍转；

設計師的整合能力。

第8課 圖標設計

圖標分類

分為像素圖標一汽、二維剪影標谴忧、3D立體圖標、寫實擬物圖標角虫、扁平化圖標沾谓。

圖標設計的基礎流程

確定圖標功能，先提煉特點.再設計圖形語義剪影戳鹅，然后繪制細節(jié)潤色

像素圖標

像素圖標是點陣式圖像均驶，像素圖標屬于位圖，像素圖標更強調(diào)清晰的輪廓和明確的色彩枫虏，常用gif格式妇穴，它的尺寸精致，信息容量小隶债，常被用在早期的計算機界面腾它，QQ秀，手機信號欄上的圖標死讹，BBS的徽章等瞒滴。

剪影2D圖標

剪影2D圖標一般都都是成套出現(xiàn)在系統(tǒng)功能類中，所以外觀統(tǒng)一和識別性非常重要赞警，網(wǎng)上有大量素材妓忍，新手容易犯的錯誤就是東摳西挖導致風格不統(tǒng)一。統(tǒng)一風格應注意：倒角和圓角一致愧旦、線的寬度一致世剖、體積感一致、外輪廓造型一致笤虫、傾斜角度上一致旁瘫、透視角度上一致祖凫。

扁平化圖標

常用設計技法：為剪影圖標加一個底、彩色拼貼圖標酬凳、折紙風格圖標蝙场、長投影圖標、透明質(zhì)感圖標粱年、偽扁平輕質(zhì)感圖標售滤。

寫實圖標

寫實并不是畫的像照片一樣，而是讓創(chuàng)造的圖標比較逼真台诗，但又超越現(xiàn)實完箩，比如方形的西瓜、糖果質(zhì)感的籃球等拉队。

3D圖標

制作3D圖標的常用用軟件有Cinema

4D弊知、3ds Max、Maya粱快。

手機系統(tǒng)主題圖標

主題設計比賽是UI設計師大顯身手的游樂場秩彤，是個名利雙收的好機會。

第9課 界面設計

界面設計之APP

界面設計之Web設計

8個Web設計趨勢：單頁面事哭、色塊設計漫雷、聚焦簡介、視差滾動鳍咱、用照片做背景降盹、超大號的圖片、響應式設計谤辜、強調(diào)字體/*自檢表略*/

第10課 系統(tǒng)控件設計

一水而過蓄坏。

第11課 LOGO/Banner設計

LOGO設計

用色要符合企業(yè)和品牌的形象；

造型要有寓意丑念；

不同尺寸下具有識別性涡戳；

看起來渾然一體。

Banner的元素

對主體物的圖片進行摳圖處理脯倚；

確定Banner的配色渔彰；

確定物體的擺放、LOGO構(gòu)圖和色塊分割挠将；

設計一級標題文字突出胳岂，二級文字小字體補充說明编整；

搜集小元素做點綴舔稀，要和主題呼應；

對背景陪襯進行修飾和優(yōu)化掌测，使Banner主次分明内贮。

第12課 產(chǎn)品包裝設計

軟件包裝盒产园、軟件啟動頁、軟件新手導引夜郁、軟件說明書什燕、軟件的光盤、海報易拉寶這6類產(chǎn)品的包裝設計竞端，如果是針對同一款產(chǎn)品屎即，那么它們的用色和風格應該是統(tǒng)一或是有關(guān)聯(lián)的。

第13課 質(zhì)感表現(xiàn)精講

固有色事富、環(huán)境技俐、光照，粗糙度统台、透明度雕擂、密度、自發(fā)光贱勃、紋理是質(zhì)感表現(xiàn)的8個屬性要素井赌。此外，還有9類材質(zhì)表現(xiàn)：透明材質(zhì)贵扰、般透明材質(zhì)仇穗、厚實材質(zhì)、粗糙暗雅材質(zhì)戚绕、光滑堅硬材質(zhì)仪缸、柔軟材質(zhì)、流體材質(zhì)列肢、粒子形態(tài)材質(zhì)恰画、常見金屬材質(zhì)。在繪制之前先去搜一些相關(guān)質(zhì)感的參考圖片瓷马，提取它的固有色拴还、環(huán)境、光照.欧聘、粗糙度片林、透明度、自發(fā)光怀骤、紋理等細節(jié)费封，然后描繪出來。

第14 課色彩與構(gòu)圖精講

色彩

RGB為自發(fā)光模式蒋伦，主要以紅綠色和藍色為原色弓摘，它是一種疊加后會變亮的模式，最終混合是白色痕届。例如陽光韧献、顯示屏等一切能自發(fā)光的物體所遵循的模式末患。CMYK為反射光模式，它是一種疊加后顏色會變深的模式锤窑，例如印刷油墨璧针、繪畫顏料，我們眼睛看到的一切不會發(fā)光的物體的顏色渊啰。原理是物質(zhì)吸收了發(fā)光物體光譜中的一部分顏色探橱，把不吸收的顏色反射到我們的眼睛中。

網(wǎng)頁設計的四大塊配色：主體色绘证，輔助色走搁，點睛色，背景色迈窟。

配色卡

Design-seeds.com/一個網(wǎng)頁一股一般由主色調(diào)40%~70%私植、輔色20%~30%、點晴色小于10%车酣、背景色等幾部分構(gòu)成曲稼。色卡可以幫助你快速找到網(wǎng)站需要的主色調(diào)。使用的時候湖员，可以增加和減少色塊比重來調(diào)和整個畫面贫悄，甚至可以用兩張相似的色卡來達到增加顏色細節(jié)的目的。

構(gòu)圖元素

構(gòu)圖中除了點娘摔、線窄坦、面外，我們常用的構(gòu)圖形狀為方凳寺、圓鸭津、三角和矩形四種。四種圖形隨意復制肠缨、組合逆趋、排列、布爾加減后晒奕，可以得到各種復雜的圖形和構(gòu)圖闻书。

設計中的構(gòu)圖要素

排列—成組、對齊脑慧、節(jié)奏感魄眉。

強調(diào)—重心、對比闷袒、夸張坑律、層次、遠近霜运。

清晰—高清圖片脾歇、色 彩分明蒋腮、文字辨識度淘捡。

簡潔—留白藕各、空靈、意境焦除、不要過度設計激况。

風格—整體統(tǒng)一、品質(zhì)感膘魄、精致乌逐、新穎。

語氣—適度创葡、態(tài)度浙踢、情感、易理解灿渴。

第15課 元素風格精講

網(wǎng)頁UI常用風格:科技風格洛波、現(xiàn)代簡約、清新風格骚露、懷舊浪漫蹬挤、女性專題、趣味卡通等風格棘幸。游戲UI常用風格:中國風焰扳、魔幻科幻、蒸汽朋克误续、哥特歐式吨悍、體育競技日韓可愛等風格。通過不同元素蹋嵌、造型畜份、配色、質(zhì)感欣尼、紋理等的組合爆雹，可以創(chuàng)造出無窮無盡的設計風格。

第16課 優(yōu)秀案例賞析（略）

第17課 扁平化UI

扁平化愕鼓，flat design钙态，指摒棄高光、紋理菇晃、材質(zhì)册倒、陰影等能造成透視感的效果，通過抽象磺送、簡化驻子、符號化的設計元素來表現(xiàn)灿意。界面上極簡抽象、矩形色塊崇呵、大字體缤剧、光滑、現(xiàn)代感十足域慷，讓你去體會這是什么荒辕，其交互核心在于功能本身的使用，所以去掉了冗余的界面和交互/*對大部分GUI設計師來說犹褒，先學AE且注意微質(zhì)感風格及可穿戴設備的界面吧*/

第18課 產(chǎn)品需求分析

競品分析

描述性：和競品有哪些差距抵窒。

定性分析：差距在哪里。

定量分析：差距有多大叠骑。

分析的6個方向

視覺設計：整體視覺風格李皇、圖標設計（識別、精美）宙枷、顏色搭配掉房、字體。

信息架構(gòu)：導航朦拖、分類圃阳、標簽、搜索璧帝、布局捍岳。

交互流程：功能入口、操作步驟睬隶、流程指引锣夹、隨行幫助。

交互細節(jié)：操作前中后提示苏潜、成功提示银萍、出錯提示、文案表達恤左、交互效果贴唇。

功能設計：主要功能、堆疊功能飞袋、附屬功能戳气、擴展功能、關(guān)聯(lián)功能巧鸭。

運營模式：推廣渠道瓶您、營銷模式、運營渠道、盈利模式呀袱。

第19課 交互設計入門

第20課 用戶體驗入門

真的就是入門贸毕，略。

第21課 交互動態(tài)特效（略）

第22課 Android和iOS平臺規(guī)范

官網(wǎng)看最新文檔就好夜赵，略明棍。

第23課 手機應用APP的設計

簡述流程，黑了下工程師油吭，一泛而過击蹲。

第24課 專題網(wǎng)站的UI設計

創(chuàng)建網(wǎng)頁地圖署拟。

確定每頁線框圖婉宰。

確定網(wǎng)頁配色和風格。

設計效果圖推穷。

開發(fā)切片心包。

上線測試。

后期維護馒铃。

第25課 什么人闖進UI設計

大多UI設計師不是美術(shù)專業(yè)蟹腾，所以沒有基礎一樣可以做UI。要花時間去積累美術(shù)基礎区宇。行業(yè)內(nèi)所謂不抄襲娃殖，只是不完全抄襲，都是找很多作品和素材提煉特征议谷，融合到自己的作品炉爆。

第26課 不得不說的秘密

外包報價=時薪*項目時間*3，簽合同付30%訂金卧晓，給初版效果圖可以改三次芬首，多一次加10%，定稿后逼裆，拿30%制作費郁稍。切圖后再交30%，上線調(diào)整完畢后再交10%胜宇。

UI設計師KPI考核模型蠻厲害的耀怜，略了。