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ì)有更清晰的印象。

有很多學(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ì)富有韻律感與呼吸感?？飚厴I(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖：

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

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

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

1) 用戶研究：對(duì)于交互設(shè)計(jì)師，不具備基本的用戶研究能力，無(wú)法吸收來(lái)自用戶的「信息營(yíng)養(yǎng)」，如何做出真正以用戶為重心的設(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è)專業(yè)的網(wǎng)站界面設(shè)計(jì)布局就不是問(wèn)題啦~

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

對(duì)話框（Dialog）是個(gè)好用又方便的工具，通常用來(lái)再三確認(rèn)使用者的操作動(dòng)作與決策，以避免一時(shí)的手誤或誤會(huì)操作動(dòng)作的意思，常用于重要?jiǎng)幼鞯拇_認(rèn)，例如：「你確定要?jiǎng)h除這個(gè)聯(lián)絡(luò)人嗎？」，但若對(duì)話框搭配了不適當(dāng)?shù)幕貞?yīng)選項(xiàng)文字，反而可能會(huì)造成使用者的困擾與誤解，有時(shí)還可能做了錯(cuò)誤的決定。

對(duì)話框界面設(shè)計(jì)最常見(jiàn)的不當(dāng)UI設(shè)計(jì)就是選項(xiàng)上的文字出現(xiàn)：「是（YES）與否（NO）」，回想在學(xué)生時(shí)期考試的時(shí)候，O與X在是非題中是唯二的兩個(gè)答案，而出題者會(huì)透過(guò)文字?jǐn)⑹錾险吹恼`導(dǎo)，來(lái)測(cè)驗(yàn)學(xué)生是否真的清楚了解，先不論這樣的測(cè)驗(yàn)方式到底對(duì)學(xué)習(xí)以及知識(shí)的建立到底有沒(méi)有明顯的幫助，使用者可不想在開(kāi)心的使用你的程式或服務(wù)時(shí)，還要小心翼翼的了解你對(duì)話框的內(nèi)容。

我們當(dāng)然可以細(xì)心的UI設(shè)計(jì)對(duì)話框中的文字，讓使用者清楚明了對(duì)話框的訊息，但是在大部分的情況下，我們幾乎根本不會(huì)逐字去閱讀訊息的內(nèi)容。你必須要假設(shè)使用者除了對(duì)話框上的按鈕外，不會(huì)閱讀任何其他訊息（對(duì)話框的標(biāo)題或是訊息內(nèi)容）。 – John Gruber of Daring Fireball

毋庸置疑，造成用戶跳出率高的真正殺手是網(wǎng)站設(shè)計(jì)元素的雜亂和干擾。 總而言之，網(wǎng)站上任何惱人的元素都有可能造成用戶蜻蜓點(diǎn)水般離去，這些干擾可能是任何不和諧因素，包括過(guò)多的動(dòng)畫(huà)效果、過(guò)于雜亂的配色設(shè)計(jì)。只有層次分明、清晰明了的網(wǎng)站設(shè)計(jì)才能讓用戶把視線聚集在網(wǎng)站內(nèi)容的價(jià)值上，從而達(dá)到網(wǎng)站建設(shè)的目的。而用戶的煩惱就在于網(wǎng)站不合時(shí)宜的排版、不恰當(dāng)?shù)膶?dǎo)航以及錯(cuò)誤的信息把用戶統(tǒng)統(tǒng)拒之門(mén)外。

優(yōu)秀的網(wǎng)站設(shè)計(jì)是能最大化降低用戶跳出率，并提供良好的用戶體驗(yàn)和有價(jià)值的信息。為了避免界面設(shè)計(jì)的悲劇，藍(lán)藍(lán)設(shè)計(jì)總結(jié)了六大要素試圖降低網(wǎng)站跳出率：

1. 良好的用戶界面

每個(gè)人的所接觸的人、事、物不同，接受的教育背景文化也都不同，發(fā)生意見(jiàn)分歧是非常正常的一件事情，然而作為UI設(shè)計(jì)師的我們本身對(duì)設(shè)計(jì)作品都有那么點(diǎn)“潔癖”，遇上類(lèi)似的事情時(shí)，心里總會(huì)有“觸動(dòng)”，情緒難免有些起伏。

面對(duì)別人的意見(jiàn)其實(shí)不用過(guò)于抵觸，意見(jiàn)也可能并不是因?yàn)椴缓枚岢?，是從其它角度提出?dāng)前沒(méi)有考慮到的事情，這不定是壞事，不同角度，不同觀點(diǎn)，能讓作品變得更出色也說(shuō)不定。藍(lán)藍(lán)設(shè)計(jì)分享UI設(shè)計(jì)師遇到意見(jiàn)太多時(shí)的方法，希望對(duì)朋友們界面設(shè)計(jì)工作有所幫助！

接受意見(jiàn)前，先正“三觀”

人非圣賢，孰能無(wú)過(guò)，情緒來(lái)的時(shí)候，總會(huì)有些激動(dòng)，所以先改變一下自己的“三觀”，帶著抵觸情緒很難去對(duì)待意見(jiàn)。:)

1. 正面看待別人的意見(jiàn)

積極看待別人的意見(jiàn)，如果意見(jiàn)能夠幫助自己做出更好的作品，是種多贏。當(dāng)然對(duì)那些不靠譜的意見(jiàn)或者鉆牛角尖的人，還是要分別對(duì)待。

一篇小文，若干貼士，幫你幫我?guī)痛蠹矣幸鉄o(wú)意的培養(yǎng)意識(shí)形態(tài)，爭(zhēng)做有同理心的好UI設(shè)計(jì)師。走著。
這里進(jìn)入譯文。優(yōu)秀的用戶體驗(yàn)界面設(shè)計(jì)師應(yīng)該具有出眾的同理心，也就是站在他人的角度看待和理解事物的能力。同理心與同情心是兩碼事，你不必真心同意或接受他人的觀點(diǎn)，但必須對(duì)他們的狀態(tài)感同身受，從主觀上理解他們看待事物的角度。
出于以下這些原因，我(英文原文作者)相信同理心可以使我們成為更好的界面設(shè)計(jì)師：

• 同理心可以讓我們更自然更真誠(chéng)的去思考怎樣幫助用戶解決他們的實(shí)際問(wèn)題，使我們的設(shè)計(jì)決策能更好的聚焦于用戶目標(biāo)。
• 同理心可以幫助我們與用戶、團(tuán)隊(duì)成員及利益相關(guān)者構(gòu)建更好的人際關(guān)系，為人與人的交流提供開(kāi)放、互信、更具建設(shè)性的基礎(chǔ)。
• 同理心有助于個(gè)人整體的塑造。這不僅僅是一項(xiàng)職業(yè)技能，在工作中逐漸培養(yǎng)和挖掘出來(lái)的同理心同樣可以運(yùn)用到生活的其他方面。

接下來(lái)藍(lán)藍(lán)設(shè)計(jì)和大家分享一些能夠在日常工作和生活中幫助我們提升同理心的小方法。

1.發(fā)現(xiàn)日常生活中的痛

你是一名網(wǎng)頁(yè)設(shè)計(jì)師或者一個(gè)想學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的人嗎？
如果你的回答是”Yes”，那么你最初想學(xué)習(xí)網(wǎng)頁(yè)界面設(shè)計(jì)的原因是什么呢？
有些人夢(mèng)想創(chuàng)造出偉大的設(shè)計(jì)并因此聞名于世；有些人則把網(wǎng)頁(yè)設(shè)計(jì)作為自己的事業(yè)并為之奮斗一生；而有些人，或許僅僅是為了賺錢(qián)養(yǎng)家。

那么你呢？

OK，無(wú)論你為何想學(xué)習(xí)網(wǎng)頁(yè)UI設(shè)計(jì)，現(xiàn)在我要向你介紹一種一箭三雕的方法，能讓你在學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的同時(shí)，變得更受歡迎，還能賺些錢(qián)。正所謂，生財(cái)有道！這聽(tīng)起來(lái)很棒，不是嗎？你一定開(kāi)始期待我要講些關(guān)于網(wǎng)頁(yè)界面設(shè)計(jì)的技術(shù)了吧。很遺憾，我要講的跟這個(gè)毫無(wú)關(guān)系，這可不是一篇通常的講網(wǎng)頁(yè)設(shè)計(jì)相關(guān)技術(shù)的文章。

估計(jì)你還沒(méi)有頭緒?