答|百度派 @王家興

首先要認(rèn)清什么是web，web設(shè)計(jì)又叫網(wǎng)頁設(shè)計(jì)。

web（World Wide Web）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)。是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節(jié)點(diǎn)組織成一個互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。

了解了我們未來的戰(zhàn)場后，我們需要學(xué)會了解用戶的需求。

如何了解用戶需要。

數(shù)據(jù)是有效的分析手段， 但數(shù)據(jù)帶來的指導(dǎo)性大多是宏觀或解釋性質(zhì)的， 在本質(zhì)上往往很難做出有效的說明. 比如用戶為什么會放棄或離開， 用戶為什么找不到本已存在的信息等。未來網(wǎng)頁設(shè)計(jì)的趨勢在哪？這些問題對于交互設(shè)計(jì)從某種角度通過數(shù)據(jù)是無法得到有效的解釋的. 所以回過頭來，我們就需要真正來了解一下下面這些信息：

背景 - 用戶背景信息， 如年齡， 職業(yè)， 喜好等；

動機(jī) - 是什么需要趨勢用戶來使用這個產(chǎn)品；

特性 - 用戶關(guān)心這個產(chǎn)品的哪些特性；

情景 - 用戶在什么情況(外內(nèi)在因素)下來操作；

行為 - 用戶如何與產(chǎn)品交互；

目標(biāo) - 用戶最終想要得到什么；

習(xí)慣 - 用戶一般的操作或使用習(xí)慣， 比如左/右手操作， 閱讀文字大小習(xí)慣等 ；

期望 - 在為操作前或操作不能滿足后的期望；

方法 - 以用戶中心設(shè)計(jì)(UCD)原則應(yīng)該是一個最好的用戶需求分析指導(dǎo)方法。

這個部分涉及內(nèi)容比較多， 我大概列出常見的幾種研究方法：

面試 - 面對面的傾聽和觀察

調(diào)查 - 問卷抽查

需求分析 - 問卷統(tǒng)計(jì)和分析

Card Sort - 卡片組合排序

群體任務(wù)分析 - 對整個用戶群體的操作比較和分析

焦點(diǎn)用戶群 - 專家”用戶”評估

領(lǐng)域研究 - 種族， 年齡， 性別， 行業(yè)等不同領(lǐng)域的統(tǒng)計(jì)分析

標(biāo)題注解： 因?yàn)橛脩暨@個概念的范圍比較廣，網(wǎng)頁設(shè)計(jì)師未來的趨勢在哪？ 所以我們在討論中往往會把最終目標(biāo)用戶比喻為舞臺中角色， 這樣便于在團(tuán)隊(duì)合作中區(qū)分和理解特定需求范圍的用戶群體。

我們了解用戶后方能掌握未來趨勢，根據(jù)用戶的需求設(shè)計(jì)方成。

目前主流的web設(shè)計(jì)：

網(wǎng)站設(shè)計(jì)制作，近年來平面設(shè)計(jì)里“純凈”“留白”等概念也被互聯(lián)網(wǎng)設(shè)計(jì)吸取，為了更簡單明了的突出主體，提供更舒適的感官感受，很多網(wǎng)站開始采用全屏網(wǎng)頁設(shè)計(jì)，利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁面布局，視覺沖擊力大可很好的吸引觀者注意。通常頁面內(nèi)的文字內(nèi)容不會特別多(所出現(xiàn)的少量文字加上精美的排版將會變得更加吸引人)，主要以圖片展示為主。這個樣子的網(wǎng)站多用于攝影團(tuán)隊(duì)或個人作品集展示會比較常見。

現(xiàn)在越來越多用戶都擁有多種終端：臺式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，甚至是未來很長一段時間的設(shè)計(jì)趨勢。那么響應(yīng)式網(wǎng)頁設(shè)計(jì)就是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。

網(wǎng)站設(shè)計(jì)制作除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機(jī)屏幕都在不斷變大，而在對未來生活的預(yù)測、概念設(shè)計(jì)里，“屏幕”這個產(chǎn)物更是被運(yùn)用到多種新平臺上。例如微軟發(fā)布的“未來生活概念視頻”里，廚房、室內(nèi)墻壁、辦公室玻璃墻面都成為了交互平臺。所以我們可以發(fā)現(xiàn)，響應(yīng)式網(wǎng)頁設(shè)計(jì)所具備的良好的適應(yīng)性和可塑性，在未來的網(wǎng)頁設(shè)計(jì)里將占有舉足輕重的位置。

網(wǎng)站設(shè)計(jì)制作扁平化設(shè)計(jì)可以說是去繁從簡的設(shè)計(jì)美學(xué)。去掉所有裝飾性的設(shè)計(jì)，可以說是對之前所推崇的擬物化設(shè)計(jì)的顛覆。我們不能妄加評論說這是好還是不好，只能說它提供了一種新的設(shè)計(jì)思維。扁平化設(shè)計(jì)是否會成為將來的趨勢我們也無法回答，盡管褒貶不一，備受爭議，但是就現(xiàn)在來說它是當(dāng)下的一種潮流。

隨著時代的發(fā)展用戶越來越傾向于移動端（手機(jī)），隨之也演變出來了新的設(shè)計(jì)H5， HTML全稱為HyperText Markup Language，中文直意為“超級文本標(biāo)記語言，我們通常所說的H5是HTML5頁面。

目前設(shè)計(jì)主流界面總結(jié)也就這么多了，未來由于VR的廣泛應(yīng)用還會隨之變化出更多的更具體驗(yàn)性和視覺沖擊力的網(wǎng)站設(shè)計(jì)。

以上內(nèi)容由百度派作者提供

以下就是學(xué)姐推薦的十個交互設(shè)計(jì)網(wǎng)站

1. Dribbble

https://dribbble/

移除

推薦理由：作為一個曾經(jīng)需要邀請碼的設(shè)計(jì)網(wǎng)站。一度風(fēng)靡一時，據(jù)說邀請碼賣到1500，許多設(shè)計(jì)師尋找靈感，與設(shè)計(jì)師同行進(jìn)行交流切磋等都會到這里來。近幾年覺得dribbble的展示形式比較單一，導(dǎo)致有些作品純粹為視覺特效去做。這個見仁見智吧。

2. The FWA

http://thefwa/

移除

推薦理由：地球人都知道的老牌的全球minisite酷站。展示作品比較重視新技術(shù)運(yùn)用于互動中，視覺重視創(chuàng)意表現(xiàn)，其中很多商業(yè)設(shè)計(jì)值得借鑒。但感覺近期給人眼前一亮的作品減少。

3. Awwwards

http://awwwards/

推薦理由：算是老牌網(wǎng)頁設(shè)計(jì)領(lǐng)域的網(wǎng)站了吧，如果說Behance這類的網(wǎng)站是設(shè)計(jì)師靈感的來源，那AWWARDS就是設(shè)計(jì)師（特別是網(wǎng)頁設(shè)計(jì)）的知識儲備庫。

3. Site Inspire

https://siteinspire/

推薦理由：收錄了2500個網(wǎng)站設(shè)計(jì)，并且可以按主題、類型以及風(fēng)格來進(jìn)行搜索。能顯示實(shí)時的網(wǎng)頁快照和位置。比較豐富。

4. straightline

http://bm.straightline.jp/

推薦理由：一個日版的UI、網(wǎng)頁視覺設(shè)計(jì)匯總網(wǎng)站，日本的設(shè)計(jì)風(fēng)格屬于超級耐看型，匯集了很多很棒的設(shè)計(jì)，資源也比較豐富。

5. Little Big Details

http://littlebigdetails/

推薦理由：LitterBigDetail是一個匯總微設(shè)計(jì)的網(wǎng)站，記錄上萬個體驗(yàn)設(shè)計(jì)和產(chǎn)品細(xì)節(jié)。

6. pttrns

https://pttrns/

推薦理由：emmmm....界面像是交互設(shè)計(jì)版的pintest，網(wǎng)站收集了一千多個App設(shè)計(jì)模板和產(chǎn)品流程截圖，而且還在不斷更新中。這些模板截圖按照App的功能或者截圖的類型分類。另外，還可以通過放大鏡，更清晰地看清楚截圖。

7. Html5 Showcase

http://html5-showcase/

推薦理由：各種Html5網(wǎng)頁交互的優(yōu)秀案例

8. Collect UI

http://collectui/

推薦理由：移動端UI設(shè)計(jì)案例居多，收錄的數(shù)量也是非常豐富的，放上來的原因主要是每天都會更新高質(zhì)量的UI作品，而且歸類詳盡到多達(dá)100多種，可以從網(wǎng)站左側(cè)快速定位進(jìn)行瀏覽。遇到喜歡的作品，還可以直接追蹤到Dribbble關(guān)注它的作者。

9. MUUUUU.ORG

http://muuuuu.org/

推薦理由：好了，又是日式風(fēng)格的網(wǎng)頁設(shè)計(jì)，有許多優(yōu)質(zhì)的日式風(fēng)格網(wǎng)頁設(shè)計(jì)的案例，日本設(shè)計(jì)風(fēng)格中的自成一派和許多細(xì)微的人性化交互設(shè)計(jì)非常值得借鑒。

10. UYI

http://useyourinterface/

推薦理由：動效設(shè)計(jì)居多，很多有趣不錯的動效案例。

大家有喜歡的網(wǎng)站也可以給學(xué)姐推薦喔~

答|百度派 @王家興

首先要認(rèn)清什么是web，web設(shè)計(jì)又叫網(wǎng)頁設(shè)計(jì)。

web（World Wide Web）即全球廣域網(wǎng)，也稱為萬維網(wǎng)，它是一種基于超文本和HTTP的、全球性的、動態(tài)交互的、跨平臺的分布式圖形信息系統(tǒng)。是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節(jié)點(diǎn)組織成一個互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。

了解了我們未來的戰(zhàn)場后，我們需要學(xué)會了解用戶的需求。

如何了解用戶需要。

數(shù)據(jù)是有效的分析手段， 但數(shù)據(jù)帶來的指導(dǎo)性大多是宏觀或解釋性質(zhì)的， 在本質(zhì)上往往很難做出有效的說明. 比如用戶為什么會放棄或離開， 用戶為什么找不到本已存在的信息等。未來網(wǎng)頁設(shè)計(jì)的趨勢在哪？這些問題對于交互設(shè)計(jì)從某種角度通過數(shù)據(jù)是無法得到有效的解釋的. 所以回過頭來，我們就需要真正來了解一下下面這些信息：

背景 - 用戶背景信息， 如年齡， 職業(yè)， 喜好等；

動機(jī) - 是什么需要趨勢用戶來使用這個產(chǎn)品；

特性 - 用戶關(guān)心這個產(chǎn)品的哪些特性；

情景 - 用戶在什么情況(外內(nèi)在因素)下來操作；

行為 - 用戶如何與產(chǎn)品交互；

目標(biāo) - 用戶最終想要得到什么；

習(xí)慣 - 用戶一般的操作或使用習(xí)慣， 比如左/右手操作， 閱讀文字大小習(xí)慣等 ；

期望 - 在為操作前或操作不能滿足后的期望；

方法 - 以用戶中心設(shè)計(jì)(UCD)原則應(yīng)該是一個最好的用戶需求分析指導(dǎo)方法。

這個部分涉及內(nèi)容比較多， 我大概列出常見的幾種研究方法：

面試 - 面對面的傾聽和觀察

調(diào)查 - 問卷抽查

需求分析 - 問卷統(tǒng)計(jì)和分析

Card Sort - 卡片組合排序

群體任務(wù)分析 - 對整個用戶群體的操作比較和分析

焦點(diǎn)用戶群 - 專家”用戶”評估

領(lǐng)域研究 - 種族， 年齡， 性別， 行業(yè)等不同領(lǐng)域的統(tǒng)計(jì)分析

標(biāo)題注解： 因?yàn)橛脩暨@個概念的范圍比較廣，網(wǎng)頁設(shè)計(jì)師未來的趨勢在哪？ 所以我們在討論中往往會把最終目標(biāo)用戶比喻為舞臺中角色， 這樣便于在團(tuán)隊(duì)合作中區(qū)分和理解特定需求范圍的用戶群體。

我們了解用戶后方能掌握未來趨勢，根據(jù)用戶的需求設(shè)計(jì)方成。

目前主流的web設(shè)計(jì)：

網(wǎng)站設(shè)計(jì)制作，近年來平面設(shè)計(jì)里“純凈”“留白”等概念也被互聯(lián)網(wǎng)設(shè)計(jì)吸取，為了更簡單明了的突出主體，提供更舒適的感官感受，很多網(wǎng)站開始采用全屏網(wǎng)頁設(shè)計(jì)，利用精心挑選設(shè)計(jì)的漂亮背景，加上合理的頁面布局，視覺沖擊力大可很好的吸引觀者注意。通常頁面內(nèi)的文字內(nèi)容不會特別多(所出現(xiàn)的少量文字加上精美的排版將會變得更加吸引人)，主要以圖片展示為主。這個樣子的網(wǎng)站多用于攝影團(tuán)隊(duì)或個人作品集展示會比較常見。

現(xiàn)在越來越多用戶都擁有多種終端：臺式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁是現(xiàn)在的潮流，甚至是未來很長一段時間的設(shè)計(jì)趨勢。那么響應(yīng)式網(wǎng)頁設(shè)計(jì)就是來解決這個問題的。這種特別的開發(fā)方式能保證網(wǎng)頁適應(yīng)不同的分辨率，讓網(wǎng)頁要素重組，使其無論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。

網(wǎng)站設(shè)計(jì)制作除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機(jī)屏幕都在不斷變大，而在對未來生活的預(yù)測、概念設(shè)計(jì)里，“屏幕”這個產(chǎn)物更是被運(yùn)用到多種新平臺上。例如微軟發(fā)布的“未來生活概念視頻”里，廚房、室內(nèi)墻壁、辦公室玻璃墻面都成為了交互平臺。所以我們可以發(fā)現(xiàn)，響應(yīng)式網(wǎng)頁設(shè)計(jì)所具備的良好的適應(yīng)性和可塑性，在未來的網(wǎng)頁設(shè)計(jì)里將占有舉足輕重的位置。

網(wǎng)站設(shè)計(jì)制作扁平化設(shè)計(jì)可以說是去繁從簡的設(shè)計(jì)美學(xué)。去掉所有裝飾性的設(shè)計(jì)，可以說是對之前所推崇的擬物化設(shè)計(jì)的顛覆。我們不能妄加評論說這是好還是不好，只能說它提供了一種新的設(shè)計(jì)思維。扁平化設(shè)計(jì)是否會成為將來的趨勢我們也無法回答，盡管褒貶不一，備受爭議，但是就現(xiàn)在來說它是當(dāng)下的一種潮流。

隨著時代的發(fā)展用戶越來越傾向于移動端（手機(jī)），隨之也演變出來了新的設(shè)計(jì)H5， HTML全稱為HyperText Markup Language，中文直意為“超級文本標(biāo)記語言，我們通常所說的H5是HTML5頁面。

目前設(shè)計(jì)主流界面總結(jié)也就這么多了，未來由于VR的廣泛應(yīng)用還會隨之變化出更多的更具體驗(yàn)性和視覺沖擊力的網(wǎng)站設(shè)計(jì)。

以上內(nèi)容由百度派作者提供