2014-4-10 藍(lán)藍(lán)設(shè)計的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計( 91whvog3.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
來源:http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
網(wǎng)頁設(shè)計的要點之一便是一致性,UI設(shè)計師首先需要了解一致性,然后再致力于構(gòu)建頁面元素之間的聯(lián)系。
網(wǎng)頁設(shè)計的目標(biāo)是將網(wǎng)頁和用戶連結(jié),通過設(shè)計(順手的導(dǎo)航、流暢的交互)讓用戶對網(wǎng)站產(chǎn)生信任。盡管網(wǎng)頁界面設(shè)計以功能性為主,但依然可以為用戶提供優(yōu)良的用戶體驗。
客戶,用戶以及一致性:
具備一致性特質(zhì)的網(wǎng)頁能夠幫助推廣品牌、清晰傳遞信息。客戶在意的是設(shè)計能否有效傳達(dá)他們的品牌、信息,在意設(shè)計是否能夠在消費者中建立一種對品牌的信任感。
如果品牌信息傳遞的不夠一致、或者晦澀難懂,那么消費者很難對品牌產(chǎn)生信任感,這就影響到了客戶的銷售額和業(yè)績。
一致性與設(shè)計師個人推廣:
作為設(shè)計師,你自己就是一個品牌,你需要仔細(xì)思量一下該要如何打造一致性的”個人品牌”。如果你的個人博客設(shè)計的風(fēng)格一致,分量充足,案例豐富,那么客戶很容易就找上門來。
簡要概括一致性:
布局井然有序,主頁面、子頁面有章可循,配色方案自成體系,交互方式統(tǒng)一協(xié)調(diào),與內(nèi)容深度聯(lián)系————這就是一致性。
gov.uk的網(wǎng)頁設(shè)計非常一致,讓人感覺很嚴(yán)謹(jǐn),配色也非常的堅實,這很符合政府類網(wǎng)站的形象。
設(shè)計風(fēng)格與品牌形象的一致性:
網(wǎng)絡(luò)是新媒體,但設(shè)計模式并非全新,別忘了,曾經(jīng)的網(wǎng)頁設(shè)計還要遵循印刷設(shè)計中的一些規(guī)則(現(xiàn)在依然深受影響)。好的設(shè)計師能夠?qū)⒕W(wǎng)絡(luò)新形式與傳統(tǒng)無縫結(jié)合。也就是說,某些地方要做到有所聯(lián)系。
例如,如果你要為傳統(tǒng)的商城設(shè)計一款網(wǎng)站,那么網(wǎng)頁必須能夠起到承載品牌信息的作用,而且操作流暢,界面清爽。
其次,還要保證跟現(xiàn)實生活中的品牌形象有所聯(lián)系。(這樣即便用戶沒有瀏覽過該品牌的網(wǎng)站,看了你的設(shè)計后也會想,”啊,這是某某品牌的網(wǎng)站。”)
還是那句老話,堅實的信任感,這就是目標(biāo)。
視覺的一致性:
你的邊距,各種元素的尺寸、大小是否設(shè)計的一致?
仔細(xì)想來,一致性設(shè)計會極大的改善我們的設(shè)計流程,縮短設(shè)計周期。因為設(shè)計有一套規(guī)范,有章可循自然設(shè)計起來得心應(yīng)手。
交互的一致性:
除了外觀上的考量,在”交互”和”行為”上也要下功夫設(shè)計。仔細(xì)琢磨琢磨,用戶應(yīng)該如何與網(wǎng)頁進(jìn)行交互?用戶進(jìn)行輸入時會呈現(xiàn)何種動態(tài)效果?各個頁面中的交互性也應(yīng)當(dāng)保持一致。
inc 潔凈的感覺和品牌風(fēng)格不謀而合。
說起來容易做起來難,如何打造一致性設(shè)計呢?如何讓視覺形象成為聯(lián)系用戶與品牌的紐帶?
其實上面說的大都是較為空泛的理念,我們設(shè)計師真正能夠把握的,也無非這幾點:
還記得向莎士比亞學(xué)習(xí)!你值得掌握的網(wǎng)頁設(shè)計焦點法 這篇文章嗎?里面提到過,利用色彩、尺寸、視覺層級可以打造出視覺焦點。同樣還是這些東西,這次利用他們打造出網(wǎng)頁設(shè)計的一致性。
優(yōu)秀的體驗設(shè)計來自于對細(xì)節(jié)的追求。我們格外的需要在這些小細(xì)節(jié)上下功夫。
設(shè)計時也要考慮不同頁面之間的一致性,盡管功能不同,但是要大體上(也就是說可以略有變通)保持不同頁面之間視覺風(fēng)格的一致——比如說,Logo和導(dǎo)航的位置。
OnSite這款網(wǎng)頁設(shè)計打造出令人印象深刻的品牌形象,扁平化設(shè)計貫穿于主頁面和子頁面,風(fēng)格大體上相同。
色彩的情緒效應(yīng)想必大家都知道了,大膽的色彩能夠有效的吸引用戶。
但是要注意,一定要注意色彩與品牌間的聯(lián)系。例如,今年極為流行翡翠綠,可是你用翡翠綠為主色給可口可樂設(shè)計網(wǎng)頁,就有點不合適了吧?
任何UI設(shè)計都有自己的基調(diào),設(shè)計的基調(diào)影響了用戶對網(wǎng)頁的印象。在保持一致性的前提加入一點個性化是非常不錯的想法,能夠提高內(nèi)容的表現(xiàn)力。
再想想,某些網(wǎng)站雖然具備一致性,但是風(fēng)格死板,讓用戶感到非常的無趣。如果網(wǎng)頁設(shè)計的很鮮活,很個性化,而且聯(lián)系緊密,用戶首先會感覺非常有趣,其次會想,”嗯,這個網(wǎng)頁的風(fēng)格還挺一致的。”(不要為了一致性而死鉆牛角尖,還要從更整體的角度看待設(shè)計。)
同時也要考慮到用戶的預(yù)期,仔細(xì)思考下網(wǎng)頁是如何與用戶連結(jié)的,考慮下用戶對網(wǎng)站的感覺。
跟上面一樣,不要一味的炮制一致性而忘乎所以,要考慮到用戶,以用戶為中心進(jìn)行設(shè)計
WooThemes視覺風(fēng)格突出,設(shè)計基調(diào)很棒——這種較大型的網(wǎng)站保持一致性很困難,很不好設(shè)計。
我是個列表狂魔,我覺得列表有個好處:讓事情變得更有條理,工作起來循序漸進(jìn)。(不過這也導(dǎo)致了條數(shù)太多,從而略有拖延……總之還是利大于弊的)
嗯,這次列出了一份比較簡單的列表,設(shè)計完后可以看一下。
1.字體:檢查字體是否與整體風(fēng)格相符。不同頁面的垂直閱讀節(jié)奏是否一致?(關(guān)于垂直閱讀節(jié)奏,請看:文字布局心得!提高垂直方向上的閱讀節(jié)奏感 )
2.圖像:圖標(biāo)、圖像的視覺風(fēng)格以及尺寸是否大體一致?和整體風(fēng)格有沖突嗎?按鈕的風(fēng)格統(tǒng)一嗎,是填充式的還是中空式的?
3.色彩:整體色彩感看起來如何?配色風(fēng)格一致嗎?不同顏色之間搭配協(xié)調(diào)嗎?
4.布局:頂部導(dǎo)航和Logo的位置是否相同?行間距、文字與圖像的間距是否一致?整體布局都相似嗎?(當(dāng)然,如果你是高手,善于突破、實驗,也可以不盡相同,推薦看看Laura Kalbag個人網(wǎng)站布局心得)
當(dāng)然,你也可以設(shè)計之前看看這份列表,不過我覺得會影響設(shè)計思路。
理解一致性原則并加以運用,需要一定的設(shè)計基礎(chǔ)。
就像學(xué)習(xí)一套拳法需要動作分解一樣,設(shè)計師首先要熟練掌握每個”小”元素的設(shè)計方法,然后再加以整合,形成”大”層次上的一致性。
希望上面的內(nèi)容會對你有所幫助,希望你在設(shè)計時能夠用到上面那份列表(也可以自己寫份列表),設(shè)計時心中要有”一致性”的理念,日積月累,你會發(fā)現(xiàn)自己的成長。
藍(lán)藍(lán)設(shè)計的小編 http://91whvog3.cn