創(chuàng)新互聯(lián)編者為你推出《app的界面設(shè)計(jì)分析》

互聯(lián)網(wǎng)時(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)酷、愛奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆a(bǔ)pp，可以看出這是一位愛綜藝愛追星愛剁手的小姑娘?！?/p>

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

如果說(shuō)13-15年的時(shí)候app UI設(shè)計(jì)上充斥了很多同質(zhì)化的產(chǎn)品的話，到了17年，UI設(shè)計(jì)師們?cè)赿ribbble和behance的風(fēng)格影響下，有了更多的發(fā)展空間，我們不得不說(shuō)的是，現(xiàn)在的app比之前越來(lái)越好看和越來(lái)越好用了。如下圖所示我隨意截取了九個(gè)(其實(shí)這樣的app我手機(jī)里有遠(yuǎn)不止九個(gè))我自己覺(jué)得UI很nice的產(chǎn)品和大家分享，他們分別是Enjoy、單讀、Artand、Airbnb、一個(gè)ONE、Gilt、良倉(cāng)、Zeen、和氧氣：

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

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

意識(shí)是主觀形式與客觀內(nèi)容的內(nèi)在統(tǒng)一。(馬克思主義哲學(xué))內(nèi)容決定形式，形式反作用于內(nèi)容。(黑澤爾唯心主義哲學(xué)體系)(看不懂也沒(méi)關(guān)系，反正我就是寫來(lái)裝逼的。_(:зゝ∠)_)

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

PART 2 – 內(nèi)容：

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

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

那這里我不妨展開一下，假設(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í)候我問(wèn)老板：老板你做電商類app，是想做平臺(tái)類的呢還是做垂直的呢?你可想好了啊，你做平臺(tái)類的想要從淘寶京東分份額的話那你必須要有自己的特色。(比如國(guó)內(nèi)app“xx”、“xx”和“xx”、他們都有自己的特色)或者說(shuō)你是想做垂直一些的么?(比如“xx”是專門做化妝品領(lǐng)域的，比如“xx”是專門做美食的，比如如“xx”和“xx”是專門打擦邊球做情趣的)然后老板被我一番“馴化”之后得出的結(jié)論是我們來(lái)做一個(gè)美食電商吧，但是這個(gè)美食電商不會(huì)對(duì)標(biāo)“enjoy”那樣的高檔人群，其實(shí)想做成類似于“什么值得吃”這樣的大眾場(chǎng)景。好，故事講完了，現(xiàn)在我化身為這個(gè)產(chǎn)品設(shè)計(jì)師，簡(jiǎn)短片面的闡述我的思考過(guò)程：首先我拿到的目標(biāo)是“做一款什么值得吃app”，他的目標(biāo)人群是更加廣泛的全中國(guó)吃貨，且要滿足吃貨推薦，評(píng)價(jià)和在線下單支付(前期無(wú)法做渠道的話需要跳轉(zhuǎn)淘寶京東鏈接)功能。

那這個(gè)時(shí)候我開始思考這款app的MVP狀態(tài)應(yīng)該需要什么功能：

這里簡(jiǎn)單說(shuō)一下MVP是啥意思，MVP=Minimum Viable product(最小可行產(chǎn)品)是《精益創(chuàng)業(yè)》的作者埃里克·萊斯提出提出的一個(gè)概念，字面意思就是可保證產(chǎn)品正常使用(主邏輯閉環(huán))的最小產(chǎn)品單元。MVP又分為Validating MVP和Invalidating MVP在這里就不展開了，《精益創(chuàng)業(yè)》是一本特別贊的書，推薦大家閱讀。我設(shè)計(jì)的這個(gè)其實(shí)是Invalidating MVP，大概需要四個(gè)部分： “推薦”是核心，以帖子形式或者別的什么形式出現(xiàn)一些推薦的東西附上鏈接，“專題”方面做一些可供運(yùn)營(yíng)和推廣的專題，比如“情人節(jié)送什么巧克力”、“最適合食辣族的幾款辣醬”之類?！吧坛恰崩锩鏁?huì)丟一些自營(yíng)的物品?！拔业摹崩锩鏁?huì)有我的推薦，我的收藏，我的訂單之類的一堆東西。

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

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

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

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

好，那假設(shè)我現(xiàn)在關(guān)于產(chǎn)品首頁(yè)大概得出了三點(diǎn)感覺(jué)：

• 1.首頁(yè)推薦按照人的屬性tag去區(qū)分推薦列表
• 2.產(chǎn)品風(fēng)格不宜太大洋(尤其是一定不能像enjoy那樣使用黑白配色)，最好是產(chǎn)品對(duì)標(biāo)今日頭條那種和微博的感覺(jué)，受眾偏向二三四線城市。
• 3.每一個(gè)推薦應(yīng)該有收藏，購(gòu)買鏈接，這樣的東西，在首頁(yè)上應(yīng)該有專門為運(yùn)營(yíng)活動(dòng)或者市場(chǎng)換量設(shè)置的入口(可能是banner形式)。
• 4.為了不使推薦屬性具有傾向性，應(yīng)該每一個(gè)推薦都盡量層級(jí)平行。(比如“吃辣黨”和“甜品族”就應(yīng)該入口平行。)
• 5.一定要保證一個(gè)完整的支付邏輯和用戶推薦邏輯通順，這是最基本的兩個(gè)功能。中間可能涉及到推薦里面要有商城鏈接(如果商城沒(méi)有的要跳淘寶)，自己的商城支付要支持支付寶微信，要有訂單狀態(tài)和退單等一系列功能，余額功能或退款自動(dòng)退回功能二選一(看公司需不需要資金池)。
• 6....(此處省略N條)

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

我寫這么多字其實(shí)就是想告訴大家一個(gè)app的“內(nèi)容”是如何產(chǎn)生的，當(dāng)然我這里說(shuō)得十分十分簡(jiǎn)單，真實(shí)情況可能比這個(gè)復(fù)雜百倍，大家意會(huì)就是了。好了說(shuō)完了內(nèi)容，我們來(lái)看所謂app中的“形式”又是什么鬼。

PART 3 – 形式：

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

人有五感，視覺(jué)、聽覺(jué)、嗅覺(jué)、味覺(jué)、觸覺(jué)。而人去和一款手機(jī)應(yīng)用進(jìn)行交互的時(shí)候只會(huì)從視覺(jué)，聽覺(jué)，觸覺(jué)(反饋)三個(gè)方面去感知，而觸覺(jué)涉及到交互層面，以后我寫到app的交互架構(gòu)的時(shí)候會(huì)詳細(xì)說(shuō); 關(guān)于聽覺(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ī)在開車很難解放雙手去點(diǎn)擊匹配，所以從產(chǎn)品邏輯上設(shè)計(jì)的是“語(yǔ)音提示+主動(dòng)匹配+手動(dòng)接單”的方式，所以我們總能在快下出租車的時(shí)候聽到司機(jī)手機(jī)上傳出響亮的“開始接單啦”語(yǔ)音提示。

今天文章的重點(diǎn)是視覺(jué)。因?yàn)閁I中國(guó)和站酷里面是UI和視覺(jué)設(shè)計(jì)師聚集地，可能在大家以往的工作當(dāng)中并不會(huì)care一款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)，我大致能畫出原型如下圖所示兩種：

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

那么問(wèn)題來(lái)了，嘗試分析一下，上面這兩種形式到底有什么優(yōu)劣呢?第一件事應(yīng)該想到的是如果需要采用右邊的排列形式就必須要控制tag的字?jǐn)?shù)，你懂我是什么意思吧?比如今天有個(gè)運(yùn)營(yíng)跳出來(lái)說(shuō)我們做一個(gè)新的tag把名字叫“酸酸甜甜就是我”。產(chǎn)品一定哭暈在廁所，因?yàn)椋?/p>

你們懂不懂這種感覺(jué)233333，簡(jiǎn)直想死。但是左邊那張那種就不存在這種問(wèn)題。

第二，由于右邊的tag占據(jù)了推薦貼的位置，導(dǎo)致推薦貼可能沒(méi)有左邊的那種展現(xiàn)形式更加醒目。但是相對(duì)的，圖右的優(yōu)勢(shì)在于，由于豎向排列tag可以讓一個(gè)屏幕顯示更多的tag，這一點(diǎn)就需要取舍，比如一個(gè)產(chǎn)品的初期沒(méi)準(zhǔn)備放這么多切換tag的話，還是建議用左邊那種。更深層次的，外賣產(chǎn)品之所以用右邊這種形式是因?yàn)榱η笠黄琳故靖嗟牟?，而且外賣產(chǎn)品的左側(cè)tag一般是一家店鋪的菜的品類，用戶下滑菜品配合點(diǎn)擊品類，點(diǎn)完即走，很方便(京東和淘寶電商類平臺(tái)也是類似的)。但是比如早期的今日頭條只能采用左邊的這種形式，因?yàn)轭^條是需要用戶長(zhǎng)時(shí)間沉浸的，比如用戶選中一個(gè)“體育”的tag一般要看好久好久，用戶需要沉浸在這個(gè)tag下的內(nèi)容中，那這個(gè)時(shí)候顯然用右邊這種設(shè)計(jì)方式讓tag常駐屏幕左側(cè)是不合適的。

基于以上分析，作為內(nèi)容+電商平臺(tái)的“什么值得吃”應(yīng)該選用左邊這種設(shè)計(jì)形式。好，“什么值得吃”這個(gè)虛擬的例子就說(shuō)到這里，主要是讓大家明白內(nèi)容和形式之間的關(guān)系，只有你們明白了這個(gè)，才可以正式進(jìn)入今天的主題：app的視覺(jué)美成因分析。

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

(在這里我們先別管好不好用，只管好不好看，關(guān)于好不好用以后文章慢慢說(shuō)。)首先先來(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)化：

你們可以看到左右兩張圖，左邊是enjoy的精選頁(yè)，右邊是我隨手糟蹋的，大家會(huì)發(fā)現(xiàn)其實(shí)信息內(nèi)容一模一樣，但是左邊的level和右邊的level大家一眼就能看出來(lái)區(qū)別吧，如果出現(xiàn)右邊這樣的UI稿那只能說(shuō)明這個(gè)團(tuán)隊(duì)在內(nèi)容的視覺(jué)優(yōu)化上面不!用!心!(我是沒(méi)用力糟蹋不然我可以辣得你們半天睜不開眼睛哈哈哈)

其實(shí)這也是一個(gè)產(chǎn)品團(tuán)隊(duì)需要深思熟慮的點(diǎn)：·比如是一個(gè)旅行app軟件開發(fā)，那就一定要有大量?jī)?yōu)質(zhì)的圖片作為依托才可能app設(shè)計(jì)美?！け热缫粋€(gè)淘寶這種體量的大型電商，那除了盡可能控制圖片質(zhì)量以外，更多的應(yīng)該在優(yōu)化專題和banner上，并且告訴入駐商家(用戶)上傳優(yōu)質(zhì)的圖片更容易獲取用戶流量從而轉(zhuǎn)化為成單?！け热缰?、貼吧之類這樣的問(wèn)答和社區(qū)，用戶上傳的圖片五花八門千奇百怪，那我們可以考慮在首頁(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里面突然出現(xiàn)一個(gè)奇怪的漸變icon會(huì)感覺(jué)很奇怪，在這里因?yàn)閷戇@個(gè)的人太多了我就不贅述了。有一點(diǎn)心得可以分享，比如大家畫了一個(gè)2px的線性圖標(biāo)用于@2x，那在plus上面應(yīng)該要手動(dòng)調(diào)整一下圖標(biāo)變成3px而不是用png自動(dòng)生成，必然會(huì)有虛邊(除非你們的工程師使用的是svg的iconfont)。

關(guān)于文字的視覺(jué)優(yōu)化，其實(shí)在今天這個(gè)時(shí)間點(diǎn)去談?wù)撘呀?jīng)沒(méi)什么好說(shuō)的了，因?yàn)閹缀跏忻嫔系乃衋pp，只要涉及文字內(nèi)容的排版，毫無(wú)例外都做得很好。從根源上出發(fā)，為什么一個(gè)設(shè)計(jì)師需要去不厭其煩像個(gè)工匠一樣折磨開發(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)特別突兀的信息，正常人眼一般是從左到右，從上到下的順序閱讀：

比如上圖是一個(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)那么平的例子：

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

這就是通過(guò)文字優(yōu)化去輔助視覺(jué)對(duì)焦，我不妨再舉一例，大家來(lái)看16年5月左右的氧氣app截圖：

左邊是氧氣的原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ì)師的工作量(其實(shí)也還好就是給到話題title換個(gè)字出張圖而已)，但是這個(gè)頁(yè)面正是因?yàn)檫@樣的處理，能讓用戶第一眼聚焦到標(biāo)題title上：

關(guān)于內(nèi)容的視覺(jué)優(yōu)化我已經(jīng)說(shuō)完了，說(shuō)了這么多，大家看到這里也不容易，有沒(méi)有混亂呢?我來(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)容的形式只要不是排得特別爛，應(yīng)該展現(xiàn)出來(lái)都不錯(cuò)。我們?cè)僦貜?fù)一遍形式的定義好了：app中更好去承載內(nèi)容，使內(nèi)容更好被感知的方式稱為app的形式。

以上就是上海網(wǎng)站建設(shè)公司——?jiǎng)?chuàng)新互聯(lián)為你推出《APP的界面設(shè)計(jì)分析》的全部?jī)?nèi)容，更多的APP界面設(shè)計(jì)資訊，等你查閱。

分享標(biāo)題：app的界面設(shè)計(jì)分析
文章網(wǎng)址：http://www.rwnh.cn/news/166390.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站排名、響應(yīng)式網(wǎng)站、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)