手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

App的視覺(jué)美成因分析

2018-7-19    資深UI設(shè)計(jì)者



如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在做UI設(shè)計(jì)之初,我就有跟蹤一些app版本和更新的習(xí)慣。在互聯(lián)網(wǎng)行業(yè)工作久了,我總是會(huì)從他們每一個(gè)版本的產(chǎn)品形態(tài)去揣測(cè)這個(gè)公司的動(dòng)態(tài)??吹揭恍┕δ芎徒换c(diǎn),我會(huì)設(shè)身處地地思考如果我是他們的產(chǎn)品設(shè)計(jì)師應(yīng)該如何處理;遇見(jiàn)一些深得我心的功能點(diǎn),我也總是有一種和他們的產(chǎn)品設(shè)計(jì)師惺惺相惜的江湖感情。反正久而久之,我邊猜測(cè)邊總結(jié),也是養(yǎng)成了自己的一套“歪門(mén)邪道”的方法論。




言歸正傳,我們來(lái)看這一篇文章的內(nèi)容。


時(shí)間來(lái)到了2017年,手機(jī)空間越來(lái)越大,大家的手機(jī)中也裝了越來(lái)越多的app。很多時(shí)候,當(dāng)拿起一個(gè)朋友的手機(jī),看他手機(jī)里都有哪些應(yīng)用,這些應(yīng)用的優(yōu)先級(jí)是如何排布的,我經(jīng)常會(huì)從中得出關(guān)于這個(gè)人的另一層線索。


比如一個(gè)人手機(jī)里優(yōu)先位置上有脈脈、知乎、豆瓣、一個(gè)ONE、單讀這幾個(gè)app,那我可以推測(cè)這個(gè)人一定是具備文藝屬性的互聯(lián)網(wǎng)從業(yè)者。


比如一個(gè)人手機(jī)封面是吳亦凡或者鹿晗,手機(jī)里優(yōu)先位置上有優(yōu)酷、愛(ài)奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆a(bǔ)pp,就可以看出這是一位愛(ài)綜藝、愛(ài)追星、愛(ài)剁手的小姑娘。

……



 1. 意識(shí)是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一



如果說(shuō)2013~2015年app的 UI設(shè)計(jì)上充斥了很多同質(zhì)化產(chǎn)品的話,到了2017年,UI設(shè)計(jì)師們?cè)赿ribbble和behance的風(fēng)格影響下,產(chǎn)品的設(shè)計(jì)有了更多的發(fā)展空間。我們不得不說(shuō)的是,現(xiàn)在的app比之前越來(lái)越好看和越來(lái)越好用了。


如下圖所示我隨意截取了九個(gè)我自己覺(jué)得UI很棒的產(chǎn)品和大家分享,他們分別是Enjoy、單讀、Artand、Airbnb、一個(gè)ONE、Gilt、良倉(cāng)、Zeen、和氧氣。

Image title

Image title

Image title


那這里有一個(gè)關(guān)鍵的問(wèn)題就出現(xiàn)了,為什么有些app,普通用戶(hù)一打開(kāi)就自然而然地覺(jué)得它很美?用戶(hù)這種“覺(jué)得它很美”的意識(shí)到底是從哪兒來(lái)的?



在此之前,我先來(lái)說(shuō)兩組哲學(xué)概念。


意識(shí)是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一。(馬克思主義哲學(xué))

內(nèi)容決定形式,形式反作用于內(nèi)容。(黑格爾唯心主義哲學(xué))



為了闡述用戶(hù)這種“覺(jué)得它很美”的意識(shí)到底是從哪兒來(lái)的,就必須要了解app中“內(nèi)容”和“形式”之間的關(guān)系。那我們不妨來(lái)看一下什么叫內(nèi)容,什么叫形式。



2.內(nèi)容


如果斗膽給app設(shè)計(jì)工作中的“內(nèi)容”下一個(gè)定義的話,我大概會(huì)說(shuō):內(nèi)容是集成在app中,所有可被感知的圖片、文字、聲音的合集。這里之所以說(shuō)是可被感知的,主要是從用戶(hù)層面上看,忽略了用戶(hù)不可感知的“代碼”層面。



那么我們有必要搞清楚的是,一個(gè)app的內(nèi)容到底是如何產(chǎn)生的?也就是一個(gè)app到底是如何產(chǎn)生的?



那這里我不妨展開(kāi)一下,假設(shè)我是一個(gè)產(chǎn)品設(shè)計(jì)師,有一天CEO告訴我最近想做一個(gè)電商app。(這里我假設(shè)我們公司很有實(shí)力,忽略了市場(chǎng)和運(yùn)營(yíng)、渠道和資金上的問(wèn)題,只考慮產(chǎn)品設(shè)計(jì)方面。)


那這個(gè)時(shí)候我會(huì)問(wèn)老板:“老板,你做電商類(lèi)app,是想做平臺(tái)類(lèi)的呢還是做垂直的呢?你可想好了啊,你做平臺(tái)類(lèi)的想要從淘寶、京東分份額的話,那你必須要有自己的特色。比如國(guó)內(nèi)app‘xx’、‘xx’和‘xx’、他們都有自己的特色。或者說(shuō)你是想做垂直一些的么?比如‘xx’是專(zhuān)門(mén)做化妝品領(lǐng)域的,比如‘xx’是專(zhuān)門(mén)做美食的?!比缓罄习灞晃乙环榜Z化”之后得出的結(jié)論是我們來(lái)做一個(gè)美食電商,但是這個(gè)美食電商不會(huì)對(duì)標(biāo)Enjoy那樣的高檔人群,而是做成類(lèi)似于“什么值得吃”這樣的大眾場(chǎng)景。


好,故事講完了,現(xiàn)在我化身為這個(gè)產(chǎn)品設(shè)計(jì)師,簡(jiǎn)短片面地闡述我的思考過(guò)程:首先我拿到的目標(biāo)是做一款“什么值得吃”app,它的目標(biāo)人群是全中國(guó)吃貨,且要滿足吃貨推薦、評(píng)價(jià)和在線下單支付(前期無(wú)法做渠道的話需要跳轉(zhuǎn)淘寶京東鏈接)等功能。



經(jīng)過(guò)一番思考,我認(rèn)為這款app的MVP狀態(tài)應(yīng)該需要如下圖所示的功能。

Image title


這里簡(jiǎn)單說(shuō)一下MVP是啥意思?!癕VP=Minimum Viable product(最小可行產(chǎn)品)”是《精益創(chuàng)業(yè)》的作者埃里克·萊斯提出提出的一個(gè)概念,字面意思就是可保證產(chǎn)品正常使用(主邏輯閉環(huán))的最小產(chǎn)品單元。MVP又分為Validating MVP和Invalidating MVP,在這里就不展開(kāi)了。《精益創(chuàng)業(yè)》是一本特別贊的書(shū),推薦大家閱讀。


我設(shè)計(jì)的這個(gè)其實(shí)是Invalidating MVP,大概需要四個(gè)部分。


“推薦”是核心,以帖子形式或者別的什么形式推薦一些東西并附上鏈接。“專(zhuān)題”方面做一些可供運(yùn)營(yíng)和推廣的專(zhuān)題,比如“情人節(jié)送什么巧克力”、“最適合食辣族的幾款辣醬”之類(lèi)?!吧坛恰崩锩鏁?huì)放一些自營(yíng)的物品?!拔业摹崩锩鏁?huì)有我的推薦、我的收藏、我的訂單之類(lèi)的一堆東西。



你們發(fā)現(xiàn)了嗎,其實(shí)這個(gè)時(shí)候,產(chǎn)品設(shè)計(jì)師就已經(jīng)在定義產(chǎn)品的信息架構(gòu)了。


第一,因?yàn)檫@個(gè)app叫”什么值得吃”,那我們是不是還需要推薦一些線下值得吃的店呢?如果做了是不是就和Enjoy同質(zhì)化太嚴(yán)重了?那最好就是先不做。



第二,在推薦這一頁(yè)里面我大概需要什么功能,因?yàn)槊嫦虻膶?duì)象不太像Enjoy那種偏一線城市的人群,那我應(yīng)該用戶(hù)群體同類(lèi)對(duì)標(biāo)到今日頭條這種level的感覺(jué)。



第三,這個(gè)首頁(yè)我是按照各種食品屬性的分類(lèi)來(lái)建立推薦列表呢,還是說(shuō)我按照人的屬性來(lái)建立推薦列表呢?如果是按照食物的分類(lèi)的話,給別人的感覺(jué)可能和淘寶很像,比如我在列表里面看到“巧克力”再點(diǎn)進(jìn)去看巧克力的推薦,和我在“甜品族”這個(gè)人群標(biāo)簽里看到某巧克力好吃,這兩種行為邏輯給用戶(hù)的感覺(jué)完全不同。大家體會(huì)一下,作為“什么值得吃”這款app來(lái)說(shuō),肯定是后者更適合,所以得出結(jié)論是以人的屬性建立推薦列表。(我甚至考慮到了以后迭代未來(lái)功能版本的可能性,比如到時(shí)候每個(gè)人可以有多種身份標(biāo)簽,再去做匹配社交之類(lèi)的。)



好,那我現(xiàn)在關(guān)于產(chǎn)品首頁(yè)大概得出了以下幾點(diǎn)感覺(jué)。


(1)首頁(yè)推薦按照人的屬性標(biāo)簽去區(qū)分推薦列表。

(2)產(chǎn)品風(fēng)格不宜太洋氣(尤其是一定不能像Enjoy那樣使用黑白配色),最好是產(chǎn)品對(duì)標(biāo)今日頭條和微博的感覺(jué),受眾偏向二三四線城市。

(3)每一個(gè)推薦應(yīng)該有收藏、購(gòu)買(mǎi)鏈接等部件,在首頁(yè)上應(yīng)該有專(zhuān)門(mén)為運(yùn)營(yíng)活動(dòng)或者市場(chǎng)換量設(shè)置的入口(可能是banner形式)。

(4)為了不使推薦屬性具有傾向性,每一個(gè)推薦都應(yīng)該盡量層級(jí)平行。(比如“吃辣黨”和“甜品族”就應(yīng)該入口平行。)

(5)一定要保證一個(gè)完整且通順的支付邏輯和用戶(hù)推薦邏輯,這是最基本的兩個(gè)功能。中間可能涉及到推薦里面要有商城鏈接(如果商城沒(méi)有的要跳轉(zhuǎn)淘寶),自己的商城要支持支付寶、微信等支付方式,要有訂單狀態(tài)和退單等一系列功能,余額功能或退款自動(dòng)退回功能二選一(看公司需不需要資金池)。

....(此處省略N條)



其實(shí),app“內(nèi)容”的產(chǎn)生,就是我上述這些奇怪東西的綜合(當(dāng)然其實(shí)并沒(méi)有上述這么簡(jiǎn)單,這個(gè)以后有機(jī)會(huì)細(xì)講),比如我們從上面的論述當(dāng)中,可以歸納出這款“什么值得吃”app的首頁(yè)“推薦”應(yīng)該具有如下信息。

Image title


我寫(xiě)這么多字其實(shí)就是想告訴大家一個(gè)app的“內(nèi)容”是如何產(chǎn)生的,當(dāng)然我這里說(shuō)得十分簡(jiǎn)單,真實(shí)情況可能比這個(gè)復(fù)雜百倍,大家意會(huì)就是了。

好了說(shuō)完了內(nèi)容,我們來(lái)看所謂app中的“形式”又是什么。




3.形式



如果說(shuō)我們把所有集成在app中可感知的圖片、文字、聲音的集合稱(chēng)作app的內(nèi)容的話,那么app的形式就是“承載這些內(nèi)容,使內(nèi)容更好被感知的方式”。



人有五感,包括視覺(jué)、聽(tīng)覺(jué)、嗅覺(jué)、味覺(jué)和觸覺(jué)。而人去和一款手機(jī)應(yīng)用進(jìn)行交互的時(shí)候只會(huì)從視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)(反饋)三個(gè)方面去感知,而觸覺(jué)涉及到交互層面,以后我寫(xiě)到app的交互架構(gòu)的時(shí)候會(huì)詳細(xì)說(shuō)。 聽(tīng)覺(jué)其實(shí)也不是本文重點(diǎn),我舉個(gè)例子一筆帶過(guò)就好了。比如大家都用過(guò)滴滴,滴滴有一個(gè)“內(nèi)容(功能)”是司機(jī)送一個(gè)乘客的過(guò)程中,當(dāng)判斷距離目的地很近的時(shí)候會(huì)默認(rèn)進(jìn)行一個(gè)“下一單的匹配”的功能。我們用滴滴的這個(gè)功能來(lái)對(duì)比手機(jī)游戲里面的“匹配下一局”,我們會(huì)發(fā)現(xiàn)這是幾乎相同的“內(nèi)容”,但是承載形式不一樣。手游是視覺(jué)展現(xiàn),你必須點(diǎn)擊手機(jī)上的“匹配”按鈕,而滴滴因?yàn)榭紤]到司機(jī)在開(kāi)車(chē)很難解放雙手去點(diǎn)擊匹配,所以從產(chǎn)品邏輯上設(shè)計(jì)的是“語(yǔ)音提示+主動(dòng)匹配+手動(dòng)接單”的方式,所以我們總能在快下出租車(chē)的時(shí)候聽(tīng)到司機(jī)手機(jī)上傳出響亮的“開(kāi)始接單啦”語(yǔ)音提示。



本文的重點(diǎn)是視覺(jué)。

可能在大家以往的工作當(dāng)中并不會(huì)關(guān)注一款app原型是怎么樣設(shè)計(jì)出來(lái)的,大家可能只會(huì)關(guān)心我拿到原型以后應(yīng)該如何轉(zhuǎn)化為驚艷的高保真頁(yè)面。

把一個(gè)內(nèi)容整理、排列成一個(gè)app頁(yè)面,就是大家更關(guān)心的“形式”的部分。還是回到上文“什么值得吃”這款虛構(gòu)的app上,綜合上面的觀點(diǎn),我大致能畫(huà)出原型如下圖所示兩種。

Image title


當(dāng)然這個(gè)是最粗糙的原型。(如果各位UI設(shè)計(jì)師在工作中接到了類(lèi)似于這樣的原型那只能說(shuō)心疼你們一秒。)那么問(wèn)題來(lái)了,大家在生活中一定見(jiàn)到過(guò)這兩種原型的app。左邊這個(gè)很常見(jiàn),比如斗魚(yú)tv這些直播平臺(tái),早期閑魚(yú)、網(wǎng)易嚴(yán)選和今日頭條等都是用的這種感覺(jué);右邊這個(gè)就更常見(jiàn)了,不論是點(diǎn)餐平臺(tái)(美團(tuán)、百度、餓了嗎),還是大型電商(京東、淘寶)你都可以看到它。



那么問(wèn)題來(lái)了,嘗試分析一下,上面這兩種形式到底有什么優(yōu)劣呢?


第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制標(biāo)簽(tag)的字?jǐn)?shù),你懂我是什么意思吧?比如今天有個(gè)運(yùn)營(yíng)跳出來(lái)說(shuō)我們做一個(gè)新的標(biāo)簽把名字叫“酸酸甜甜就是我”。產(chǎn)品一定特別崩潰,原因如下圖所示。

Image title

   

第二,由于右邊的標(biāo)簽占據(jù)了推薦貼的位置,導(dǎo)致推薦貼可能沒(méi)有左邊的那種展現(xiàn)形式更加醒目。但是相對(duì)的,右邊的優(yōu)勢(shì)在于,由于豎向排列可以讓一個(gè)屏幕顯示更多的標(biāo)簽,這一點(diǎn)就需要取舍,比如一個(gè)產(chǎn)品的初期沒(méi)準(zhǔn)備放這么多切換標(biāo)簽的話,還是建議用左邊那種。


更深層次的,外賣(mài)產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟?,而且外賣(mài)產(chǎn)品的左側(cè)標(biāo)簽一般是一家店鋪的菜的品類(lèi),用戶(hù)下滑菜品配合點(diǎn)擊品類(lèi),點(diǎn)完即走,很方便(京東和淘寶電商類(lèi)平臺(tái)也是類(lèi)似的)。但是比如早期的今日頭條只能采用左邊的這種形式,因?yàn)轭^條是需要用戶(hù)長(zhǎng)時(shí)間沉浸的,比如用戶(hù)選中一個(gè)“體育”的標(biāo)簽一般要看好久好久,用戶(hù)需要沉浸在這個(gè)標(biāo)簽下的內(nèi)容中,那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓標(biāo)簽常駐屏幕左側(cè)是不合適的。



基于以上分析,作為內(nèi)容+電商平臺(tái)的“什么值得吃”應(yīng)該選用左邊這種設(shè)計(jì)形式。

好,“什么值得吃”這個(gè)虛擬的例子就說(shuō)到這里,主要是讓大家明白內(nèi)容和形式之間的關(guān)系,只有你們明白了這個(gè),才可以正式進(jìn)入本章的主題——app的視覺(jué)美成因分析。




4.app的視覺(jué)美成因分析



首先來(lái)看結(jié)論。一款app讓你感覺(jué)到長(zhǎng)得美,一定是團(tuán)隊(duì)在兩個(gè)方面下功夫了——第一是內(nèi)容的視覺(jué)優(yōu)化,第二是形式的視覺(jué)優(yōu)化。


我先來(lái)給你們看兩張圖,讓你們感受一下什么叫內(nèi)容的視覺(jué)優(yōu)化。

Image title


你們可以看到左右兩張圖,左邊是Enjoy的精選頁(yè),右邊是我隨手糟蹋的,大家會(huì)發(fā)現(xiàn)其實(shí)信息內(nèi)容一模一樣,但是左邊的和右邊的視覺(jué)設(shè)計(jì)差距大家一眼就能看出來(lái)吧。如果出現(xiàn)右邊這樣的UI稿,那只能說(shuō)明這個(gè)團(tuán)隊(duì)在內(nèi)容的視覺(jué)優(yōu)化上面不用心!以上就是內(nèi)容的視覺(jué)優(yōu)化的作用。關(guān)于內(nèi)容當(dāng)中的圖片,其實(shí)大家都有直觀感受:一款app允許用戶(hù)自定義的圖片越多,這款app視覺(jué)就一定越難把控。原因很簡(jiǎn)單,因?yàn)橛脩?hù)自定義的信息里面,文字信息我們是可以通過(guò)限制字段和select(選擇)去控制的,但是對(duì)于圖片來(lái)說(shuō),哪怕控制了用戶(hù)自定義圖片的尺寸,我們也無(wú)法控制這些圖片的質(zhì)量。大家去看一下秒拍這款app,它的框架設(shè)計(jì)做得很棒,包括一些empty status(無(wú)內(nèi)容狀態(tài)頁(yè))的小圖標(biāo)繪制都很棒,但是我們打開(kāi)app的時(shí)候,首頁(yè)的內(nèi)容總是參差不齊,差強(qiáng)人意。同理還有閑魚(yú)這款app, UI框架做得很漂亮,但是內(nèi)容頁(yè)面總會(huì)顯得沒(méi)那么“高大上”。


Enjoy,自如、氧氣、想去以及Gilt、美團(tuán)等這些輕量電商或者租房app都選擇花一大筆成本自己聘請(qǐng)一批或全職或兼職的攝影師的原因,就是為了得到符合自己規(guī)范的優(yōu)質(zhì)內(nèi)容圖片(比如你們?nèi)タ醋匀绲姆吭葱畔⒄掌揪褪悄欠N樣子,氧氣的內(nèi)衣樣片背景永遠(yuǎn)是白色)。


我之前做過(guò)一款旅行游學(xué)類(lèi)app,在立項(xiàng)之初我們的圖庫(kù)里面就已經(jīng)有了幾萬(wàn)張高質(zhì)量有版權(quán)的攝影師作品,然后在設(shè)計(jì)的過(guò)程中大膽采用流式布局(類(lèi)似于今天開(kāi)眼app),大量展示優(yōu)質(zhì)圖片,才使得在2015年初那個(gè)時(shí)期我們的UI風(fēng)格比較具有鮮明的特色。



其實(shí)這也是一個(gè)產(chǎn)品團(tuán)隊(duì)需要深思熟慮的點(diǎn):


·比如旅行app,一定要有大量?jī)?yōu)質(zhì)的圖片作為依托才可能美。

·比如淘寶這種體量的大型電商,那除了盡可能控制圖片質(zhì)量以外,更多的應(yīng)該在優(yōu)化專(zhuān)題和banner上,并且告訴入駐商家(用戶(hù))上傳優(yōu)質(zhì)的圖片更容易獲取用戶(hù)流量從而轉(zhuǎn)化為成訂單。

·比如知乎、貼吧之類(lèi)這樣的問(wèn)答和社區(qū),用戶(hù)上傳的圖片五花八門(mén)千奇百怪,那我們可以考慮在首頁(yè)列表展示的時(shí)候就壓根不要展示圖片……



那是不是內(nèi)容的視覺(jué)優(yōu)化只包含圖片的優(yōu)化呢?其實(shí)不是的,除了圖片的視覺(jué)優(yōu)化以外,icon的優(yōu)化、文字的視覺(jué)優(yōu)化這些都是很重要的。


關(guān)于icon的優(yōu)化大家應(yīng)該已經(jīng)看過(guò)足夠多的文章在這里我就不贅述了,比如線性icon里面不能摻入塊狀icon,負(fù)空間icon里面不應(yīng)突然出現(xiàn)一個(gè)奇怪的漸變icon。我有一點(diǎn)心得可以分享,比如大家畫(huà)了一個(gè)2px的線性圖標(biāo)用于@2x,那在plus iPhone 的plus機(jī)型,6p 7p 8p都叫plus上面應(yīng)該要手動(dòng)調(diào)整一下圖標(biāo)變成3px而不是用png自動(dòng)生成,否則會(huì)有虛邊(除非你們的工程師使用的是svg的iconfont)。


關(guān)于文字的視覺(jué)優(yōu)化,幾乎市面上的所有app,只要涉及文字內(nèi)容的排版,毫無(wú)例外都做得很好了。從根源上出發(fā),為什么一個(gè)設(shè)計(jì)師需要去不厭其煩像個(gè)工匠一樣折磨開(kāi)發(fā)調(diào)整字體大小間距粗細(xì)什么亂七八糟的東西?其實(shí),字體視覺(jué)優(yōu)化去達(dá)到的目的主要有兩點(diǎn):


(1)輔助視覺(jué)對(duì)焦

(2)減輕視覺(jué)壓力


第二點(diǎn)沒(méi)什么好說(shuō)的了,大家應(yīng)該都明白,主要說(shuō)第一點(diǎn),視覺(jué)對(duì)焦這個(gè)事情是這樣的,我們?cè)谝粋€(gè)界面中,如果不出現(xiàn)特別突兀的信息,正常人眼一般是從左到右,從上到下的順序閱讀。

Image title


比如上圖是一個(gè)閱讀界面,所有問(wèn)題都沒(méi)有特別突兀的地方。我們把界面做一個(gè)高斯模糊去分析視覺(jué)焦點(diǎn),會(huì)發(fā)現(xiàn)整個(gè)頁(yè)面呈現(xiàn)很平和,所以,這個(gè)頁(yè)面的閱讀順序應(yīng)該是一行一行地閱讀文字,也就是從上到下,從左到右。

但是,這只是頁(yè)面形式很平的情況,舉個(gè)沒(méi)那么平的例子。

Image title


上圖是知乎的一個(gè)頁(yè)面,我們把它去色并且高斯模糊去分析它的視覺(jué)焦點(diǎn)。大家會(huì)發(fā)現(xiàn)其實(shí)視覺(jué)焦點(diǎn)是加粗加大的標(biāo)題字體和上面的小頭像構(gòu)成的。

Image title



這就是使用文字優(yōu)化去輔助視覺(jué)對(duì)焦。我不妨再舉一例,大家來(lái)看下面的2016年5月左右的氧氣app截圖。

Image title


左邊是氧氣的原UI,右邊是我做的對(duì)比圖。顯然,關(guān)于文字優(yōu)化輔助視覺(jué)對(duì)焦這一點(diǎn),氧氣的設(shè)計(jì)師深諳此道。他們沒(méi)有按照右邊那種傳統(tǒng)辦法設(shè)計(jì)這個(gè)頁(yè)面,而是把每一個(gè)深夜話題的題目都變成了一張圖,變成一張圖還不算,還在這張圖上面用淺綠色“劃了重點(diǎn)”。這樣雖然加大了設(shè)計(jì)師的工作量,但是這個(gè)頁(yè)面正是因?yàn)檫@樣的處理,能讓用戶(hù)第一眼聚焦到標(biāo)題上。

Image title


關(guān)于內(nèi)容的視覺(jué)優(yōu)化,我來(lái)總結(jié)一下吧。


app內(nèi)容是集成在app中,所有可被感知圖片、文字、聲音合集。那么內(nèi)容的視覺(jué)優(yōu)化主旨在于通過(guò)圖片,文字,圖形(icon)等的優(yōu)化,去使得app更加易讀、易用和美觀。



說(shuō)完了內(nèi)容的視覺(jué)優(yōu)化,我們?cè)倏匆幌滦问降囊曈X(jué)優(yōu)化案例。按說(shuō)只要內(nèi)容都已經(jīng)優(yōu)化好了,表現(xiàn)內(nèi)容的形式不是排得特別爛,視覺(jué)效果展現(xiàn)出來(lái)應(yīng)該都不錯(cuò)。我們?cè)僦貜?fù)一遍app形式的定義——能更好地承載內(nèi)容,使內(nèi)容更好地被感知的方式。


我們?cè)撊绾稳ヅ帕胁煌膬?nèi)容讓它們更好地被感知呢?



這里面最常見(jiàn)的方法就是UI組件化設(shè)計(jì),關(guān)于UI組件化設(shè)計(jì)我個(gè)人的定義是一款app里面同樣形式排列但是不同內(nèi)容的單元。這樣的例子不勝枚舉,我們每天都見(jiàn)到的最常見(jiàn)的一個(gè)組件化設(shè)計(jì)是微信里的每一個(gè)table view (表格視圖)。

Image title


大家打開(kāi)你們的微信,可以看到其實(shí)微信的聊天列表的每一個(gè)單元都是由固定的內(nèi)容組成的。內(nèi)容包含一張圖(頭像),兩段文字(名字和信息),一段時(shí)間組成。

再看以下兩個(gè)頁(yè)面。

Image title


先看左面這個(gè)頁(yè)面,雖然第二個(gè)品牌故事被遮擋了很多,但是由于我們看到了第一個(gè)GUCCI的banner之后,用戶(hù)心理預(yù)期就有了,用戶(hù)左滑一下屏幕大概率出現(xiàn)的也是這樣形式的不同內(nèi)容。


再看右邊這張圖,一個(gè)app的每一個(gè)專(zhuān)題都是以一本雜志的形式呈現(xiàn)的,所以當(dāng)你看到這個(gè)頁(yè)面的時(shí)候,用戶(hù)心里會(huì)有“我左滑右滑都是一本專(zhuān)題書(shū)”的預(yù)期。



在設(shè)計(jì)過(guò)程中,我們往往會(huì)把相同屬性的內(nèi)容設(shè)計(jì)成同一形式。這樣做有什么優(yōu)點(diǎn)呢?最大的優(yōu)點(diǎn)是減少用戶(hù)認(rèn)知負(fù)擔(dān),使得內(nèi)容更好地被感知。

舉個(gè)大家都懂的格式塔的例子。

Image title


看上圖A,大家都知道接下來(lái)一個(gè)一定是正方形,但看上圖B,下一個(gè)別說(shuō)你們不知道是什么,我也不知道。格式塔相似律告訴我們,人們?cè)谥X(jué)時(shí),對(duì)刺激要素相似的項(xiàng)目,只要不被接近因素干擾,會(huì)傾向于把它們聯(lián)合在一起。



那么我們就很容易解釋下圖。

Image title


大家看到這里是不是很熟悉?聯(lián)系上下文,現(xiàn)在應(yīng)該知道為什么市面上的app都這么設(shè)計(jì)了吧?還不就是為了讓用戶(hù)更好地接受信息。




5.總結(jié)



一切UI設(shè)計(jì)本質(zhì)上是為了更好地展現(xiàn)信息。

更好地展現(xiàn)信息是為了更好地指引用戶(hù)完成交互操作,從而讓用戶(hù)更好地去接收信息并完成一定功能目的。



本章一直在講述app信息呈現(xiàn)上的視覺(jué)優(yōu)化。其實(shí)視覺(jué)優(yōu)化也好,邏輯優(yōu)化、交互優(yōu)化也罷,都是為了使得app更加好用、易用、有效。



在我剛開(kāi)始接觸UI設(shè)計(jì)的時(shí)候,也曾經(jīng)沉迷dribbble,不斷模仿那些大師們的驚艷界面。在長(zhǎng)達(dá)一兩年的學(xué)習(xí)和工作中,我一直認(rèn)為UI設(shè)計(jì)師的本職工作就是畫(huà)一個(gè)漂亮的殼子,把信息裝進(jìn)去然后能讓app變得更好看而已。


但是后來(lái)我完全不這樣想,如果現(xiàn)在讓我評(píng)價(jià)一款app的UI,我可能真正最看重的那個(gè)維度已經(jīng)不是“視覺(jué)感覺(jué)”上的好看,而是“視覺(jué)邏輯”上的嚴(yán)謹(jǐn)和“視覺(jué)風(fēng)格”上的一體化,比如分割線,比如icon的樣式,比如tableview(表格視圖)的設(shè)計(jì),比如字體的主次對(duì)比等。



當(dāng)我沒(méi)有理由的畫(huà)一條分割線,只為了分割兩個(gè)也不知道是啥的元素時(shí),當(dāng)我沒(méi)有理由地就是想要為卡片化組件加上一個(gè)box-shadow(陰影)時(shí),當(dāng)我沒(méi)有理由的設(shè)計(jì)一個(gè)奇怪的交互方式還硬說(shuō)它特別好用時(shí),我都在警醒自己一句話:每一個(gè)UI界面的設(shè)計(jì)都應(yīng)該被賦予應(yīng)有的理由。希望以此共勉。


藍(lán)藍(lán)設(shè)計(jì)www.88yangsc.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 


分享本文至:

日歷

鏈接

個(gè)人資料

存檔