避免設(shè)計(jì)中的違和感

0 評(píng)論 6661 瀏覽 0 收藏 13 分鐘

始于美的爭(zhēng)論:陽(yáng)春白雪與下里巴人

一個(gè)廣為流傳的關(guān)于手機(jī)的段子:

iOS:游戲拍照發(fā)微博;?安卓:刷機(jī)重啟換電池;??諾記:開(kāi)核桃摔手機(jī)摔手機(jī);??山寨機(jī):鳳凰傳奇、鳳凰傳奇、鳳凰傳奇???梢?jiàn),氣質(zhì),很重要。

陽(yáng)春白雪與下里巴人總是個(gè)合適爭(zhēng)論的話題。設(shè)計(jì)界自然也存在著這樣的風(fēng)格,就先看看這里面幾個(gè)典型的代表吧。

設(shè)計(jì)界的陽(yáng)春白雪——黑粗直加持的細(xì)白美google谷歌。從誕生之初就保持著,主題簡(jiǎn)潔、留白的風(fēng)格。在google+推出后在上不添加了黑粗直的功能項(xiàng)條,并64分,每個(gè)單項(xiàng)功能不做特別突出項(xiàng)。

相反的設(shè)計(jì)界的“鳳凰傳奇”——好123。幾乎是我朝最著名多網(wǎng)址首頁(yè)了,因當(dāng)年捆綁在盜版番茄花園的xp盤(pán)里而奠定了其統(tǒng)治地位。

hao123

設(shè)計(jì)初衷就是把所有你要的都給你扔在一頁(yè)。雖然凌亂,但省卻了用戶手動(dòng)輸入網(wǎng)址的步驟,只要你記得住上面網(wǎng)址位置你就可以獲得便利。而且快捷登陸各大著名郵箱的的設(shè)計(jì)(把@后面的后綴都自動(dòng)寫(xiě)好)在當(dāng)時(shí)確實(shí)是超前的。同時(shí)網(wǎng)站的位置排名很容易成為盈利點(diǎn)。以至于在百度收購(gòu)后,百度也只是對(duì)其logo稍作美化。甚至反噬百度首頁(yè)。

缺點(diǎn)和有點(diǎn)一樣一目了然——丑陋,凌亂,粗放,毫無(wú)品味可言。里面的位置只要稍微有點(diǎn)改變,用戶就暈菜了。其想強(qiáng)調(diào)所有都一步到位,所有項(xiàng)都想突出的風(fēng)格。結(jié)果就是神馬也沒(méi)突出。而今百度首頁(yè)也在向著高大全的方向進(jìn)行了。

 

美,確實(shí)很難量化

那位看官說(shuō)了:”我就覺(jué)得hao12345678奶好看啊。你裝什么高雅?!笨垂僬f(shuō)的沒(méi)錯(cuò),筆者也沒(méi)裝。這里就存在一個(gè)問(wèn)題,就是”美“的特殊性造成的——美,確實(shí)很難量化。

自古,文無(wú)第一,武無(wú)第二。藝術(shù)上,無(wú)論是文學(xué)、音樂(lè)、繪畫(huà),還是戲劇雕塑等,延伸至現(xiàn)代工業(yè)設(shè)計(jì),從來(lái)都很難直接比較其高低,特別是用量化的方式去衡量。

然而美,卻又是神,賜予所有人最平等的東西。每個(gè)人都可以去欣賞美、評(píng)價(jià)美、創(chuàng)造美。低門(mén)檻、標(biāo)準(zhǔn)的不確定性,就給對(duì)藝術(shù)作品上的鑒賞和評(píng)判帶來(lái)了很多和爭(zhēng)論的空間。UI設(shè)計(jì)作為藝術(shù)設(shè)計(jì)的一個(gè)子類(lèi),也自然帶有它父類(lèi)的這一特殊屬性。所以除了美術(shù)人員,幾乎所有成員都可以參與與評(píng)價(jià)美工設(shè)計(jì)GGMM的勞動(dòng)成果。人人心中都有一評(píng)價(jià),公婆各有理,一時(shí)難以界定。

真的無(wú)法界定么?然而,美卻能在一定尺度上呈現(xiàn)明顯的方向性。

雖然美很難量化。細(xì)枝末節(jié)的地方,如這個(gè)logo放在A處好還是B處好的問(wèn)題雖然很難有判定。但,美卻能在一定尺度上呈現(xiàn)一個(gè)明顯的方向性的。?這里引述作家馮唐的一句話。馮唐在回復(fù)韓寒的公開(kāi)信中寫(xiě)了這樣一段話:?? ?

“文學(xué)是雕蟲(chóng)小道,是窄門(mén)。文學(xué)的標(biāo)準(zhǔn)的確很難量化,但是文學(xué)的確有一條金線,一部作品達(dá)到了就是達(dá)到了,沒(méi)達(dá)到就是沒(méi)達(dá)到,對(duì)于門(mén)外人,若隱若現(xiàn),對(duì)于明眼人,一清二楚,洞若觀火。文章千古事,得失寸之心?!?em>?? ?

同樣,美和設(shè)計(jì)也存在著這樣一條金線。產(chǎn)品能否達(dá)到這樣一條金線,最終會(huì)在市場(chǎng)的接受度上得到反饋。市場(chǎng)是殘酷的。每家大公司都在尋找這條金線并試圖超越它。

三大移動(dòng)平臺(tái)的不同選擇

?iOS

顯然喬布斯領(lǐng)導(dǎo)下的蘋(píng)果公司一直在這條線之上。?工業(yè)設(shè)計(jì)與美學(xué)設(shè)計(jì),結(jié)合的最好的公司,溢美之詞自是不必多說(shuō)??垂賯?cè)缫讶缋棕灦?。只說(shuō)一點(diǎn)。是蘋(píng)果,讓中國(guó)的多數(shù)土鱉企業(yè)主第一次認(rèn)識(shí)到,產(chǎn)品與界面的美觀,人性化的交互也能創(chuàng)造價(jià)值,甚至創(chuàng)造巨大的價(jià)值。僅憑這一點(diǎn),就足以為后世憑吊。雖然蘋(píng)果今天本身面臨不少問(wèn)題。但蘋(píng)果的問(wèn)題是稱(chēng)王后求穩(wěn)心態(tài)導(dǎo)致創(chuàng)新步伐減慢,加之審美疲勞和反主流情緒的共同作用。而非蘋(píng)果本身失去原來(lái)審美的標(biāo)準(zhǔn)。

相信你也一定看過(guò)很多關(guān)于iOS設(shè)計(jì)規(guī)范的文字。但為了說(shuō)明后面的問(wèn)題這里還要簡(jiǎn)單介紹兩句iOS的主題風(fēng)格。?蘋(píng)果的圓角矩形的logo在今天已經(jīng)稱(chēng)為一種繞不開(kāi)的必然。老羅直呼為UI設(shè)計(jì)史的災(zāi)難。這種設(shè)計(jì)讓在小屏幕而秘籍排列的圖標(biāo),看上去也規(guī)矩整齊。

iOS規(guī)范主屏? ?iOS規(guī)范鍵盤(pán)

蘋(píng)果在全局通用模擬為90度的上照下光的設(shè)定。logo也就設(shè)計(jì)成這種角度的反光。另外注意按鈕和鍵盤(pán)的陰影,也都秉承著這一設(shè)計(jì)。

還有蘋(píng)果標(biāo)志的漸變NavigationBar 的皮膚

iOS規(guī)范2

同時(shí),蘋(píng)果采用一種稱(chēng)為skeuomorphic(模仿現(xiàn)實(shí)物品)的風(fēng)格。

iOS規(guī)范1

Android

直到4.0的時(shí)候,界面才算稍微能看一看。最被廣泛的2.3系列的版本的默認(rèn)界面簡(jiǎn)直丑的一逼,不堪入目。Android的系統(tǒng)應(yīng)用直到4.0版本還多數(shù)為雞肋??墒鞘袌?chǎng)和用戶需要一個(gè)非iOS的選擇。也只能感嘆生逢其時(shí)是多么重要。android的很多操作邏輯在今天依然很混亂。但其在4.0推廣的扁平化的設(shè)計(jì)風(fēng)格卻影響越發(fā)的擴(kuò)大。在iOS面臨審美疲勞的時(shí)候更是承基而上。?

android規(guī)范2

android規(guī)范

扁平化的按鈕,扁平化的通知欄。大色塊的直鋪。圖標(biāo)圓角小于iOS,大于win。

WindowsPhone??

把扁平化進(jìn)一步發(fā)展,一扁到底。更強(qiáng)調(diào)顏色統(tǒng)一化。圖標(biāo)完全無(wú)圓角。用帶有設(shè)計(jì)感的分割體現(xiàn)藝術(shù)感。第一眼很吸引人。問(wèn)題是如果不按照win的設(shè)計(jì)規(guī)范來(lái)做的logo,會(huì)讓整個(gè)界面特別突兀。

winPhone

 

主流app們?nèi)绾芜m應(yīng)

面對(duì)這三家主流平臺(tái)的設(shè)計(jì)規(guī)范。廠家公司們是如何做的呢。

第一階段大家主要以iOS為主,android為輔。首先都是以iOS為主力運(yùn)行平臺(tái)。安裝iOS規(guī)范來(lái)設(shè)計(jì)。然后才推出android版的。有的會(huì)做改動(dòng),有的干脆原UI移植。如微信:即使是最新版本,android版微信基本承襲了iOS版的UI界面。

微信iOS微信android

第二階段,有實(shí)力的公司已經(jīng)可以分別針對(duì)不同的平臺(tái)設(shè)計(jì)規(guī)范推出不同的UI界面。但是問(wèn)題也一面了然。增加運(yùn)營(yíng)成本,影響品牌統(tǒng)一化。如陌陌早期版本

陌陌老板iOS陌陌老板android

第三階段,發(fā)現(xiàn)了第二階段的問(wèn)題后。個(gè)大廠商開(kāi)始慢慢游離余各個(gè)平臺(tái)的設(shè)計(jì)規(guī)范。轉(zhuǎn)而采用類(lèi)似幾家的規(guī)范中和的風(fēng)格。使軟件在各個(gè)平臺(tái)下統(tǒng)一,又不會(huì)在該平臺(tái)下顯的違和感十足。如啪啪、淘寶等:

淘寶? ?啪啪截圖

在網(wǎng)頁(yè)端:主流網(wǎng)站適應(yīng)寬屏,扁平化的按鈕,更大的留白,更淺的漸變,一賬戶通用,信息流瀑布流的使用都是目前的趨勢(shì)。網(wǎng)頁(yè)端總體上是在hao123和google的折中,找一個(gè)平衡點(diǎn)。四大門(mén)戶其中有三家在改版后都是這樣來(lái)做的。相比之下搜狐依然是老版本,還沒(méi)有進(jìn)行改版。老版在今天看來(lái)凌亂而且過(guò)時(shí):

搜狐

網(wǎng)易

騰訊

sina

避免UI中的違和感

違和感,就是不適應(yīng)不舒服。穿西服領(lǐng)帶配籃球鞋,山寨范兒十足。這里也舉個(gè)反例。zaker 的iOS版。用window8的風(fēng)格??粗拖裨贛ac上用xp一樣無(wú)比的違和。在android上用iOS同樣在氣質(zhì)上也會(huì)用種強(qiáng)烈的山寨感。

zaker

再舉幾個(gè)正向的例子,比如fuubo?優(yōu)酷iOS新版:

?fuubo??winPhone

未來(lái)的產(chǎn)品趨勢(shì)正在向多屏幕,多場(chǎng)景,多平臺(tái)過(guò)度。應(yīng)對(duì)這一變化而產(chǎn)生的是,多平臺(tái)下同一產(chǎn)品的風(fēng)格統(tǒng)一化。在同一化的大前提下適應(yīng)各家的設(shè)計(jì)規(guī)范形成差異化。

結(jié)語(yǔ)

來(lái)源:互聯(lián)網(wǎng)er的早讀課

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!