• <td id="ywcm8"></td>
  • <xmp id="ywcm8"><td id="ywcm8"></td><small id="ywcm8"><li id="ywcm8"></li></small><small id="ywcm8"></small><small id="ywcm8"></small>
  • <small id="ywcm8"><button id="ywcm8"></button></small>
  • <small id="ywcm8"></small>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <small id="ywcm8"></small>
  • 當前位置: 主頁 > 建站學堂 > 網站運營 >
    論形式與內容關系:App的視覺美成因分析
    技術文檔    來源:

    一切UI設計本質上是為了更好的展現信息。

    互聯網時間來到了2017年,手機空間越來越大,相信大家的手機中裝了越來越多的app,很多時候,當我拿起一個朋友的手機,看他手機里都有哪些應用、這些應用的優先級是如何排布的,經常會從中得出關于這個人的另一層線索。

    比如一個人手機里優先位置上有脈脈、知乎、豆瓣、一個ONE、單讀這幾個app,那我可以推測這個人一定是具備文藝屬性的互聯網從業者。

    比如一個人手機封面是吳亦凡或者鹿晗,手機里優先位置上有優酷、愛奇藝、騰訊視頻、芒果TV、天貓、京東、蘑菇街這樣的一堆app,可以看出這是一位愛綜藝愛追星愛剁手的小姑娘。

    ……

    PART 1 – 意識是主觀形式與客觀內容的內在統一

    如果說13-15年的時候app UI設計上充斥了很多同質化的產品的話,到了17年,UI設計師們在dribbble和behance的風格影響下,有了更多的發展空間,我們不得不說的是,現在的app比之前越來越好看和越來越好用了。

    如下圖所示我隨意截取了九個(其實這樣的app我手機里有遠不止九個)我自己覺得UI很nice的產品和大家分享,他們分別是Enjoy、單讀、Artand、Airbnb、一個ONE、Gilt、良倉、Zeen、和氧氣:

    那這里有一個關鍵的問題就出現了,為什么有些app,普通用戶一打開就自然而然的覺得它很美?用戶這種“覺得他很美”的意識到底是從哪兒來的?

    在此之前,我先來說兩組哲學概念:

    意識是主觀形式與客觀內容的內在統一。(馬克思主義哲學)內容決定形式,形式反作用于內容。(黑澤爾唯心主義哲學體系)

    (看不懂也沒關系,反正我就是寫來裝逼的。_(:зゝ∠)_)

    為了闡述用戶這種“覺得他很美”的意識到底是從哪兒來的,就必須要了解app中“內容”和“形式”之間的關系。那我們不妨來看一下什么叫內容,什么叫形式:

    PART 2 – 內容

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

    那么我們必要搞要清楚的是,一個app的內容到底是如何產生的?也就是一個app到底是如何產生的?

    那這里我不妨展開一下,假設我是一個產品設計師,有一天CEO告訴我最近想做一個電商app(這里我假設我們公司很有實力,忽略了市場和運營、渠道和資金上的問題,只考慮產品設計方面。)

    那這個時候我問老板:老板你做電商類app,是想做平臺類的呢還是做垂直的呢?你可想好了啊,你做平臺類的想要從淘寶京東分份額的話那你必須要有自己的特色。(比如國內app“xx”、“xx”和“xx”、他們都有自己的特色)或者說你是想做垂直一些的么?(比如“xx”是專門做化妝品領域的,比如“xx”是專門做美食的,比如“xx”和“xx”是專門打擦邊球做情趣的)然后老板被我一番“馴化”之后得出的結論是我們來做一個美食電商吧,但是這個美食電商不會對標“enjoy”那樣的高檔人群,其實想做成類似于“什么值得吃”這樣的大眾場景。

    好,故事講完了,現在我化身為這個產品設計師,簡短片面的闡述我的思考過程:首先我拿到的目標是“做一款什么值得吃app”,他的目標人群是更加廣泛的全中國吃貨,且要滿足吃貨推薦,評價和在線下單支付(前期無法做渠道的話需要跳轉淘寶京東鏈接)功能。

    那這個時候我開始思考這款app的MVP狀態應該需要什么功能:

    這里簡單說一下MVP是啥意思,MVP=Minimum Viable product(最小可行產品)是《精益創業》的作者埃里克·萊斯提出提出的一個概念,字面意思就是可保證產品正常使用(主邏輯閉環)的最小產品單元。MVP又分為Validating MVP和Invalidating MVP在這里就不展開了,《精益創業》是一本特別贊的書,推薦大家閱讀。

    我設計的這個其實是Invalidating MVP,大概需要四個部分:

    ?“推薦”是核心,以帖子形式或者別的什么形式出現一些推薦的東西附上鏈接,“專題”方面做一些可供運營和推廣的專題,比如“情人節送什么巧克力”、“最適合食辣族的幾款辣醬”之類?!吧坛恰崩锩鏁G一些自營的物品?!拔业摹崩锩鏁形业耐扑],我的收藏,我的訂單之類的一堆東西。

    你們發現了么,其實這個時候,產品設計師就已經在定義產品的信息架構了。

    那第一個問題我就在思考,因為這個app叫什么值得吃,那我們是不是還需要推薦一些線下值得吃的店的?如果做了是不是就和enjoy同質化太嚴重了?那最好就是先不做。

    第二個問題那在推薦這一頁里面我大概需要什么功能,因為面向的對象不太像enjoy那種偏一線城市的人群,那我應該用戶群體同類對標到今日頭條這種level的感覺。

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

    好,那假設我現在關于產品首頁大概得出了三點感覺:

    首頁推薦按照人的屬性tag去區分推薦列表產品風格不宜太大洋(尤其是一定不能像enjoy那樣使用黑白配色),最好是產品對標今日頭條那種和微博的感覺,受眾偏向二三四線城市。每一個推薦應該有收藏,購買鏈接,這樣的東西,在首頁上應該有專門為運營活動或者市場換量設置的入口(可能是banner形式)。為了不使推薦屬性具有傾向性,應該每一個推薦都盡量層級平行。(比如“吃辣黨”和“甜品族”就應該入口平行。)一定要保證一個完整的支付邏輯和用戶推薦邏輯通順,這是最基本的兩個功能。中間可能涉及到推薦里面要有商城鏈接(如果商城沒有的要跳淘寶),自己的商城支付要支持支付寶微信,要有訂單狀態和退單等一系列功能,余額功能或退款自動退回功能二選一(看公司需不需要資金池)?!ù颂幨÷訬條)

    大家明白了么,所謂app“內容”的產生,就是我上述這些奇怪東西的綜合(當然其實并沒有上述這么簡單,這個以后有機會細講),比如我們從上面的論述當中,我可以歸納出這款“什么值得吃”app的首頁“推薦”應該具有的信息如下:

    我寫這么多字其實就是想告訴大家一個app的“內容”是如何產生的,當然我這里說得十分十分簡單,真實情況可能比這個復雜百倍,大家意會就是了。

    好了說完了內容,我們來看所謂app中的“形式”又是什么鬼。

    PART 3 – 形式

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

    人有五感,視覺、聽覺、嗅覺、味覺、觸覺。

    而人去和一款手機應用進行交互的時候只會從視覺,聽覺,觸覺(反饋)三個方面去感知,而觸覺涉及到交互層面,以后我寫到app的交互架構的時候會詳細說; 關于聽覺其實也不是本文重點,我舉個例子一筆帶過就好了,比如大家都用過滴滴,滴滴有一個“內容(功能)”是司機送一個乘客的過程中,當判斷距離目的地很近的時候會默認進行一個“下一單的匹配”的功能。我們用滴滴的這個功能來對比手機游戲里面的“匹配下一局”,我們會發現這是幾乎相同的“內容”,但是承載形式不一樣,手游是視覺展現,你必須點擊手機上的“匹配”按鈕,而滴滴因為考慮到司機在開車很難解放雙手去點擊匹配,所以從產品邏輯上設計的是“語音提示+主動匹配+手動接單”的方式,所以我們總能在快下出租車的時候聽到司機手機上傳出響亮的“開始接單啦”語音提示。

    今天文章的重點是視覺。

    因為UI中國和站酷里面是UI和視覺設計師聚集地,可能在大家以往的工作當中并不會care一款app原型是怎么樣設計出來的,大家可能只會關心我拿到原型以后應該如何轉化為驚艷的高保真頁面。

    把一個內容整理,排列成一個app頁面,就是大家更關心的“形式”的部分。還是回到上文“什么值得吃”這款虛構的app上,綜合上面的觀點,我大致能畫出原型如下圖所示兩種:

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

    那么問題來了,嘗試分析一下,上面這兩種形式到底有什么優劣呢?

    第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制tag的字數,你懂我是什么意思吧?比如今天有個運營跳出來說我們做一個新的tag把名字叫“酸酸甜甜就是我”。產品一定哭暈在廁所,因為:

    你們懂不懂這種感覺233333,簡直想死。但是左邊那張那種就不存在這種問題。

    第二,由于右邊的tag占據了推薦貼的位置,導致推薦貼可能沒有左邊的那種展現形式更加醒目。但是相對的,圖右的優勢在于,由于豎向排列tag可以讓一個屏幕顯示更多的tag,這一點就需要取舍,比如一個產品的初期沒準備放這么多切換tag的話,還是建議用左邊那種。

    更深層次的,外賣產品之所以用右邊這種形式是因為力求一屏展示更多的菜,而且外賣產品的左側tag一般是一家店鋪的菜的品類,用戶下滑菜品配合點擊品類,點完即走,很方便(京東和淘寶電商類平臺也是類似的)。但是比如早期的今日頭條只能采用左邊的這種形式,因為頭條是需要用戶長時間沉浸的,比如用戶選中一個“體育”的tag一般要看好久好久,用戶需要沉浸在這個tag下的內容中,那這個時候顯然用右邊這種設計方式讓tag常駐屏幕左側是不合適的。

    基于以上分析,作為內容+電商平臺的“什么值得吃”應該選用左邊這種設計形式。

    好,“什么值得吃”這個虛擬的例子就說到這里,主要是讓大家明白內容和形式之間的關系,只有你們明白了這個,才可以正式進入今天的主題:app的視覺美成因分析。

    PART 4 – app的視覺美成因分析

    (在這里我們先別管好不好用,只管好不好看,關于好不好用以后文章慢慢說。)首先先來看結論:一款app讓你感覺到長得美,一定是團隊在兩個方面下功夫了:第一是內容視覺優化,第二是形式的視覺優化。

    我先來給你們看兩張圖你們感受一下啥叫內容的視覺優化:

    你們可以看到左右兩張圖,左邊是enjoy的精選頁,右邊是我隨手糟蹋的,大家會發現其實信息內容一模一樣,但是左邊的level和右邊的level大家一眼就能看出來區別吧,如果出現右邊這樣的UI稿那只能說明這個團隊在內容的視覺優化上面不!用!心?。ㄎ沂菦]用力糟蹋不然我可以辣得你們半天睜不開眼睛哈哈哈)

    以上就是內容的視覺優化的作用,關于內容當中的圖片,其實大家都有直觀感受:一款app允許用戶自定義的圖片越多,這款app視覺就一定越難把控。原因很簡單,因為用戶自定義的信息里面,文字信息我們是可以通過限制字段和select去控制的,但是對于圖片來說,哪怕控制了用戶自定義圖片的尺寸,我們也無法控制這些圖片的質量,大家去看一下秒拍這款app,它的框架設計做得很棒,包括一些empty status的小圖標繪制都很棒,但是我們打開的時候首頁的內容總是參差不齊,差強人意。同理還有咸魚這款app, UI框架做得很漂亮,但是內容頁面總會顯得沒那么“高大上”。

    這也就是為什么比如enjoy,自如、氧氣、想去以及毒物、Gilt、美團這些輕量電商或者租房app,都選擇花一大筆成本自己養一批或全職或兼職的攝影師的原因,就是為了得到符合自己規范的優質內容圖片(比如你們去看自如的房源信息照片基本就是那種樣子,氧氣的內衣樣片背景永遠是白色)。

    我之前做過一款旅行游學類app,在立項之初我們的圖庫里面就已經有了幾萬張高質量有版權的攝影師作品,然后在設計的過程中大膽采用(類似于今天開眼app的)流式布局,大量展示優質圖片,才使得在15年初那個時期我們的UI風格比較具有鮮明的特色。

    其實這也是一個產品團隊需要深思熟慮的點:

    比如是一個旅行app,那就一定要有大量優質的圖片作為依托才可能app美。比如一個淘寶這種體量的大型電商,那除了盡可能控制圖片質量以外,更多的應該在優化專題和banner上,并且告訴入駐商家(用戶)上傳優質的圖片更容易獲取用戶流量從而轉化為成單。比如知乎、貼吧之類這樣的問答和社區,用戶上傳的圖片五花八門千奇百怪,那我們可以考慮在首頁列表展示的時候就壓根不要展示圖片……

    那是不是內容的視覺優化只包含圖片的優化呢?其實不是的,除了圖片的視覺優化以外,icon的優化、包括文字的視覺優化這些都是很重要的。

    關于icon的優化大家應該已經看過足夠多的文章在這里我就不贅述了,比如線性icon里面不能參入塊狀icon,負空間icon里面突然出現一個奇怪的漸變icon會感覺很奇怪,在這里因為寫這個的人太多了我就不贅述了。有一點心得可以分享,比如大家畫了一個2px的線性圖標用于@2x,那在plus上面應該要手動調整一下圖標變成3px而不是用png自動生成,必然會有虛邊(除非你們的工程師使用的是svg的iconfont)。

    關于文字的視覺優化,其實在今天這個時間點去談論已經沒什么好說的了,因為幾乎市面上的所有app,只要涉及文字內容的排版,毫無例外都做得很好。從根源上出發,為什么一個設計師需要去不厭其煩像個工匠一樣折磨開發調整字體大小間距粗細什么亂七八糟的東西?其實,字體視覺優化去達到的目的主要有兩點:

    輔助視覺對焦減輕視覺壓力

    第二點沒啥好說的,大家應該都明白,主要說第一點,視覺對焦這個事情是這樣的,我們在一個界面中,如果不出現特別突兀的信息,正常人眼一般是從左到右,從上到下的順序閱讀:

    比如上圖是一個閱讀界面,所有問題都沒有特別突兀的地方,所以我們把界面做一個高斯模糊去分析視覺焦點,會發現整個頁面呈現很平和,所以,這個頁面的閱讀順序應該是一行一行的閱讀文字,也就是從上到下,從左到右。

    但是,這只是頁面形式很平的情況,舉個沒那么平的例子:

    如上圖所示是一個知乎頁面,我們把它去色并且高斯模糊去分析它的視覺焦點,大家會發現其實視覺焦點是加粗加大的title字體和上面的小頭像去構成的:

    這就是通過文字優化去輔助視覺對焦,我不妨再舉一例,大家來看16年5月左右的氧氣app截圖:

    左邊是氧氣的原UI,右邊是我做的對比圖。顯然,關于文字優化輔助視覺對焦這一點,氧氣的設計師顯然深諳此道,它們沒有按照右邊那種傳統辦法設計這個頁面,而是把每一個深夜話題的題目都變成了一張圖,變成一張圖還不算,還在這張圖上面用淺綠色“劃了重點”,這樣雖然加大了設計師的工作量(其實也還好就是給到話題title換個字出張圖而已),但是這個頁面正是因為這樣的處理,能讓用戶第一眼聚焦到標題title上:

    關于內容的視覺優化我已經說完了,說了這么多,大家看到這里也不容易,有沒有混亂呢?我來總結一下吧:

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

    說完了內容的視覺優化,我們再看一下形式的視覺優化案例,按說只要內容都已經優化好了,表現內容的形式只要不是排得特別爛,應該展現出來都不錯。我們再重復一遍形式的定義好了:app中更好去承載內容,使內容更好被感知的方式稱為app的形式。

    我們該如何去排列不同的內容讓它們更好的被感知呢?

    這里面最常見的方法就是UI組件化設計,我個人把一款app里面同樣形式排列但是不同內容的單元叫做UI設計中的組件。這樣的例子不勝枚舉,我們每天都見到的最常見的一個組件化設計是微信里的每一個tableview:

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

    再比如另兩個頁面:

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

    再看右邊這張圖,一個app的每一個專題都是以一本雜志的形式呈現的,所以當你看到這個頁面的時候,用戶心里會有預期我左滑右滑都是一本專題書。

    在設計過程中,我們往往會把相同屬性的內容設計成同一形式。這樣做有什么優點呢?最大的優點是減少用戶認知負擔,使得內容更好的被感知。

    舉個大家都懂的格式塔的例子:

    上圖A,大家都知道接下來一個一定是正方形,上圖B,下一個別說你們不知道是什么,我也不知道。格式塔相似律告訴我們,人們在知覺時,對刺激要素相似的項目,只要不被接近因素干擾,會傾向于把它們聯合在一起。

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

    大家看到這里是不是很熟悉?聯系上下文,現在應該知道為什么市面上的app都這么設計了吧?還不就是為了讓用戶更好接受信息。

    PART 5 – 總結

    一切UI設計本質上是為了更好的展現信息。

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

    本文一直在講述app信息呈現上的視覺優化。其實視覺優化也好、邏輯優化、交互優化也罷,都是為了使得app更加好用、易用、有效。

    在我剛開始接觸UI設計的時候,也是曾經沉迷dribbble,不斷模仿那些大師們的驚艷界面,還長達一兩年的學習和工作中,我一直認為UI設計師的本職工作就是畫一個漂亮的殼子,把信息裝進去然后能讓app變得更好看而已。

    但是后來我完全不這樣想,如果現在讓我評價一款app的UI,我可能真正最看重的那個維度已經不是“視覺感覺”上的好看,而是“視覺邏輯”上的嚴謹和“視覺風格”上的一體化。比如分割線,比如icon的樣式,比如tableview的設計,比如字體的主次對比等等。

    當我沒有理由的畫一條分割線,只為了分割兩個也不知道是啥的元素時

    當我沒有理由的就是想要為卡片化組件加上一個boxshadow時

    當我沒有理由的設計一個奇怪的交互方式還硬說它特別好用時

    我都在警醒自己一句話:每一個UI界面的設計都應該被賦予應有的理由。

    希望以此共勉。

    文章作者系@Seany. 原創發布于人人都是產品經理,未經許可,禁止轉載。

    ?
    地址:深圳市南山區創業路南光商務大廈2-1114    Email:s@szhv.cn    Tel:0755-86176995    中國 · 深圳
    Copyright ? 2006 -2021 深圳匯網在線 All Right Reserved.    粵ICP備14062458號


    熱線電話:0755-86176995
    国产青草视频在线观看
  • <td id="ywcm8"></td>
  • <xmp id="ywcm8"><td id="ywcm8"></td><small id="ywcm8"><li id="ywcm8"></li></small><small id="ywcm8"></small><small id="ywcm8"></small>
  • <small id="ywcm8"><button id="ywcm8"></button></small>
  • <small id="ywcm8"></small>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <td id="ywcm8"></td>
  • <small id="ywcm8"></small>