web-ui是什么--網(wǎng)頁的界面設計
UI就是用戶界面，包括三個方向：用戶研究，交互設計，界面設計。
WUI是網(wǎng)頁用戶界面。wui設計與常見網(wǎng)站建設的區(qū)別是，wui注重人與網(wǎng)站的互動和體驗，以人為中心進行設計。
關于屏幕分辨率
確定計算機批屏幕上顯示多少信息的設置，以水平和垂直像素來衡量。顯示分辨率就是屏幕上顯示的像素個數(shù)，屏幕尺寸一樣的情況下，分辨率越高，顯示效果就越精細。
自適應布局。
web的基本分類
1.門戶網(wǎng)站（新浪網(wǎng)）
2.分類信息網(wǎng)站（58同城）
3.交易類網(wǎng)站（天貓，淘寶，京東）
4.娛樂性網(wǎng)站（愛奇藝，B站）
5.個人博客（QQ空間，人人網(wǎng)）
6.論壇／社區(qū)（百度貼吧，天涯）
7.行業(yè)類網(wǎng)站（汽車之家）
8.企業(yè)網(wǎng)站（公司官網(wǎng)，公司廣告）
9.機構類網(wǎng)站（政府機構，公積金，社保）
10.功能性網(wǎng)站（快遞100，查找快遞信息）
網(wǎng)頁都有哪些模塊構成
模塊：網(wǎng)頁界面布局中最小的單位。
頭header，廣告banner，搜索search，小技巧tips
內(nèi)容content，頁面主體main，友情鏈接friendlink，欄目標題title
尾footer，熱點hot，頁腳footer，加入joinus，
導航nav，新聞news，版權id，指南guide，
側欄sidebar，下載download，滾動scroll，服務service
欄目column，子導航subnav，內(nèi)容content，注冊register，
登陸條loginbar，菜單menu，標簽頁tab，狀態(tài)status，
標志logo，子菜單submenu，文章列表list，投票vote
頁面外圍控制整體布局，左右中l(wèi)eft right center，提示信息msg，
合作伙伴partner，寬度wrapper或wrap，版權信息copyright
網(wǎng)頁是如何實現(xiàn)的
結構 樣式 行為
html css js
web標準化布局原理
1.把網(wǎng)頁看成多個網(wǎng)格
2.先有行再有列（從上到下）
3.先做容器在做內(nèi)容（從外到內(nèi)）
設計維度
版式-》色彩-》圖片-》字體-》段落-》細節(jié)：商品陰影，風格元素，對齊等
界面設計流程
版式-》制作-》輸出
項目的流程
需求-策劃-原型圖（交互設計師）-設計圖（切圖）-制作（前端）-上線發(fā)布
版式：
分析需求內(nèi)容-》繪制草圖（ps，網(wǎng)格狀，紙筆手繪）
制作：
1.優(yōu)化版式結構
2.填充內(nèi)容（圖片素材等）
3.樣式設計（字號，顏色，邊框等）
輸出：
1.優(yōu)化（設計哪些不足）
2.切圖（和前端工程師聊，也有前端自己切圖）
3.輸出（切好的圖打包命名整理）
基本規(guī)范
一般項目初期就要建立設計規(guī)范（主色調(diào)，字體等），因此為基準，進行之后的設計工作。查看設計規(guī)范的不只有設計師還可能是前端，運營，開發(fā)等人員，所以設計規(guī)范的建立要充分考慮適用人群。
字體選擇
一個非創(chuàng)意性質(zhì)的網(wǎng)頁，最重要的內(nèi)容，就是文字。
出現(xiàn)了文字，就會出現(xiàn)文字排版，字體選擇，字體顏色大小粗細等細節(jié)。而這些細節(jié)，往往是非常重要的細節(jié)。
襯線字體（易讀性高）和無襯線字體（醒目，更容易被注意到）
整篇文章中適合用襯線字體，正文字體：宋體。易于閱讀但不夠醒目。
標題適用于無襯線字體：黑提。醒目
字體的屬性
字體字號 單位有磅，點，像素px等
粗細 粗體，細體，常規(guī)體，斜體
字體顏色：各種顏色，常見：正文黑色和超鏈接藍色
下劃線，山出現(xiàn)
選擇字體
當瀏覽器加載代碼后，解析到有關字體的樣式，它會在你的系統(tǒng)中查找這個字體，只有找到了相應的字體文件才會根據(jù)那個字體文件對網(wǎng)頁中的文字進行渲染。如果操作系統(tǒng)中沒有安裝網(wǎng)頁中定義的字體，就無法渲染出字體的效果，而通常使用當前系統(tǒng)的默認字體來渲染。
解決方法1:使用通用字體的樣式屬性
充分利用樣式屬性來區(qū)別字體（顏色，粗細，背景色等來做出層次區(qū)別）
解決方法2:使用在線字體
css3的web fonts功能，網(wǎng)頁中可以使用安裝在服務器端的字體，你可以將選擇好的字體，上傳到服務器中，然后使用css3新增的@font-face屬性，來調(diào)用服務器上的字體，然后來渲染網(wǎng)頁）
支持css3這一功能的瀏覽器，會首先查找服務器上的字體，然后下載下來進行渲染。這樣就徹底解決了本地操作系統(tǒng)中，沒有對應字體的問題。
缺點：通常英文字體只有幾百kb，因為它只需要包含數(shù)字，標點，英文字母；而漢字太多，所以中文字體通常十幾M，最小也要幾M，打開一個網(wǎng)頁，還需要先下載個幾M的字體，在目前國內(nèi)的網(wǎng)速是不現(xiàn)實的。
色彩的運用
色彩是視覺表現(xiàn)的重要因素之一。
在web設計中，根據(jù)和諧，均衡和鐘帶你突出的原則，將不同的色彩進行組合。根據(jù)色彩對人們心里的影響，合理地加以運用。
如果有企業(yè)VI，要按照其中色彩規(guī)范進行設計。
色彩的三要素：色相，明度，純度
藍色 沉穩(wěn) 理智 科技感 數(shù)字
綠色 安全
黃紅 奔放
黃藍 抑郁
背景 花哨，烘托氣氛，但會分散內(nèi)容 單純，聚焦內(nèi)容
web中的尺寸單位
在web中，我們所說的尺寸不是顯示器的尺寸單位“寸”，而是頁面的尺寸單位，簡單說就是網(wǎng)頁的寬高，顯示器上顯示圖片的寬高，文字等字號等這類尺寸
px：像素，顯示器上的最小單位
pt：點，長度單位，物理尺寸，1pt=1/72英寸
ppi（dpi）：每英寸的像素點數(shù)，是一個率，用來表示精度
em：百分比（%）
web中的圖像格式
超文本可以包含圖片，鏈接，音頻
圖片格式：
JPG:色彩豐富、對設備和系統(tǒng)平臺適應性強、通用性強，對比GIF和PNG的尺寸要大些
GIF：動態(tài)、靜態(tài)、可透明底、體積小，表情常用。缺點：透明底有毛邊
PNG：初衷是替代GIF和TIFF，體積小，透明底，開發(fā)常用，在網(wǎng)頁設計中最常用，精度夠的話也無什么毛邊什么的
視頻格式，音頻格式
flv:視頻傳播格式，體積小，加載速度極快，增長最快最廣泛
MP3：大幅度縮小音頻體積，音質(zhì)有損耗
視覺層次
利用點線面等元素或顏色的變化而塑造出來的空間視覺效果。
近大遠?。ㄍ敢暎?/p>
近實遠虛（景深）
元素層次（畫面的塑造）
色彩層次：亮的在前，暗的在后。利用黑白處理，判斷視線重點，色彩層次
切圖的作用
1.重要性；基礎中的基礎
2.目的；為web提供圖片素材
3.切圖保存：png
首頁官網(wǎng)設計
功能
展示企業(yè)形象
傳播主要業(yè)務
集合功能入口
首頁的登錄／不登錄
不登錄：品牌展示為主
登錄：深層次業(yè)務，個人服務
專題頁面設計
功能
強烈的視覺效果
有趣味的體驗
推廣信息
設計流程：結構（上下結構，專題系列）-》風格（產(chǎn)品特點，專題特征）-》頭圖（主題字，氛圍）-》內(nèi)容（內(nèi)容清晰，布局合理）
設計必須要在意的地方：創(chuàng)意，版式，色彩，細節(jié)
banner首焦圖設計
bannner首頁焦點圖。無論你是web設計師還是ui設計師，只要混跡在互聯(lián)網(wǎng)公司的設計師，都會接觸到設計banner這一工作，并且有時會是加急的。
所以如何高效的完成banner工作是我們需要掌握的一項工作方法論
設計流程：需求（分析需求）-》風格（確立風格）-》版式（排版）-》配色（符合主題風格）
1.需求：一般運營的同事會給需求，一般只有寥寥數(shù)字。例子：
軟文標題：圣誕來襲30天11%年化
主圖標題：圣誕加息歲末狂歡趴
所以這時候，我們需要主動溝通，詢問更多的潛在需求（目的？預期效果？特殊需求？--潛在需求）
2.版式：回字形，左中右構圖，左右結構，上下結構，左右里嵌套上下結構
3.配色：
電子產(chǎn)品：冷色調(diào)，偏冷淡。
食品：綠色，安全
家：黃色紅色，暖色調(diào)
總結
聽：多搜集行業(yè)信息，發(fā)展趨勢
說：與人交流，和同行交流（版式，色彩），和用戶交流
讀：生活中，多觀摩分析，別人的作品（什么風格，結構，色彩搭配etc）
寫：著手練習，臨摹優(yōu)化。
鏈接：http://www.imooc.com/article/details/id/20171
