你瀏覽一款網(wǎng)站時(shí)，一般會(huì)迅速的對(duì)網(wǎng)站設(shè)計(jì)的外觀和使用感受做個(gè)評(píng)判，整體的界面設(shè)計(jì)風(fēng)格是第一印象，能否引導(dǎo)用戶(hù)繼續(xù)閱讀取決于此。

金玉其外敗絮其中必然無(wú)法長(zhǎng)久，功能性也是重要考量。推薦您也好好學(xué)習(xí)《網(wǎng)站用戶(hù)體驗(yàn)的76個(gè)要點(diǎn)》
好的用戶(hù)體驗(yàn)不僅僅關(guān)乎到功能性和設(shè)計(jì)美學(xué)，還需要考慮很多因素，和藍(lán)藍(lán)設(shè)計(jì)一起來(lái)看一下吧。

一致性

最重要的交互元素一定要友好，并且風(fēng)格一致。

盡管在設(shè)計(jì)一款網(wǎng)站時(shí)，我們可以融入很多創(chuàng)新點(diǎn)和美學(xué)風(fēng)格，但是一些經(jīng)常使用、且重要的元素，風(fēng)格一定要一致，比如按鈕、鏈接、導(dǎo)航欄、表單等等。我建議可以多瀏覽一些電商網(wǎng)站，他們?cè)谶@一點(diǎn)上做的就很棒，他們通常有很多的產(chǎn)品頁(yè)面，但是整體體驗(yàn)卻相差不大，我們可以看看優(yōu)衣庫(kù)的網(wǎng)站。

texture在界面設(shè)計(jì)中應(yīng)用已經(jīng)越發(fā)完善了。它將形成一種趨勢(shì)，簡(jiǎn)單而有效的為web頁(yè)面設(shè)計(jì)添加幾分深度感。 充分發(fā)揮texture的威力是一份偉大的職責(zé)。它不僅能夠很好增強(qiáng)web設(shè)計(jì)的表現(xiàn)效果，對(duì)于設(shè)計(jì)師來(lái)說(shuō)還是一個(gè)質(zhì)量上乘的好工具。它的美妙作用是可以引導(dǎo)瀏覽者的視線，強(qiáng)調(diào)關(guān)鍵元素的重要性。

然而，長(zhǎng)期以往texture似乎總和“臟亂”或者“低劣”UI設(shè)計(jì)為伍，它的濫用處處可見(jiàn)，像樂(lè)隊(duì)的website等，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，它遺留下來(lái)的滋味可不怎么樣！。 也正是由于以前的濫用，texture的優(yōu)勢(shì)長(zhǎng)期被人們所忽略。texture可以讓web設(shè)計(jì)更具整體感，但是前提是不要讓它滿屏皆是。

Texture（紋理）VS. Patterns（圖案）

在我們深入了解texture之前，先弄懂texture和pattern之間的區(qū)別。這兩個(gè)詞經(jīng)常被誤認(rèn)為同義的。pattern通常是小的、重復(fù)的圖片元素，而texture更趨向于大一點(diǎn)的不重復(fù)的圖片。你可以想象兩個(gè)集合，左邊是pattern，右邊是texture，這兩個(gè)集合有一部分交集，也就是說(shuō)在某些時(shí)候texture也是pattern。去tileabl這個(gè)網(wǎng)站逛一圈，也許你會(huì)有更清晰的印象。

今天藍(lán)藍(lán)設(shè)計(jì)送上一套非比尋常的紋理，可以見(jiàn)配圖，這些都是頂尖UI設(shè)計(jì)師經(jīng)常在界面設(shè)計(jì)中用到的紋理。特別適用于安卓蘋(píng)果的無(wú)線端應(yīng)用，圖片都很大，(2560×1440)高清無(wú)碼，涵蓋了當(dāng)前國(guó)際范中的所有流行紋理：從面料到金屬。

有很多學(xué)習(xí)UI設(shè)計(jì)的同學(xué)下載了紋理后知道如何平鋪使用，并且都分類(lèi)羅列一目了然，可是在制作網(wǎng)站的時(shí)候卻不知道怎么用，總感覺(jué)利用不起來(lái)。

那么今天藍(lán)藍(lán)設(shè)計(jì)推薦30個(gè)運(yùn)用紋理界面設(shè)計(jì)出眾的網(wǎng)站設(shè)計(jì)，希望對(duì)你有一定的啟發(fā):)

Hollister Co.

藍(lán)藍(lán)設(shè)計(jì)這個(gè)教程中我們將使用Photoshop CS6設(shè)計(jì)一個(gè)簡(jiǎn)單、干凈、三列的作品集時(shí)間軸。在這個(gè)過(guò)程中，我們將著眼于自定義網(wǎng)格，排版樣式，并利用不同的顏色和對(duì)比度實(shí)現(xiàn)我們想要的美感。

同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁(yè)面平衡不同的元素，使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感。快畢業(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖：

如果要在一個(gè)UI設(shè)計(jì)師的眾多作品當(dāng)中挑選一個(gè)最接近該設(shè)計(jì)師的界面設(shè)計(jì)思想及風(fēng)格的，那么這個(gè)作品基本上就是設(shè)計(jì)師的個(gè)人網(wǎng)站設(shè)計(jì)。因?yàn)樵O(shè)計(jì)師個(gè)人網(wǎng)站在某種意義上來(lái)說(shuō)可以不用顧及任何受眾群體，不用考慮任何商業(yè)約束之類(lèi)的，基本上是一種隨心所欲的完全自我風(fēng)格的呈現(xiàn)。

因此，UI設(shè)計(jì)師們的個(gè)人網(wǎng)站設(shè)計(jì)成為了另一抹艷麗的風(fēng)景，來(lái)欣賞藍(lán)藍(lán)設(shè)計(jì)今天為您帶來(lái)的這道靚麗風(fēng)景線吧。

Sushi & Robots

在這個(gè)浩瀚的互聯(lián)網(wǎng)里，web項(xiàng)目越來(lái)越多，那么就需要大量的網(wǎng)絡(luò)設(shè)計(jì)人才和程序開(kāi)發(fā)專(zhuān)員。所以，近幾年UI設(shè)計(jì)獅和程序猿越來(lái)越多，更為難能可貴的是，有很多有想法的同學(xué)們會(huì)在日后的工作中惺惺相惜，雙宿雙飛！彼此互補(bǔ)，組合起來(lái)成立自己的工作室，或者相互之間幫助搭建個(gè)人站點(diǎn)。

那么今天藍(lán)藍(lán)設(shè)計(jì)就要分享的是類(lèi)似這樣的個(gè)人站點(diǎn)和工作室。他們之中有圖形界面設(shè)計(jì)師、開(kāi)發(fā)人員、網(wǎng)絡(luò)藝術(shù)作家、和其他數(shù)碼創(chuàng)意者。
這是一個(gè)巨大的網(wǎng)頁(yè)設(shè)計(jì)畫(huà)廊，琳瑯滿目的釋放著這些設(shè)計(jì)人的靈感創(chuàng)意。

Mathew Helme

藍(lán)藍(lán)設(shè)計(jì)強(qiáng)烈推薦：這些超贊的色塊化、模塊化網(wǎng)頁(yè)設(shè)計(jì)！
Web設(shè)計(jì)的8大趨勢(shì)中，其中就包含了色塊設(shè)計(jì)、超大號(hào)的圖片、聚焦簡(jiǎn)潔、響應(yīng)式設(shè)計(jì)、視差滾動(dòng)、強(qiáng)調(diào)字體。
辣！這些鮮活靈動(dòng)的界面設(shè)計(jì)案例，絕對(duì)會(huì)有打動(dòng)你的一個(gè)！在這個(gè)激動(dòng)人心的周五，會(huì)心收藏吧！

Mercer Tavern

藍(lán)藍(lán)設(shè)計(jì)與你分享一位優(yōu)秀的交互設(shè)計(jì)師的成長(zhǎng)過(guò)程與想法。

1. 交互設(shè)計(jì)師應(yīng)當(dāng)具備的能力

如果我們簡(jiǎn)單的將用戶(hù)體驗(yàn)領(lǐng)域涉及到的技能分為：用戶(hù)研究、產(chǎn)品（概念/功能）設(shè)計(jì)、交互設(shè)計(jì)、視覺(jué)設(shè)計(jì)、工程技術(shù)，我認(rèn)為任何一個(gè)交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師等等，都應(yīng)該具有整體的復(fù)合技能，只是哪部分更多哪部分更少的問(wèn)題。

1) 用戶(hù)研究：對(duì)于交互設(shè)計(jì)師，不具備基本的用戶(hù)研究能力，無(wú)法吸收來(lái)自用戶(hù)的「信息營(yíng)養(yǎng)」，如何做出真正以用戶(hù)為重心的設(shè)計(jì)呢？觀察法、訪談法、問(wèn)卷法、可用性測(cè)試、行為數(shù)據(jù)分析等等，這些基本的方法應(yīng)該要有所掌握。

2) 產(chǎn)品（概念/功能）設(shè)計(jì)和交互設(shè)計(jì)：這方面不必多說(shuō)，交互設(shè)計(jì)師必須有大局觀，能夠真正的理解產(chǎn)品的思路和方向，從交互的角度實(shí)現(xiàn)產(chǎn)品層面的意圖。這也是很多交互設(shè)計(jì)師轉(zhuǎn)向產(chǎn)品設(shè)計(jì)師、產(chǎn)品經(jīng)理的原因，在很多方面有交叉。

每當(dāng)談到網(wǎng)頁(yè)設(shè)計(jì)這個(gè)話題時(shí)，我總會(huì)想到這些年我見(jiàn)過(guò)的一些常見(jiàn)的錯(cuò)誤，尤其是發(fā)生在年輕UI設(shè)計(jì)師身上的。所以今天藍(lán)藍(lán)設(shè)計(jì)整理了一些資料，算是我這些年總結(jié)的經(jīng)驗(yàn)吧，主要是教大家怎樣做好網(wǎng)頁(yè)界面設(shè)計(jì)。我認(rèn)為每一個(gè)網(wǎng)頁(yè)設(shè)計(jì)新手在開(kāi)始一個(gè)項(xiàng)目之前都應(yīng)該了解這些知識(shí)，在項(xiàng)目開(kāi)展中也應(yīng)該注意。

這些概念不僅僅是網(wǎng)頁(yè)設(shè)計(jì)方面的，還包括現(xiàn)實(shí)中的工作流問(wèn)題，它可以幫你更好的完成工作。如果你能將這些知識(shí)融會(huì)貫通，假以時(shí)日，做一個(gè)專(zhuān)業(yè)的網(wǎng)站界面設(shè)計(jì)布局就不是問(wèn)題啦~

01.將你的想法先在紙上畫(huà)出來(lái)