UI設(shè)計(jì)-—創(chuàng)意表達(dá)與實(shí)踐教學(xué)課件1

1、初識UI設(shè)計(jì)UI即User Interface（用戶界面）的簡稱。UI設(shè)計(jì)是指對軟件的人機(jī)交互、操作邏輯、界面視覺美觀的整體設(shè)計(jì)。它的工作主要包括界面的視覺設(shè)計(jì)、界面的交互設(shè)計(jì)、界面與用戶體驗(yàn)3個部分?！臼裁词荱I】【UI 設(shè)計(jì)常用名詞及縮寫】UI：User Interface（用戶界面）GUI：Graphical User Interface（圖形用戶界面）HUI：Handset User Interface（手持設(shè)備用戶界面）WUI：Web User Interface（網(wǎng)頁用戶界面）IA：Information Architecture（信息架構(gòu)）UX：User Experience（用

2、戶體驗(yàn)）IxD: Interaction Design（人機(jī)交互）UCD：User Centered Design（以用戶為中心的設(shè)計(jì)）UPA：Usability Professionals Association（可用性專業(yè)協(xié)會）VD：Visual Design（視覺設(shè)計(jì)）CD：Content Design（文案設(shè)計(jì)）UIC：User Interface Code（界面編碼開發(fā)）UR：User Research（用戶研究）競品分析，可用性測試和評估PM：Product Manager（產(chǎn)品經(jīng)理）決策產(chǎn)品方向、架構(gòu)與需求BI：Business Intelligence（市場分析）WIMP：Wi

3、ndow/Icon/Menu/Pointing Device（窗口/圖標(biāo)/菜單/指點(diǎn)設(shè)備）【UI 設(shè)計(jì)的分類】第一部分：網(wǎng)頁界面、手持移動設(shè)備界面（系統(tǒng)界面、獨(dú)立APP應(yīng)用界面）應(yīng)用程序界面設(shè)計(jì)手機(jī)系統(tǒng)界面設(shè)計(jì)網(wǎng)頁界面設(shè)計(jì)第二部分：平板電腦、電腦系統(tǒng)、應(yīng)用軟件界面、游戲界面及車載導(dǎo)航設(shè)備界面iPad平板電腦界面設(shè)計(jì)iMac蘋果操作系統(tǒng)界面設(shè)計(jì)車載導(dǎo)航界面設(shè)計(jì)游戲界面設(shè)計(jì)第三部分：智能家居界面、可穿戴設(shè)備界面及家電類微型液晶屏界面可穿戴設(shè)備界面設(shè)計(jì)智能家居操作界面設(shè)計(jì)家用咖啡機(jī)操作界面設(shè)計(jì)第四部分：醫(yī)療及各種數(shù)碼機(jī)床等自動化控制界面、微型嵌入式設(shè)備界面醫(yī)療用具的界面設(shè)計(jì)第五部分：卡拉OK點(diǎn)歌、遠(yuǎn)

4、程會議監(jiān)控、虛擬現(xiàn)實(shí)等界面遠(yuǎn)程虛擬設(shè)備界面設(shè)計(jì)初識UI設(shè)計(jì)行業(yè) 目前，UI設(shè)計(jì)行業(yè)正在全球軟件業(yè)興起，屬于高新技術(shù)設(shè)計(jì)產(chǎn)業(yè)。雖然國內(nèi)在人機(jī)交互領(lǐng)域比國外晚十幾年，但近十年，隨著APP開發(fā)成本降低，個人創(chuàng)業(yè)及中小型IT企業(yè)在國內(nèi)遍地開花，導(dǎo)致了UI設(shè)計(jì)人才的需求井噴。此外國內(nèi)眾多IT企業(yè)（如百度、騰訊、Yahoo、中國移動、聯(lián)想、網(wǎng)易、盛大、淘寶等）均成立專業(yè)的UI設(shè)計(jì)部門，高級UI專業(yè)人才稀缺，人才資源爭奪很激烈，薪資也很可觀?！綰I 行業(yè)現(xiàn)狀】 2014年中旬從國內(nèi)大型招聘網(wǎng)站前程無憂、智聯(lián)招聘和中華英才網(wǎng)獲取對UI設(shè)計(jì)師崗位的基本生存狀態(tài)信息數(shù)據(jù)。據(jù)不完全統(tǒng)計(jì)全國已有UI設(shè)計(jì)師30萬余人，

5、其中70%為網(wǎng)頁UI設(shè)計(jì)師，20%為手持設(shè)備UI設(shè)計(jì)師 ，10%為其他UI設(shè)計(jì)師。UI設(shè)計(jì)師分類比例未來UI設(shè)計(jì)的領(lǐng)域主要體現(xiàn)在全息投影交互技術(shù)、可穿戴設(shè)備、圖像加強(qiáng)技術(shù)、遠(yuǎn)程控制、3D打印機(jī)、運(yùn)動感應(yīng)技術(shù)、多功能眼鏡技術(shù)、智能手表、人體穿戴醫(yī)療設(shè)備及無人駕駛汽車等領(lǐng)域?！疚磥鞺I設(shè)計(jì)新領(lǐng)域】3D全息投影可穿戴設(shè)備Magic Cube奇幻投影鍵盤3D打印技術(shù)個人健康顧問設(shè)備第一部分：移動應(yīng)用中的UI設(shè)計(jì)1、各平臺 (Android/iOS/HTML5/Web) 的標(biāo)準(zhǔn)設(shè)計(jì)語言接近一致【UI 設(shè)計(jì)的發(fā)展趨勢】部分原生控件上只存在風(fēng)格上的差異，對用戶無顯著影響。桌面常見的交互形式也將更多影響移動端

6、，要支持 iPad Pro 這樣的生產(chǎn)級設(shè)備，iOS/Android 會為了兼容桌面場景作出優(yōu)化。Android系統(tǒng)底部的導(dǎo)航交互2、設(shè)計(jì)規(guī)范、平臺特性越來越受重視對于實(shí)現(xiàn)與找到適配用戶學(xué)習(xí)新的操作規(guī)范與平臺范式是有成本方面的考慮，因此大的廠商在設(shè)計(jì)交互動態(tài)效果時都遵循現(xiàn)有的平臺的設(shè)計(jì)范式，所謂獨(dú)創(chuàng)或者自創(chuàng)的交互效果未必能達(dá)到理想的狀態(tài)。 3、微交互中更多使用動態(tài)效果過于華麗的動畫，會導(dǎo)致用戶等待的時間延長，經(jīng)常出現(xiàn)容易引起用戶的反感與厭惡。合乎邏輯的動畫、微交互形式將作為新的平臺規(guī)范。如下拉刷新、Float Label 等很難察覺的動效將會更流行。手機(jī)界面中浮動面板與微交互設(shè)計(jì)應(yīng)用4、視覺設(shè)

7、計(jì)會影響APP界面的交互/內(nèi)容的設(shè)計(jì)精美的插畫、攝影圖像、有趣味的游戲設(shè)計(jì)等都會更多的影響到APP界面的交互設(shè)計(jì)與內(nèi)容設(shè)計(jì)。APP界面設(shè)計(jì)的版面編排、字體選擇，圖像質(zhì)感、元素搭配等都直接影響APP本身的品質(zhì)感。手機(jī)APP界面中圖形圖像的應(yīng)用5、“智能通知”將會成為新的APP主界面 Apple Watch等智能手表的核心價(jià)值體現(xiàn)在“智能通知”，尤其在手機(jī)應(yīng)用中很多的APP，“智能通知”的推動方式成為與用戶在不啟動APP的狀態(tài)下最直接的溝通渠道。未來“智能通知”不再以小廣告或者類似Widget的形式出現(xiàn)，可以更接近手機(jī)屏幕大小，按用需求出現(xiàn)，具備較為完整的界面功能，讓用戶在不打開一個APP應(yīng)用下，

8、可以享受到APP提供的全部功能。智能手表及手機(jī)“智能通知”界面設(shè)計(jì)第二部分：網(wǎng)頁設(shè)計(jì)中的UI設(shè)計(jì)1、手機(jī)APP不一定會有對應(yīng)的全功能的網(wǎng)頁手機(jī)版的應(yīng)用開發(fā)一定是功能最齊全、最強(qiáng)大的。因?yàn)槭謾C(jī)可以用發(fā)通知的方式與用戶貼近，讓用戶收到更豐富全面的信息資源。HTML5 頁面作為分享頁面展示、導(dǎo)流的重要入口，會優(yōu)先保留內(nèi)容的展示和消費(fèi)、二次分享的功能，也會滿足最基礎(chǔ)的應(yīng)用功能。滴滴出行微信版界面設(shè)計(jì) 2、已有大量用戶的桌面端網(wǎng)站，將不會輕易改版對于一個具備大量用戶的網(wǎng)站的改版設(shè)計(jì)，將會從成本與收益之間比例關(guān)系進(jìn)行權(quán)衡。通常情況下如果網(wǎng)站做視覺效果的調(diào)整，主要從品牌擴(kuò)展、皮膚美化等因素進(jìn)行修改；如果網(wǎng)站

9、從功能層面出發(fā)，將會從手機(jī)版、平面觸摸版的設(shè)計(jì)出發(fā)，然后延伸到桌面端來進(jìn)行界面的改良設(shè)計(jì)。第三部分：設(shè)計(jì)工具的UI設(shè)計(jì)1、UI原型工具出現(xiàn)設(shè)計(jì)標(biāo)準(zhǔn)實(shí)現(xiàn)UI的交互與視覺界面設(shè)計(jì)，需要借助專業(yè)的UI設(shè)計(jì)工具來實(shí)現(xiàn)。一款好的原型設(shè)計(jì)工具將主導(dǎo)未來新平臺的設(shè)計(jì)標(biāo)準(zhǔn)，它應(yīng)該具備以下優(yōu)秀的功能：與靜態(tài)界面設(shè)計(jì)緊密結(jié)合；移動終端的界面方便制作響應(yīng)式設(shè)計(jì)；操作簡單易懂；拓展性強(qiáng)，能實(shí)現(xiàn)較為復(fù)雜的交互效果。2、VR的設(shè)計(jì)工具將開始出現(xiàn)2016 年隨著 Oculus Rift 的正式發(fā)布，VR 進(jìn)入了商用化的元年。VR 帶來的身臨其境感顯然會帶來新的信息展現(xiàn)和交互方式，這些都不是目前的平面設(shè)計(jì)軟件所能滿足的，但目

10、前進(jìn)行VR也沒有除了直接搞代碼之外的設(shè)計(jì)方式，未來幾年將有所改觀。Oculus Rift 虛擬VR設(shè)備初識UI設(shè)計(jì)師1、硬件配置從事設(shè)計(jì)行業(yè)工作的UI設(shè)計(jì)師，軟件與硬件都是息息相關(guān)的。設(shè)計(jì)工具的完備是從事這個行業(yè)的基礎(chǔ)條件。工作電腦的配置需達(dá)到以下配置：PC機(jī)的配置為CPU為4核以上、內(nèi)存8GB以上、顯卡內(nèi)存2GB以上、SSD固態(tài)硬盤；Windows 7以上系統(tǒng)，Adobe CC等軟件已經(jīng)不再支持XP系統(tǒng)，當(dāng)然有蘋果一體機(jī)或MAC Pro更好。【UI設(shè)計(jì)師所需裝備】2、軟件配置98%的UI設(shè)計(jì)師會使用平面位圖軟件Photoshop，85%的UI設(shè)計(jì)師會使用平面矢量軟件Illustrator，3

11、0%的UI設(shè)計(jì)師會使用網(wǎng)頁設(shè)計(jì)軟件。在UI設(shè)計(jì)行業(yè)里，基礎(chǔ)軟件只能進(jìn)入崗位，從事簡單基礎(chǔ)的設(shè)計(jì)工作，其他拓展類的軟件可以對崗位能力的提升與就業(yè)面上有更多的選擇權(quán)。主流設(shè)計(jì)軟件的使用率1、手繪能力在開展設(shè)計(jì)項(xiàng)目時，設(shè)計(jì)前期手繪草圖能力是不可缺少的。手繪能力從某種程度上能反映出該設(shè)計(jì)師的美術(shù)功底，同時對職業(yè)的提升與發(fā)展都有一定程度上的影響?！?UI設(shè)計(jì)師必備技能】手繪UI草圖模型2、熟練操作繪圖軟件UI設(shè)計(jì)師最常用的繪圖軟件就是Photoshop和Illustrator，必須掌握該位圖軟件與矢量軟件的核心使用功能及運(yùn)用技法。位圖概念、像素與分辨率、圖像格式、色彩管理、透視原理、光影效果及其他基本操

12、作設(shè)置。Photoshop中鋼筆工具路徑繪圖、選區(qū)、曲線調(diào)整的技巧。Photoshop中圖形樣式、常用濾鏡、6類混合模式的運(yùn)用。Photoshop中快速蒙版、剪切蒙版、圖層蒙版和矢量蒙版的運(yùn)用。Photoshop中通道與顏色處理的運(yùn)用技巧。Photoshop中多種摳像方法。Photoshop與Illustrator協(xié)同路徑作業(yè)。Illustrator中矢量圖形繪制、路徑的編輯、網(wǎng)格漸變的高級用法。3、理解需求文檔與文檔整理在開始一個項(xiàng)目時，UI設(shè)計(jì)師需要在目錄下建立6個文件文檔，并具有嚴(yán)格的整理規(guī)范，才能保證團(tuán)隊(duì)小組成員共享資源時節(jié)約時間，提高效率。文檔整理規(guī)范參考圖片：該文件夾放很多設(shè)計(jì)靈感

13、，如色彩布局參考或競品參考等；紋理素材：該文件夾放一些作畫過程中用到的貼圖嵌入圖，或者一些額外控件等；需求資料：該文件夾放客戶的需求文檔，給的參考和客戶提供的產(chǎn)品圖片，或者是產(chǎn)品經(jīng)理提供的文案、線框圖、流程、低保真模型等；效果圖：該文件夾放畫的設(shè)計(jì)樣稿、飛機(jī)稿、最終定稿、小DEMO、設(shè)計(jì)理念等；源文件：該文件夾放所有可修改的源文件；切片：該文件夾放開發(fā)用的切片和UI 規(guī)范，以及一切文字色值、坐標(biāo)等。1、設(shè)計(jì)師的能力和性格對職業(yè)發(fā)展的影響設(shè)計(jì)師的眼界優(yōu)秀的UI設(shè)計(jì)師是需要積累和沉淀，需要靠平時點(diǎn)滴的積累。設(shè)計(jì)師的溝通能力傾聽：客戶、項(xiàng)目組其他成員的意見，收集信息，傾聽客戶的內(nèi)心需求及對產(chǎn)品的期望

14、和愿景。提問：挖掘客戶深層次的需求，或確定客戶表達(dá)不清楚的地方。解決：用設(shè)計(jì)師專業(yè)的眼光和素養(yǎng)，評估各類可行性，將客戶的意見和各方面信息總結(jié)出目前最優(yōu)解決方案，變成草案，再次和客戶確認(rèn)，用郵件確認(rèn)，留下文字信息。設(shè)計(jì)師的技術(shù)表現(xiàn)手繪草稿能力和軟件操作能力，效果圖的效率與質(zhì)量，產(chǎn)品演示DEMO等決定視覺表現(xiàn)因素。設(shè)計(jì)師的整合能力 能將手頭的資源素材整合起來，用最好的方式給客戶展示出來?！?UI設(shè)計(jì)師的職業(yè)規(guī)劃】2、職業(yè)的發(fā)展維度UI設(shè)計(jì)師進(jìn)入職場后，職業(yè)生涯的發(fā)展可以分為橫向發(fā)展和縱向發(fā)展的設(shè)計(jì)師。他們需要掌握的技能和發(fā)展的崗位分別是視覺設(shè)計(jì)、交互設(shè)計(jì)、用戶體驗(yàn)、代碼編程、項(xiàng)目管理。UI設(shè)計(jì)師的

15、五大主要崗位UI設(shè)計(jì)工作流程常見軟件產(chǎn)品的開發(fā)流程包括產(chǎn)品需求分析、功能定義、交互原型、程序技術(shù)預(yù)研、效果圖繪制、開發(fā)、測試、發(fā)布上線、運(yùn)營、迭代開發(fā)?！咀灾鬈浖a(chǎn)品開發(fā)流程】以用戶為中心的設(shè)計(jì)與開發(fā)流程外包公司的開發(fā)流程包括溝通、評估、策劃、UE規(guī)劃、視覺、開發(fā)、測試、驗(yàn)收、上線、運(yùn)營、分析、升級?！就獍井a(chǎn)品開發(fā)流程】外包流程網(wǎng)站推出流程包括試生產(chǎn)、啟動會議、設(shè)計(jì)模板、內(nèi)容裝配、商務(wù)工具集成、渠道優(yōu)化目標(biāo)、審核和批準(zhǔn)、站點(diǎn)推出?！揪W(wǎng)站推出發(fā)流程】網(wǎng)站推出流程在現(xiàn)實(shí)工作中，設(shè)計(jì)師往往抱怨不能按照自己的設(shè)計(jì)思想去完成設(shè)計(jì)方案，會受到企業(yè)各種條件的制約與影響。其實(shí)這樣的困惑在與初入行業(yè)的年輕U

16、I設(shè)計(jì)師們對企業(yè)體制與文化環(huán)境的了解太少，這些都將直接影響到UI設(shè)計(jì)師的設(shè)計(jì)作品是否能得到企業(yè)的重用。通過大量畢業(yè)生的就業(yè)的情況反饋，企業(yè)從事的行業(yè)與公司的類型會對從事的UI設(shè)計(jì)崗位的設(shè)計(jì)師工作產(chǎn)生重要的影響。因此，總結(jié)主要有以下幾種類型的公司：類型一：以客戶需求為導(dǎo)向的企業(yè)這類企業(yè)就是行內(nèi)俗稱的外包公司，主要以滿足客戶需求來承接業(yè)務(wù)，設(shè)計(jì)師需要在此過程中不斷的修改設(shè)計(jì)方案與溝通設(shè)計(jì)想法。雖然這類設(shè)計(jì)公司經(jīng)常加班熬夜，并且設(shè)計(jì)師的待遇相對偏低，但對于新人能接觸到各類設(shè)計(jì)項(xiàng)目，為自己囤積作品與累積項(xiàng)目經(jīng)驗(yàn)?！酒髽I(yè)體制與文化環(huán)境對UI設(shè)計(jì)工作的影響】類型二：以用戶為中心的企業(yè)這類企業(yè)的主要業(yè)務(wù)就是

17、研發(fā)自己的產(chǎn)品，并且產(chǎn)品是直接面向用戶，通常公司會在用戶體驗(yàn)方面投入較多的精力與資金，擅長挖掘用戶需求與競品分析。以不斷優(yōu)化的高品質(zhì)UI來吸引用戶群的青睞，針對目標(biāo)用戶進(jìn)行開發(fā)與設(shè)計(jì)。類型三：以技術(shù)為導(dǎo)向的企業(yè)這類企業(yè)通常老板都以技術(shù)出身，對產(chǎn)品UI界面的操作性能高于美觀要求。需求設(shè)計(jì)師切出圖資源小，能用系統(tǒng)控件的地方盡量用系統(tǒng)控件。能靠賣軟件技術(shù)服務(wù)存活，一般都壟斷了部分核心技術(shù)。類型四：以視覺設(shè)計(jì)為導(dǎo)向的企業(yè)這類企業(yè)通常老板以設(shè)計(jì)師出身，對UI設(shè)計(jì)的美觀效果要求較高，容易盲目追求設(shè)計(jì)效果而忽略實(shí)現(xiàn)成本。在這類企業(yè)中工作能提高自己的設(shè)計(jì)品味與設(shè)計(jì)技能，但老板對UI設(shè)計(jì)效果要求苛刻與挑剔。類型五：以運(yùn)營平臺為導(dǎo)向的企業(yè)這類企業(yè)一般很少有自己的產(chǎn)品，主要靠引進(jìn)企業(yè)公司的產(chǎn)品放在自己的平臺與軟件商店中出售，需要在產(chǎn)品中加入大量的廣告位、活動專區(qū)、付費(fèi)等。這類公司里設(shè)計(jì)師通常的工作就是處理網(wǎng)頁UI界面中的BANNER圖與活動頁面的設(shè)計(jì)與制作。類型