一、web UI是什么？
UI(User Interface)指的是用戶界面，主要包括用戶與界面之間的交互關(guān)系(或方法的集合)，所以關(guān)于UI可以分為三個(gè)方向：用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)。
WUI(website User Interface),即網(wǎng)頁(yè)用戶界面。WUI設(shè)計(jì)與常見(jiàn)網(wǎng)站建設(shè)的區(qū)別就是，WUI更注重人魚(yú)網(wǎng)站的交互和體驗(yàn)，是以人為本進(jìn)行設(shè)計(jì)
二、你需要掌握的分辨率
概念：確定計(jì)算機(jī)屏幕上顯示多少信息的設(shè)置，以水平和垂直像素來(lái)衡量。
特征：顯示分辨率就是屏幕上顯示的像素個(gè)數(shù)，屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細(xì)和細(xì)膩。
- 常見(jiàn)的長(zhǎng)寬比：
- 5:4 = 1.25
- 4:3 = 1.33
- 16:10 = 1.60(寬屏)
- 16:9 = 1.77(寬屏)
2.常見(jiàn)分辨率
- 1266x768：兩側(cè)會(huì)有白邊
- 1024x788：基本上和瀏覽器匹配
- 小于1024：小于瀏覽器寬度，會(huì)出現(xiàn)滾動(dòng)條
- 自適應(yīng)布局：根據(jù)瀏覽器大小自動(dòng)適應(yīng)大小
三、網(wǎng)頁(yè)都由哪些構(gòu)成的？
模塊：模塊是網(wǎng)頁(yè)布局中最小的單位，展現(xiàn)不同類(lèi)別的信息，具有特定的功能。比如：header/banner/main/footer/news/sidebar/logo/list/content/service/title/tips.....
四、web的基本分類(lèi)
- 門(mén)戶網(wǎng)站：雅虎、新浪
- 分類(lèi)信息：58、感激
- 交易類(lèi)：京東、天貓、淘寶
- 娛樂(lè)性：A站、B站
- 個(gè)人博客：個(gè)人網(wǎng)站
- 論壇(社區(qū))：發(fā)布信息、信息回帖、交流
- 行業(yè)類(lèi)網(wǎng)站：汽車(chē)之家、經(jīng)管
- 企業(yè)門(mén)戶
- 機(jī)構(gòu)類(lèi)網(wǎng)站：政府
- 功能性網(wǎng)站：快遞100、百度、有道(提供一種或幾種功能)
五、網(wǎng)頁(yè)是如何實(shí)現(xiàn)的
web標(biāo)準(zhǔn)化布局的是由三個(gè)組成部分：結(jié)構(gòu)、樣式、行為。
- 結(jié)構(gòu)：就是網(wǎng)站的框架組成，由html等構(gòu)成；
- 樣式：就是設(shè)計(jì)的特點(diǎn)，包括字體、大小、顏色、格式、布局...
- 行為：實(shí)現(xiàn)一些動(dòng)態(tài)效果...
- HTML中的色彩
- HTML中使用16進(jìn)制的RGB顏色值對(duì)顏色進(jìn)行控制
- 16進(jìn)制的數(shù)碼有：0123456789abcdef；
- 書(shū)寫(xiě)規(guī)范：#RRGGBB
2.web標(biāo)準(zhǔn)化布局原理
- 吧網(wǎng)頁(yè)看成多個(gè)網(wǎng)格
- 先有行再有列（從上到下）
- 先做容器后做內(nèi)容（從外到內(nèi)）
3.web中的尺寸單位
- px(像素)：顯示器上的最小單位
- pt(磅)：長(zhǎng)度單位，物理尺寸，1pt=1/72英寸
- PPI(DPI)：每英寸的像素?cái)?shù)，是一個(gè)率，用來(lái)表示精度
- em：百分比(%)
六、設(shè)計(jì)維度
設(shè)計(jì)維度包括：版式、色彩、圖片、字體、段落、細(xì)節(jié)；
七、設(shè)計(jì)規(guī)范
設(shè)計(jì)規(guī)范就是設(shè)計(jì)工作中所要遵循的一套規(guī)則，在項(xiàng)目初期就需要建立，以此為基準(zhǔn)，進(jìn)行之后的設(shè)計(jì)開(kāi)發(fā)工作。并且設(shè)計(jì)規(guī)范要和充分考慮用戶群體，面向用戶進(jìn)行指定。
規(guī)范可以節(jié)約各方面的成本、節(jié)約時(shí)間、提高工作效率。
- 色彩規(guī)范：主色、色值、字體色值...
- 文字規(guī)范：大小、顏色、字體、字體屬性、
- 圖標(biāo)規(guī)范：子頁(yè)、主頁(yè)...
- 控件規(guī)范：按鈕...
八、界面設(shè)計(jì)流程
整個(gè)網(wǎng)站從需求到上線的流程：
需求->策劃->原型圖->設(shè)計(jì)圖->制作->上線
- 界面設(shè)計(jì)是在設(shè)計(jì)流程中
- 版式：分析需求內(nèi)容和原型圖，繪制草圖；
- 制作：優(yōu)化版式結(jié)構(gòu)，填充內(nèi)容，對(duì)于具體細(xì)節(jié)進(jìn)行樣式設(shè)計(jì)。
- 輸出：優(yōu)化改進(jìn)、切圖，輸送給切圖前端工程師
- 常用圖片可輸出的格式
- GIF:動(dòng)態(tài)、可透明底、體積小、適用于表情；
- JPEG、JPG:色彩豐富、對(duì)設(shè)備和系統(tǒng)平臺(tái)適應(yīng)性強(qiáng)、通用性強(qiáng)；
- PNG-8:(8位)：課代替GIF和TIFF、體積小、透明底、開(kāi)發(fā)常用；
- PNG-24:(24位)
- 常用視頻/音頻輸出格式
- .FLV：體積小、加載速度快、增長(zhǎng)最快、最為廣泛的視頻傳播格式
- .mp3：大幅度縮小音頻體積、音質(zhì)有損耗
九、設(shè)計(jì)技巧
1.視覺(jué)層次：近大遠(yuǎn)小，近實(shí)遠(yuǎn)虛、亮前暗后
2.專(zhuān)題頁(yè)：強(qiáng)烈的視覺(jué)效果、有趣味的體驗(yàn)、推廣信息
十、如何去做
作為一個(gè)設(shè)計(jì)師，要經(jīng)常去搜集行業(yè)信息、發(fā)展趨勢(shì)，如某一階段的風(fēng)格、樣式，對(duì)于不同分類(lèi)的網(wǎng)站，應(yīng)該要留心觀察、勤于思考，觀察每個(gè)網(wǎng)站的布局、風(fēng)格，找到設(shè)計(jì)亮點(diǎn)，觀摩分析，培養(yǎng)自己的思維方式，總結(jié)技術(shù)特點(diǎn)，形成自己的風(fēng)格，更好的學(xué)會(huì)去創(chuàng)造而不是模仿。
