2015-2-10 藍(lán)藍(lán)設(shè)計(jì)的小編
藍(lán)藍(lán)設(shè)計(jì)( m.miumiuwan.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源:http://www.uehtml.com/post/22031/
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
統(tǒng)一的力量是強(qiáng)大的。作為人類,在日?;顒?dòng)中,我們潛意識(shí)期望某種協(xié)調(diào)和秩序。世上每個(gè)禁行標(biāo)記看起來(lái)都很像,這是有原因的。我在澳大利亞時(shí),學(xué)著在道路另一側(cè)駕駛就已經(jīng)很艱難了。想象一下,如果每個(gè)城市都有自己特定的禁行標(biāo)志——紫色霓虹燈禁行標(biāo)志——那會(huì)是什么情況!某種程度上來(lái)說(shuō),我們靠一致性來(lái)使自己感到平常和舒適。
我們會(huì)注意到相互迥異的事物,這可能讓人沮喪和迷惑。但有時(shí)又會(huì)讓人耳目一新、為之著迷。我愛(ài)星巴克,我會(huì)本能地購(gòu)買咖啡,動(dòng)作一氣呵成。領(lǐng)取我的白色超大杯咖啡時(shí),也沒(méi)有絲毫畏縮。忽然,在十一月的某天,我手捧著一杯迷人的紅色假日杯,上面有一些令人感到安逸的冬季圖案。白色的杯子星巴克已經(jīng)使用多年,沒(méi)有什么打破過(guò)這一傳統(tǒng),但有時(shí)制造點(diǎn)混亂也不錯(cuò)。它能通過(guò)人們不熟悉的方式,吸引和迷住顧客。
所有這些,也發(fā)生在我們與科技的關(guān)系中。作為設(shè)計(jì)師,我們應(yīng)該擁抱統(tǒng)一的力量。了解何時(shí)應(yīng)該嚴(yán)格遵循風(fēng)格指南,何時(shí)運(yùn)用創(chuàng)意打破陳規(guī),這是非常有益的。
我們會(huì)注意到相互迥異的事物,這可能讓人沮喪和迷惑。但有時(shí)又會(huì)讓人耳目一新、為之著迷。
構(gòu)建一致性
設(shè)計(jì)是有難度的,尤其在項(xiàng)目的起步階段。有這么多點(diǎn)子,要篩選如此多種字體組合、配色方案、圖標(biāo)和按鈕樣式、排版趨勢(shì)、圖片處理方式。理想情況下,所有這些元素相互配合,向你的用戶傳達(dá)出清晰的訊息。但是要把它們恰當(dāng)?shù)叵嗷リP(guān)聯(lián)起來(lái),其中困難重重。
雖然這很明顯,我們還是迅速回顧一下統(tǒng)一的基本要點(diǎn)。要構(gòu)建一致性,我們要牢記以下元素:
色彩:主色、輔助色、次要顏色,配色方案
字體:標(biāo)題、正文、手書字體,還有它們之間的層次與位置
視覺(jué)元素:圖標(biāo)集、按鈕、照片的處理、插畫
排版:導(dǎo)航/菜單的位置、柵格結(jié)構(gòu),還有響應(yīng)式變換
交互:表單元素、對(duì)話框、動(dòng)畫、過(guò)渡效果、菜單等
下面這些案例中,樣式庫(kù)和風(fēng)格指南都執(zhí)行得很到位:
在設(shè)計(jì)中構(gòu)建統(tǒng)一,有助于強(qiáng)化品牌,并使品牌信息保持清晰。在顏色、照片、字體、插畫、圖標(biāo)等元素間規(guī)定統(tǒng)一關(guān)系,決定了用戶如何與品牌建立聯(lián)系、感受如何,還有如何使用。
這些框架和模式一旦成熟,確立下來(lái)了,懷著一致性進(jìn)行設(shè)計(jì)應(yīng)該相當(dāng)簡(jiǎn)單。這會(huì)取悅用戶。統(tǒng)一的界面學(xué)習(xí)成本更低,因?yàn)橛脩艨梢詫⑺麄兊睦斫廪D(zhuǎn)移至其他界面,讓整個(gè)體驗(yàn)更加流暢。易于理解促成了信任和舒適,會(huì)使用戶更加投入(并轉(zhuǎn)化為顧客)。
在設(shè)計(jì)中構(gòu)建統(tǒng)一,有助于強(qiáng)化品牌,并讓品牌信息保持清晰。
別忽略了用戶
在設(shè)計(jì)中也有反對(duì)統(tǒng)一的聲音。其中之一,是很多設(shè)計(jì)師過(guò)于注重新設(shè)計(jì)與舊設(shè)計(jì)是否一致,而忽略了新設(shè)計(jì)是否符合目標(biāo)用戶當(dāng)下的理解(Spool, 2005)。
每個(gè)按鈕都要是藍(lán)色的嗎?每個(gè)頁(yè)面都需要搜索框嗎?各處的頁(yè)尾都要保持一致嗎?正文字號(hào)永遠(yuǎn)是14像素嗎?這些取決于具體情況。用戶所處的環(huán)境通常應(yīng)該先于一致性。
我們創(chuàng)建的風(fēng)格指南和樣式庫(kù),并非不容置疑。除了統(tǒng)一外,還有界面設(shè)計(jì)的原則,有時(shí)候這些原則應(yīng)該優(yōu)先于一致性。底線是:我們應(yīng)該努力為用戶提供最好的體驗(yàn),有時(shí)這就意味著,要為其他某方面犧牲一致性。
少關(guān)心“我的設(shè)計(jì)與其他地方是否統(tǒng)一?”,多關(guān)心“我的設(shè)計(jì)是否吻合我們之前提供的用戶體驗(yàn)?”。統(tǒng)一的設(shè)計(jì)讓用戶自信——用戶會(huì)期望它的表現(xiàn)與之前體驗(yàn)過(guò)的一致。
除了統(tǒng)一外,還有界面設(shè)計(jì)的原則,有時(shí)候這些原則應(yīng)該優(yōu)先于一致性。
打破規(guī)則
還有一股邪惡勢(shì)力在與一致性抗?fàn)?/span>,這就是設(shè)計(jì)創(chuàng)新的自然動(dòng)力。任何時(shí)候我們都希望表現(xiàn)出創(chuàng)造力。在確定的風(fēng)格指南或樣式結(jié)構(gòu)框架內(nèi)設(shè)計(jì),真的很令人沮喪。別擔(dān)心,我們可以利用這一點(diǎn)。
在使整個(gè)界面變得一板一眼之前,牢記矛盾性的利用價(jià)值。迥異的元素和表現(xiàn)會(huì)吸引注意力——你若想讓特殊元素被注意到,這就很管用。使用一種新的顏色,或是特殊的布局,能讓用戶從潛意識(shí)中驚醒。我愛(ài)把這種策略稱作矛盾。
迥異的元素,在銷售或追求顧客轉(zhuǎn)化方面極其有效。我們可以做些小動(dòng)作來(lái)擾亂常規(guī)體驗(yàn):
增加新的說(shuō)明元素
改變排版和焦點(diǎn)區(qū)域
顯著改變標(biāo)題字號(hào)
引入新的照片處理方式
大膽配色
Classy的登錄注冊(cè)頁(yè)面,排版和樣式看上去和主頁(yè)、探索和公司介紹頁(yè)面完全不同。在這些頁(yè)面上,我們可以推測(cè)出用戶的意圖,也不希望有不必要的元素混雜其中。如果為了與其他頁(yè)面保持統(tǒng)一,在此完完整整加入頂部導(dǎo)航、搜索和頁(yè)尾,那就太愚蠢了。
其他一些重大的迥異之處:
比如Campaign Monitor,只在Customers頁(yè)面的焦點(diǎn)區(qū)域用了動(dòng)畫效果。
Mailchimp's SNAP的app頁(yè)面,交互和動(dòng)畫有別于其他頁(yè)面。
最后的思考
優(yōu)秀的設(shè)計(jì)師會(huì)明智地運(yùn)用統(tǒng)一。大多時(shí)候,設(shè)計(jì)師必須努力實(shí)現(xiàn)一致和統(tǒng)一,來(lái)盡可能創(chuàng)造最易用的界面。但是,一致性原則不能盲從。熟練的設(shè)計(jì)師不僅學(xué)著遵循這些原則,還會(huì)徹底地檢驗(yàn)它們,并且學(xué)會(huì)何時(shí)以有意義的、目的導(dǎo)向的方式打破原則。
良師益友Ralph Waldo Emerson說(shuō)得很好——“頭腦簡(jiǎn)單者才需要傻傻地保持統(tǒng)一。”
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.miumiuwan.com