學(xué)習(xí)單元5——計(jì)算機(jī)軟件界面設(shè)計(jì).UI設(shè)計(jì)項(xiàng)目教程單元概述

計(jì)算機(jī)客戶端UI是非常重要的人機(jī)互動(dòng)用戶界面。由于計(jì)算機(jī)端和移動(dòng)端在顯示方面有很大的差別，所以在UI設(shè)計(jì)的過(guò)程中，需要注意區(qū)分不同客戶端的設(shè)計(jì)規(guī)范的差異。本單元通過(guò)兩個(gè)具體的計(jì)算機(jī)端軟件UI設(shè)計(jì)的例子，展示了計(jì)算機(jī)端軟件UI設(shè)計(jì)流程、設(shè)計(jì)規(guī)范及軟件使用，通過(guò)本單元的學(xué)習(xí)，讀者能夠?qū)τ?jì)算機(jī)端UI設(shè)計(jì)有一定的了解和掌握。學(xué)習(xí)目標(biāo)1．通過(guò)項(xiàng)目制作，掌握計(jì)算機(jī)端UI制作的流程和設(shè)計(jì)規(guī)范2．通過(guò)項(xiàng)目制作，學(xué)習(xí)網(wǎng)頁(yè)界面設(shè)計(jì)制作規(guī)范3．通過(guò)案例學(xué)習(xí)Web產(chǎn)品的制作規(guī)范應(yīng)用企業(yè)后臺(tái)管理系統(tǒng)界面設(shè)計(jì)項(xiàng)目2.TWO項(xiàng)目描述

本項(xiàng)目主要任務(wù)是幫助客戶設(shè)計(jì)企業(yè)后臺(tái)管理系統(tǒng)界面，企業(yè)后臺(tái)管理系統(tǒng)不僅要滿足大部分的日常管理工作，如經(jīng)營(yíng)活動(dòng)、員工管理、日程安排和工單等，還要通過(guò)分析賬目中的數(shù)據(jù)，找出問(wèn)題并改善經(jīng)營(yíng)，有效提高企業(yè)的利潤(rùn)。UI設(shè)計(jì)項(xiàng)目教程任務(wù)1：設(shè)計(jì)前期準(zhǔn)備

一款軟件產(chǎn)品包含了戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。而作為UI設(shè)計(jì)師，表現(xiàn)層是其工作的主要內(nèi)容，這里說(shuō)的“表現(xiàn)層”是指視覺(jué)設(shè)計(jì)層面。

在界面的視覺(jué)設(shè)計(jì)中包含5個(gè)視覺(jué)要素：色彩、文字、圖標(biāo)、圖片、空間。UI設(shè)計(jì)項(xiàng)目教程任務(wù)1：設(shè)計(jì)前期準(zhǔn)備

我國(guó)的AntDesign、Element等公司的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，把交互、前端和視覺(jué)的事情一并解決了，是值得學(xué)習(xí)的典范，這些優(yōu)秀的設(shè)計(jì)規(guī)范都包含以下幾個(gè)特點(diǎn)：

靈活（Flexible）；可拓展（Expansive）；系統(tǒng)的（Systematic）；標(biāo)準(zhǔn)的（Standard）。UI設(shè)計(jì)項(xiàng)目教程任務(wù)1：設(shè)計(jì)前期準(zhǔn)備菜單和功能分析

首先，對(duì)Web頁(yè)面的層級(jí)進(jìn)行梳理，包括底層、內(nèi)容層、導(dǎo)航層、菜單層、插件層和彈窗層。搭好基礎(chǔ)框架后，所有的控件組件都會(huì)在這個(gè)框架內(nèi)搭建。搭好框架，除了方便設(shè)計(jì)師自己去清晰地理解系統(tǒng)，也有助于與前端開發(fā)高效交流，例如，在做模態(tài)彈窗時(shí)，如果沒(méi)和開發(fā)端交流好，只說(shuō)彈窗寫在了菜單操作的位置，就有可能出現(xiàn)問(wèn)題。

UI設(shè)計(jì)項(xiàng)目教程任務(wù)1：設(shè)計(jì)前期準(zhǔn)備菜單和功能分析

分析好Web頁(yè)面架構(gòu)所需要的層級(jí)后，開始為系統(tǒng)設(shè)計(jì)實(shí)用的菜單和關(guān)鍵信息位置。首先需要了解企業(yè)的需求，需要系統(tǒng)包含什么功能，如財(cái)務(wù)賬單電子化查看、每日銷售數(shù)據(jù)查看、報(bào)表查看、員工信息查看等；在銷售數(shù)據(jù)中又需要突出哪些重點(diǎn)信息，如新增會(huì)員人數(shù)、用戶量、訂單與用戶比例等。UI設(shè)計(jì)項(xiàng)目教程任務(wù)1：設(shè)計(jì)前期準(zhǔn)備布局設(shè)計(jì)

初步確定好布局內(nèi)容UI設(shè)計(jì)項(xiàng)目教程必備知識(shí)

網(wǎng)頁(yè)界面設(shè)計(jì)常識(shí)1.常用字體簡(jiǎn)介中文字體種類大致分為：宋體、黑體、仿宋、楷體、其它（變體字）。西文字體種類大致分為：無(wú)襯線體、羅馬正體或襯線體、意大利斜體、手寫體、黑字體（哥特體）。2.字體使用規(guī)則在Windows系統(tǒng)中，常用字體有微軟雅黑、黑體、宋體等，最小字號(hào)推薦使用12px，正文字號(hào)推薦使用14px，標(biāo)題字號(hào)推薦使用18px、20px、24px、28px、32px等，盡可能使用偶數(shù)。行間距一般為字號(hào)的1.5～1.8倍。在MacOS系統(tǒng)中，常用中文字體有蘋方體、思源黑體、華文細(xì)黑等，英文字體有Helvetica、SanFrancisco等。3.運(yùn)用字體庫(kù)實(shí)現(xiàn)圖標(biāo)在管理系統(tǒng)的一些內(nèi)部功能頁(yè)面中，運(yùn)用創(chuàng)新的圖標(biāo)并不是那么多，借字體庫(kù)就能實(shí)現(xiàn)簡(jiǎn)單對(duì)應(yīng)的圖標(biāo)功能。前端開發(fā)人員也可調(diào)用字體庫(kù)實(shí)現(xiàn)圖標(biāo)展示。例如，常見的字體庫(kù)fontawesome就能提供可縮放的矢量圖標(biāo)，可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改，包括大小、顏色、陰影或者其它任何支持的效果。UI設(shè)計(jì)項(xiàng)目教程任務(wù)2：主界面功能模塊設(shè)計(jì)

1．統(tǒng)計(jì)數(shù)據(jù)表制作UI設(shè)計(jì)項(xiàng)目教程任務(wù)2：主界面功能模塊設(shè)計(jì)2．繪制用戶分析的餅圖UI設(shè)計(jì)項(xiàng)目教程任務(wù)2：主界面功能模塊設(shè)計(jì)

展示整個(gè)系統(tǒng)完整布局和首頁(yè)界面UI設(shè)計(jì)項(xiàng)目教程必備知識(shí)

設(shè)計(jì)規(guī)范：適用于Web產(chǎn)品線的人機(jī)交互界面設(shè)計(jì)的指導(dǎo)手冊(cè)。貫穿以用戶為中心的設(shè)計(jì)指導(dǎo)方向，根據(jù)Web產(chǎn)品的特點(diǎn)制定出的一套規(guī)范，以達(dá)到提升用戶體驗(yàn)、控制產(chǎn)品設(shè)計(jì)質(zhì)量、提高設(shè)計(jì)效率的目的。1．規(guī)范的意義（1）統(tǒng)一識(shí)別設(shè)計(jì)規(guī)范能使頁(yè)面相同屬性單元相對(duì)統(tǒng)一，防止混亂，甚至出現(xiàn)嚴(yán)重錯(cuò)誤，避免用戶在瀏覽時(shí)理解困難，減少用戶的使用難度。（2）節(jié)約資源除了活動(dòng)推廣等個(gè)性頁(yè)面外，設(shè)計(jì)其他頁(yè)面時(shí)使用本規(guī)范標(biāo)準(zhǔn)能極大地減少設(shè)計(jì)時(shí)間，達(dá)到節(jié)約資源的目的。（3）重復(fù)利用相同屬性單元、頁(yè)面新建時(shí)可以執(zhí)行此標(biāo)準(zhǔn)，有利于閱讀和信息傳達(dá)，減少對(duì)主體信息傳達(dá)的干擾。（4）上手簡(jiǎn)單在招收、加入新的設(shè)計(jì)師或前端時(shí)，查看此規(guī)范標(biāo)準(zhǔn)能使他們上手工作的時(shí)間更短，減少出錯(cuò)。UI設(shè)計(jì)項(xiàng)目教程必備知識(shí)

設(shè)計(jì)規(guī)范：適用于Web產(chǎn)品線的人機(jī)交互界面設(shè)計(jì)的指導(dǎo)手冊(cè)。貫穿以用戶為中心的設(shè)計(jì)指導(dǎo)方向，根據(jù)Web產(chǎn)品的特點(diǎn)制定出的一套規(guī)范，以達(dá)到提升用戶體驗(yàn)、控制產(chǎn)品設(shè)計(jì)質(zhì)量、提高設(shè)計(jì)效率的目的。2．指導(dǎo)標(biāo)準(zhǔn)（1）網(wǎng)頁(yè)寬度如果是1280的分辨率，網(wǎng)頁(yè)設(shè)置成1258px的寬度會(huì)相對(duì)安全一些，正文寬度980px不變，涉及有背景圖案的專題頁(yè)時(shí)，寬度可設(shè)置成1440px，正文寬度設(shè)置成980px不變。（2）顏色設(shè)計(jì)時(shí)使用216Web安全色，選擇RGB/8位，其他模式的顏色色域很寬、顏色范圍太廣，在不同的顯示器上會(huì)有失色現(xiàn)象?；顒?dòng)專題頁(yè)的設(shè)計(jì)可以不按照此規(guī)范執(zhí)行。UI設(shè)計(jì)項(xiàng)目教程必備知識(shí)2．指導(dǎo)標(biāo)準(zhǔn)（3）字體1）默認(rèn)中文字體為宋體，正文內(nèi)容、小標(biāo)題、普通文字按鈕、鏈接等均可采用。導(dǎo)航、數(shù)字等可采用微軟雅黑字體。2）字體樣式。可采用不加粗、加粗、下劃線，正式頁(yè)面中絕對(duì)不能使用斜體。3）大小?！?0px”多用于導(dǎo)航；“16px”多用于大標(biāo)題等；“14px”多用于小標(biāo)題、重要的文字按鈕等；“12px”多用于正文內(nèi)容、輔助性文字等。4）顏色。重要文字可采用#333333（20%的灰），若需要突出時(shí)可用突出色；常規(guī)文字可采用#d4d4d（30%的灰）；輔助文字可采用#99999（60%的灰）；提示文字可采用#ee311d（橙紅）；某些鏈接可采用#3d86c6（藍(lán)）。通常使用宋體和微軟雅黑常規(guī)字體，無(wú)特殊情況不引入其他字體。字體大小遇到特殊情況可以調(diào)節(jié)，但是必須為偶數(shù)像素。UI設(shè)計(jì)項(xiàng)目教程必備知識(shí)2．指導(dǎo)標(biāo)準(zhǔn)（4）頁(yè)面布局板塊排版在視覺(jué)上要符合縱向分割，橫向間距模塊統(tǒng)一，縱向可根據(jù)頁(yè)面內(nèi)容適當(dāng)分區(qū)。（5）網(wǎng)頁(yè)柵格兩欄可采用左側(cè)導(dǎo)航、菜單、幫助信息等，右側(cè)內(nèi)容區(qū)域；也可采用左側(cè)內(nèi)容區(qū)域，右側(cè)廣告位等。三欄采用左側(cè)導(dǎo)航、菜單、幫助信息等，中間內(nèi)容區(qū)域，右側(cè)廣告位等，如圖5-67所示。（6）圖標(biāo)制作規(guī)格要求統(tǒng)一的視角、倒影、材質(zhì)、尺寸，顏色數(shù)量盡量不超過(guò)三種。圖標(biāo)必須會(huì)意直觀，這是圖標(biāo)區(qū)別于文字的價(jià)值所在。（7）命名圖片命名要求規(guī)范，建立良好文檔規(guī)范，養(yǎng)成良好命名習(xí)慣，能有效提高工作效率，利于合作。頁(yè)頭：header內(nèi)容：content頁(yè)面主體：main頁(yè)尾：footer導(dǎo)航：nav側(cè)欄：sidebar欄目：column整體布局：wrapper左/中/右：L/C/R水平/垂直：H/V標(biāo)簽：tab菜單：submenu摘要：summary鼠標(biāo)懸停：hover廣告橫幅：AD/banner按鈕：b