設(shè)計中的一致性會在無形之中使你的設(shè)計效果更加優(yōu)秀,也更易于用戶使用。今天這篇教程免費(fèi)提供了7個提升設(shè)計一致性的小貼士,會讓您的設(shè)計作品看上去更專業(yè),適用于視覺/UI/品牌設(shè)計等。
對于一致性來說,在某些些情況下,要理解并實(shí)踐它幾乎是無需傷腦的事情,而在其他情況下,理解起來可能會有點(diǎn)復(fù)雜。簡單來說,一致性是交互設(shè)計中的一種基本規(guī)范,它涉及到一份設(shè)計中的所有元素,它能夠用在一場活動方案的策劃中,也能夠用在獨(dú)立品牌的設(shè)計中,總之就是要創(chuàng)建出一個可用性高而又統(tǒng)一協(xié)調(diào)的產(chǎn)品。下面的這些例子我們要特別注意,因?yàn)槊恳粋€品牌在一致性和可用性設(shè)計方面都是佼佼者。
一致性方面網(wǎng)易的產(chǎn)品做得非常棒,來看看它的設(shè)計規(guī)范就知道咯:
1、主色、次色以及整體的色調(diào)
為何關(guān)于如何創(chuàng)建一個優(yōu)秀調(diào)色板有如此多的資料?這是因?yàn)轭伾軌蜃鳛閭鬟f品牌效應(yīng)的關(guān)鍵視覺因素之一。
一個特殊的顏色標(biāo)識符可以快速的告訴用戶你是誰。想想這個世界中的那些大品牌——Coca-Cola, Facebook,T-Mobile ,它們無一不具有獨(dú)特的品牌色。如果沒有這些顏色,你還能認(rèn)出他們嗎?
另外,使用好顏色也可以幫助用戶在使用你的網(wǎng)站過程中始終知道他們是不是在正確的位置。試想如果每個點(diǎn)擊動作都把你帶向一個使用新色調(diào)的頁面,你還會疑惑自己究竟是不是在正確的地方嗎?
為了創(chuàng)建一個非常棒的調(diào)色板,你應(yīng)該先挑選出一個主要色,然后使用色彩理論添加一到兩個次要色。再針對每種顏色設(shè)定一組樣式和使用規(guī)則,在之后的設(shè)計中堅持使用這些規(guī)則便能保證你在色彩上的一致性。
想知道大品牌都用什么顏色?
另外當(dāng)您在色彩搭配和色彩命名沒有靈感的時候,也可以前往《中國/日本傳統(tǒng)色彩》。點(diǎn)擊色彩可直接吸取色值喲。
2、字體大小、間距和位置
如同顏色應(yīng)該是基于一定樣式規(guī)則的調(diào)色板,字體也是需要設(shè)定規(guī)則的,而且思路也是一樣的。
(1)選擇一個主要字體和大小。
(2)選擇次要字體和大小。
相比于顏色來說,字體的設(shè)置規(guī)則可能會稍微復(fù)雜一些。 對于 web 端的樣式風(fēng)格來說,你應(yīng)該使用 CSS 來設(shè)置元素的大小,間距和位置,以便每個標(biāo)簽(如h1,h2,h3,body等)調(diào)用正確的屬性值。
在一個相對固定的位置顯示的字體,如導(dǎo)航中中的字體,應(yīng)該始終保持一致性。如果每個導(dǎo)航元素都采用不相同的字體,用戶將會感到相當(dāng)?shù)睦Щ?。這種一致性規(guī)則應(yīng)該貫穿整個網(wǎng)站,所有相似的項(xiàng)目中應(yīng)該使用相同的字體形式。
3、元素的尺寸大小和關(guān)系
你設(shè)計的界面元素尺寸有多大?所有的按鈕都是一樣大嗎?標(biāo)題和圖片大小又是如何?
元素的大小應(yīng)該由其風(fēng)格決定,同一元素尺寸大小應(yīng)該保持一致。
元素使用一致的尺寸大小,并且不同元素間的關(guān)系也保持一致,便能幫助用戶理解你在設(shè)計上所使用的一致性模式,并創(chuàng)建出一個流暢的視覺觀感,達(dá)到一種和諧而平衡的效果。
4、間距留白
跟元素的尺寸大小同等重要的還有元素間的留白。一個元素看起來毫無任何組織和規(guī)則,能分散人們的注意力——比如一些照片重疊而其他的則互相之間留有大量的間距。
創(chuàng)建并堅持于一種通用的留白規(guī)則的最好方法是使用柵格系統(tǒng),該系統(tǒng)中那些無形的線條將幫助你決定在哪里放置以及如何放置一個元素,從而使得每一個像文本、按鈕、圖片這樣的獨(dú)立元素都能夠表現(xiàn)的十分協(xié)調(diào)。
在你考慮留白設(shè)計時,一定不能忘了去檢查在垂直和水平方向上的一致性。既要留意那些相似元素的關(guān)系也不要疏忽那些不同元素間的關(guān)系。
5、跨媒介的視覺效果
品牌的視覺效果,比如平面圖和插畫,都應(yīng)該兼容于不同媒介。無論你的設(shè)計是面向一個網(wǎng)站或者宣傳手冊,廣告牌或社會化媒體,品牌的視覺效果都不應(yīng)該隨媒介的變化而改變。
這通常涉及到要使用一組通用的圖片處理方式。有些品牌對于如何正確的傳達(dá)視覺效果會有一些明確的細(xì)則——比如色彩疊加或者水印效果以及圖片長寬比設(shè)置等等。不管你要設(shè)計的樣式究竟如何,都要牢記的一點(diǎn)就是不管將來把它放在哪個媒介上,它都應(yīng)該正常的傳達(dá)出應(yīng)有的效果才對。
為了最有效的做好這項(xiàng)工作,你最好創(chuàng)建一個可視化的圖像集,收集大量的高質(zhì)量,高分辨率的圖像以方便你的重復(fù)使用。
6、工作自然的用戶模式
你的設(shè)計應(yīng)該跟現(xiàn)有類似的設(shè)計按著相同的方式發(fā)揮作用,并遵循那些公認(rèn)的用戶模式。設(shè)計師們往往想要做些違背事物自然規(guī)律、與眾不同的事情,你千萬不要掉入這個陷阱。
如果一個網(wǎng)站或者應(yīng)用程序亦或是任何印制元素能按著用戶期待的方式工作,那么他們之間便能輕而易舉的產(chǎn)生交互。這因?yàn)閭€時候,用戶本身清楚的知道自己要做什么以及該如何達(dá)到目標(biāo),而設(shè)計本身則變?yōu)橐恢粺o形之中指引用戶方向的手(其實(shí)這也正應(yīng)該是一個設(shè)計師的真實(shí)目標(biāo)才對)。
這里有四種類型被普遍接受的設(shè)計模式值得我們來思考:
(1)內(nèi)容模式:設(shè)計樣式和內(nèi)容的情感語氣以及你的品牌。
(2)標(biāo)記模式:在設(shè)計整個網(wǎng)站頁面時,你需要用到的 HTML 和 CSS 。
(3)設(shè)計模式:每一個元素的外觀和所有相關(guān)的風(fēng)格。
(4)用戶模式:用戶如何與設(shè)計元素,如按鈕、菜單或圖標(biāo)產(chǎn)生交互。
7、一致的界面元素
雖說這不是粘性導(dǎo)航,但是思路相似。
對于你的網(wǎng)站來講,其中的每一個交互動作和界面元素應(yīng)該以同樣的方式工作。
(1)鏈接直接在當(dāng)前標(biāo)簽頁打開或在新的標(biāo)簽頁中打開(為每個鏈接選擇一個相同的打開方式)。
(2)按鈕自始至終采用相同的顏色。
(3)導(dǎo)航位置固定且選項(xiàng)不變。
(4)頁腳和側(cè)邊欄應(yīng)持有一個特定的位置和大小(不應(yīng)使頁腳在一個頁面上巨大而在另一個頁面很小)。
(5)所有圖標(biāo)易于識別,且其指向符合用戶的預(yù)期。
(6)可點(diǎn)擊的元素應(yīng)該總是可點(diǎn)擊的(如有鏈接的圖片)。
上班列出的這幾項(xiàng)展示了所有你在考慮用戶粘性和網(wǎng)站可用性時需注意的一些細(xì)節(jié)。一定要記住,如果你允許一個元素能執(zhí)行一個動作,元素本身的樣式和交互動作就應(yīng)該是統(tǒng)一的。
結(jié)論
設(shè)計上的一致性能夠創(chuàng)造出符合用戶心理模型的產(chǎn)品結(jié)構(gòu)。它也能創(chuàng)建一個有助于提升產(chǎn)品可用性,用戶能夠理解并愿意與之交互的框架。
對每個項(xiàng)目來講,一致性開始于一些列的規(guī)則和樣式指南。即使你是單兵作戰(zhàn),也一定要先創(chuàng)建出一套規(guī)則,指出在設(shè)計中該如何使用顏色、字體、尺寸、間距、界面元素以及交互動作等等。這種做法將會加快你的設(shè)計進(jìn)程并讓你設(shè)計出更具可用性的好設(shè)計。
本文來自創(chuàng)新互聯(lián)品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)
標(biāo)簽:創(chuàng)新互聯(lián),重慶網(wǎng)站建設(shè),成都網(wǎng)頁設(shè)計,成都網(wǎng)站設(shè)計
標(biāo)題名稱:為什么你的設(shè)計作品看上去不夠?qū)I(yè)?
本文URL:http://muchs.cn/news8/171758.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、網(wǎng)站排名、建站公司、網(wǎng)站設(shè)計公司、網(wǎng)站營銷、動態(tài)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)