首頁

網(wǎng)頁設(shè)計中紋理的運用技巧

藍(lán)藍(lán)設(shè)計的小編

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

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

Texture(紋理)VS. Patterns(圖案)

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

紋理應(yīng)該怎樣用到網(wǎng)頁中?

藍(lán)藍(lán)設(shè)計的小編

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

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

Hollister Co.

Textured website design example: Hollister Co.

如何設(shè)計有范兒的個人作品時間軸網(wǎng)頁

藍(lán)藍(lán)設(shè)計的小編

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

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

上效果圖:

1p

 

一個優(yōu)秀的交互設(shè)計師是怎樣練成的?

藍(lán)藍(lán)設(shè)計的小編

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

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

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

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

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

如何做好網(wǎng)頁?20招幫你打造完美設(shè)計!

藍(lán)藍(lán)設(shè)計的小編

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

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

01.將你的想法先在紙上畫出來

 initial sketch

如何設(shè)計清楚明了的對話框

藍(lán)藍(lán)設(shè)計的小編

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

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

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

dialog

企業(yè)網(wǎng)站建設(shè)如何減少跳出率

藍(lán)藍(lán)設(shè)計的小編

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

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

 

1. 良好的用戶界面

設(shè)計師遇到意見太多時怎么辦?

藍(lán)藍(lán)設(shè)計的小編

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

面對別人的意見其實不用過于抵觸,意見也可能并不是因為不好而提出,是從其它角度提出當(dāng)前沒有考慮到的事情,這不定是壞事,不同角度,不同觀點,能讓作品變得更出色也說不定。藍(lán)藍(lán)設(shè)計分享UI設(shè)計師遇到意見太多時的方法,希望對朋友們界面設(shè)計工作有所幫助!

接受意見前,先正“三觀”

人非圣賢,孰能無過,情緒來的時候,總會有些激動,所以先改變一下自己的“三觀”,帶著抵觸情緒很難去對待意見。:)

1. 正面看待別人的意見

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

如何成為更具同理心的設(shè)計師

藍(lán)藍(lán)設(shè)計的小編

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

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

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

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

如何做一個會賺錢的優(yōu)秀網(wǎng)頁設(shè)計師

藍(lán)藍(lán)設(shè)計的小編

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

那么你呢?

%tutke

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

估計你還沒有頭緒?

日歷

鏈接

個人資料

存檔