如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

在做UI設計之初，我就有跟蹤一些app版本和更新的習慣。在互聯網行業工作久了，我總是會從他們每一個版本的產品形態去揣測這個公司的動態?？吹揭恍┕δ芎徒换c，我會設身處地地思考如果我是他們的產品設計師應該如何處理；遇見一些深得我心的功能點，我也總是有一種和他們的產品設計師惺惺相惜的江湖感情。反正久而久之，我邊猜測邊總結，也是養成了自己的一套“歪門邪道”的方法論。

言歸正傳，我們來看這一篇文章的內容。

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

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

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

……

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

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

如下圖所示我隨意截取了九個我自己覺得UI很棒的產品和大家分享，他們分別是Enjoy、單讀、Artand、Airbnb、一個ONE、Gilt、良倉、Zeen、和氧氣。

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

在此之前，我先來說兩組哲學概念。

意識是主觀形式與客觀內容的內在統一。（馬克思主義哲學）

內容決定形式，形式反作用于內容。（黑格爾唯心主義哲學）

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

2.內容

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

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

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

那這個時候我會問老板：“老板，你做電商類app，是想做平臺類的呢還是做垂直的呢？你可想好了啊，你做平臺類的想要從淘寶、京東分份額的話，那你必須要有自己的特色。比如國內app‘xx’、‘xx’和‘xx’、他們都有自己的特色?；蛘哒f你是想做垂直一些的么？比如‘xx’是專門做化妝品領域的，比如‘xx’是專門做美食的?！比缓罄习灞晃乙环榜Z化”之后得出的結論是我們來做一個美食電商，但是這個美食電商不會對標Enjoy那樣的高檔人群，而是做成類似于“什么值得吃”這樣的大眾場景。

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

經過一番思考，我認為這款app的MVP狀態應該需要如下圖所示的功能。

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

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

“推薦”是核心，以帖子形式或者別的什么形式推薦一些東西并附上鏈接?！皩ｎ}”方面做一些可供運營和推廣的專題，比如“情人節送什么巧克力”、“最適合食辣族的幾款辣醬”之類?！吧坛恰崩锩鏁乓恍┳誀I的物品。“我的”里面會有我的推薦、我的收藏、我的訂單之類的一堆東西。

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

第一，因為這個app叫”什么值得吃”，那我們是不是還需要推薦一些線下值得吃的店呢？如果做了是不是就和Enjoy同質化太嚴重了？那最好就是先不做。

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

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

好，那我現在關于產品首頁大概得出了以下幾點感覺。

（1）首頁推薦按照人的屬性標簽去區分推薦列表。

（2）產品風格不宜太洋氣（尤其是一定不能像Enjoy那樣使用黑白配色），最好是產品對標今日頭條和微博的感覺，受眾偏向二三四線城市。

（3）每一個推薦應該有收藏、購買鏈接等部件，在首頁上應該有專門為運營活動或者市場換量設置的入口（可能是banner形式）。

（4）為了不使推薦屬性具有傾向性，每一個推薦都應該盡量層級平行。（比如“吃辣黨”和“甜品族”就應該入口平行。）

（5）一定要保證一個完整且通順的支付邏輯和用戶推薦邏輯，這是最基本的兩個功能。中間可能涉及到推薦里面要有商城鏈接（如果商城沒有的要跳轉淘寶），自己的商城要支持支付寶、微信等支付方式，要有訂單狀態和退單等一系列功能，余額功能或退款自動退回功能二選一（看公司需不需要資金池）。

....（此處省略N條）

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

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

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

3.形式

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

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

本文的重點是視覺。

可能在大家以往的工作當中并不會關注一款app原型是怎么樣設計出來的，大家可能只會關心我拿到原型以后應該如何轉化為驚艷的高保真頁面。

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

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

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

第一件事應該想到的是如果需要采用右邊的排列形式就必須要控制標簽（tag）的字數，你懂我是什么意思吧？比如今天有個運營跳出來說我們做一個新的標簽把名字叫“酸酸甜甜就是我”。產品一定特別崩潰，原因如下圖所示。

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

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

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

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

4.app的視覺美成因分析

首先來看結論。一款app讓你感覺到長得美，一定是團隊在兩個方面下功夫了——第一是內容的視覺優化，第二是形式的視覺優化。

我先來給你們看兩張圖，讓你們感受一下什么叫內容的視覺優化。

你們可以看到左右兩張圖，左邊是Enjoy的精選頁，右邊是我隨手糟蹋的，大家會發現其實信息內容一模一樣，但是左邊的和右邊的視覺設計差距大家一眼就能看出來吧。如果出現右邊這樣的UI稿，那只能說明這個團隊在內容的視覺優化上面不用心！以上就是內容的視覺優化的作用。關于內容當中的圖片，其實大家都有直觀感受：一款app允許用戶自定義的圖片越多，這款app視覺就一定越難把控。原因很簡單，因為用戶自定義的信息里面，文字信息我們是可以通過限制字段和select（選擇）去控制的，但是對于圖片來說，哪怕控制了用戶自定義圖片的尺寸，我們也無法控制這些圖片的質量。大家去看一下秒拍這款app，它的框架設計做得很棒，包括一些empty status（無內容狀態頁）的小圖標繪制都很棒，但是我們打開app的時候，首頁的內容總是參差不齊，差強人意。同理還有閑魚這款app， UI框架做得很漂亮，但是內容頁面總會顯得沒那么“高大上”。

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

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

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

·比如旅行app，一定要有大量優質的圖片作為依托才可能美。

·比如淘寶這種體量的大型電商，那除了盡可能控制圖片質量以外，更多的應該在優化專題和banner上，并且告訴入駐商家（用戶）上傳優質的圖片更容易獲取用戶流量從而轉化為成訂單。

·比如知乎、貼吧之類這樣的問答和社區，用戶上傳的圖片五花八門千奇百怪，那我們可以考慮在首頁列表展示的時候就壓根不要展示圖片……

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

關于icon的優化大家應該已經看過足夠多的文章在這里我就不贅述了，比如線性icon里面不能摻入塊狀icon，負空間icon里面不應突然出現一個奇怪的漸變icon。我有一點心得可以分享，比如大家畫了一個2px的線性圖標用于@2x，那在plus iPhone 的plus機型，6p 7p 8p都叫plus上面應該要手動調整一下圖標變成3px而不是用png自動生成，否則會有虛邊（除非你們的工程師使用的是svg的iconfont）。

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

（1）輔助視覺對焦

（2）減輕視覺壓力

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

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

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

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

這就是使用文字優化去輔助視覺對焦。我不妨再舉一例，大家來看下面的2016年5月左右的氧氣app截圖。

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

關于內容的視覺優化，我來總結一下吧。

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

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

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

這里面最常見的方法就是UI組件化設計，關于UI組件化設計我個人的定義是一款app里面同樣形式排列但是不同內容的單元。這樣的例子不勝枚舉，我們每天都見到的最常見的一個組件化設計是微信里的每一個table view （表格視圖）。

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

再看以下兩個頁面。

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

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

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

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

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

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

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

5.總結

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

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

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

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

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

當我沒有理由的畫一條分割線，只為了分割兩個也不知道是啥的元素時，當我沒有理由地就是想要為卡片化組件加上一個box-shadow（陰影）時，當我沒有理由的設計一個奇怪的交互方式還硬說它特別好用時，我都在警醒自己一句話：每一個UI界面的設計都應該被賦予應有的理由。希望以此共勉。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

整理了一份UI設計師怎么整理自己的作品集，希望能給正在準備作品集的你一點小小的幫助，大家互相進步^_^

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

mongoose保存數據：

const save = new Model(data).save()
    


        

            1
        

    

const save = new Model(data).save((err, result)=>{ if(err){ // 保存失敗執行的操作
    }else { // 保存成功執行的操作
    }

})
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

try{
    const save = await new Model(data).save();
    // 保存成功執行的操作 return ... }catch(err){
    // 保存失敗執行的操作 return ... }
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

    

const mongoose  = require("mongoose"); const port      = process.env.PORT || "8899"; const UserSchema = mongoose.Schema({
    userName: {
        type: String,
        unique: true },
    passWord: String,
    createTime: {
        type: Date, default: Date.now()
    },
    updateTime: {
        type: Date, default: Date.now()
    }
}, {
    timestamps: {
        createAt: "createTime",
        updateTime: "updateTime" }
});

module.exports = mongoose.model("USER", UserSchema);
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

        

            24
        

        

            25
        

    

const User = require("./user.model);
class User{
    async login(user){
            try{
                const result = await new User(user).save();
                // 其他操作，如發送注冊郵件
                return { success: true }
            }catch(err){
                return { success: false, message: "用戶名或密碼錯誤" }
            }
   }
}
moduel.exports = new User();
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

    

const server = require("./server); async login(){ // 首先獲取請求中攜帶的用戶信息 const result = await server.login(user);
    if(result.success){ // 注冊成功執行的操作 }else { // 注冊失敗執行的操作 }
}

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

列表時間排序到底應該正序還是倒序？哪種體驗會更好？各大知名產品都是如何做的？

背景

前陣子正好做到了一個類似“申請通知“的功能，因為涉及到列表，所以要考慮列表的排序規則，那么問題來了，要用哪種排序規則（拼音、時間…）？

當然，這里肯定會用時間排序，那么按照時間的正序（新的通知在下面）還是倒序（新的通知在上面）？以下將進行一個系統的分析，列表時間排序到底要正序還是倒序？

產品分析

我們可以先看下市場上的產品都是怎么做的，在這里我將這些產品分成了兩類（可能不全，這里不談評論頁面哈）：

1. 消息通知頁面

一般由產品推給用戶，可能是產品運營通知，也可能是其他用戶發生了一些操作等。

看了很多產品的例子，這里就不全部列出了，幾乎大部分的通知列表都是按照時間倒序，只有網易馬上辦和拼多多是正序。

2.內容信息流頁面

內容更新相對比較頻繁：

幾乎所有新聞資訊類都是這種類型的列表，采用的都是時間倒序。

微信和釘釘邏輯分析

1.微信

提及微信大家對微信新版本的一大改動肯定非常熟悉了，那就是訂閱號的變化，微信把用戶關注的所有訂閱號的新消息拿出來放到一個頁面——訂閱號消息，它的排序是倒序，而其他具體的訂閱號內部歷史消息是正序，另外新的好友申請消息頁面是倒序。

那么微信的這些模塊為什么排序規則不一樣呢？背后的原因是什么呢？我個人認為有幾點原因：

1. 首先新的訂閱號類似新聞資訊一樣（可能微信就是想把它打造成這樣，這點我們不展開），所以按照倒序排列也講得通；
2. 具體訂閱號中按照正序排列是因為頁面下面有操作，可以進行文字的輸入，所以這個頁面很像聊天頁面，按照正序也有道理；
3. 騰訊新聞這個功能模塊的排序有點不太理解，明明是新聞類，排序是按照正序，和訂閱號很像，這里我也分析了兩點原因：

1）畢竟微信主體功能是IM，那么其他的模塊都是附屬，不是主要功能，可能騰訊新聞的根本目的就是為了給騰訊新聞APP導流。

2）將其他的模塊做成訂閱號模式在產品層面一致性和復用性很高，既保證了體驗一致性，又減少了開發成本。

綜上所述，微信內部列表排序規則是根據具體場景和功能決定的，其實都可以講得通，不過單純就某些模塊的體驗來講卻是有些勉強。感興趣的話，大家可以看看支付寶，它的內部所有的列表高度一致，都是按照倒序，包括它的生活號（和微信的訂閱號很像），這里就不講了。

2.釘釘

釘釘作為一款企業級IM產品，大家也許并不陌生，它的功能可謂相當復雜，涵蓋了很多模塊，已然做成了一個大的平臺生態系統，那么是不是因為功能的復雜導致了內部一些列表的排序規則各不相同呢？

說實話我是有些懵的，比如其他大部分產品的通知都是倒序排列，而釘釘就是正序，那如果說釘釘有自己的產品規則和邏輯的話，為啥有些類似通知的頁面排序又是倒序？

這個實在講不通，而且場景和功能層面這些列表其實還是比較相近的，那唯一能解釋的可能就是互聯網界經常說的——“這些模塊不是一個團隊做的”。

思考

綜上，大家可以看到，基本大部分產品都是采用時間倒序，也就是的內容在上面，也有小部分采用正序，那么為什么會按照這樣的邏輯呢？我進行了幾點分析猜測：

1. 用戶視覺流習慣從上到下，產品希望用戶能及時關注新的內容，所以按照正序
2. 列表可能有一些操作，如下拉刷新、篩選，的內容靠近操作會更自然
3. 列表中若有回復的功能（微信公眾號），更類似IM聊天頁面，所以正序新的內容在下，比較合理
4. 產品內部體驗一致性，大部分產品內部只采用了一種排序規則（除釘釘和微信新公眾號），這讓用戶在使用同一款產品時，體驗是一致的，有預期的。
5. 技術實現，技術實現的框架可能產品內部采用了同一套方案，所以如果是正序都是正序，是倒序都是倒序。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

想做好一個好的UI設計師除了應該具有一定的審美能力，還要了解整個產品的開發過程，因為目前國內的軟件行業還不能對UI設計形成應有的重視度，所以對我們的要求就更高了，你要能作出奪人眼球的東西，還要站在用戶的角度充分了解他們的需求和使用習慣，因為一般的軟件公司的UI設計師只有一個或者幾個也都是孤軍奮戰，而且經常會碰見沒有經驗的TEAM LEADER,不懂得協調你和其他團隊成員的工作，所以你還要與團隊成員充分溝通，來獲得設計中所需要的基本信息，要有耐心有好脾氣，做界面設計的工具一般有PS、AI、FH、CD、c4d、（至少一個），Dearweaver、FLASH HEML；編程方面最好能跟程序員同步，懂一點ASP JSP等軟件開發語言、還有開發壞境、服務器種類；還要耐得住寂寞，在漫長的項目開發過程中，你的工作可能只是前期，到了后面可能會有很多的空間時間，用來學習充電是不錯的選擇。

嗯，首先呢，這是我從零基礎到現在老司機寫的一篇小經驗文章，也是我首次發表文章，廢話不多說，進入主題。

目前有太多太多的同學被UI這個行業給吸引了過來，都紛紛進軍UI了。但是選擇了進軍UI，當然就要開始學習了，我相信有很多同學挺迷茫的，迷茫是在于選擇培訓班去培訓呢，還是自己在家自學。在這里我個人建議，如果經濟不差的話，你可以去選擇一家較好的培訓機構學習，這樣也比較有可信度些，如果你實在是幾千塊錢都沒有，分期幾百塊錢一個月都有壓力的話，那么我建議你還是自學好了。（老司機：為自己學習千萬不要想著省幾塊錢）

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、設計中的重復是什么？

在平面設計中，重復構成是常用的一種構成方法，通過重復可以使畫面達到和諧、統一的視覺效果，并能加強給人的印象，也可以達到一種有規律的節奏感和形式美感。

排版的四大原則：對比、對齊、親密性、重復，重復在排版中也占據了一席之地，可見它在設計中分量是不可小覷的。

格式塔原理：接近性、相似性、連續性、封閉性、對稱性、主體/背景、共同運動，格式塔原理中的對稱性就是重復的一種表現方式；格式塔原理中的相似性算是重復中自帶的一種突變。

1. 重復

重復是設計中最基本的形式。在同一設計中，相同的形象出現過兩次或兩次以上就形成了重復。

在產品設計中重復的元素有大小、形狀、配色、間距、組件、圓角值；在交互層面重復的元素有位移（方向）、旋轉、縮放、不透明度、相同屬性交互要一致。

在產品設計的前期設計師需要輸出界面設計，為了方便下游前端工程師更好的規范和適配，也要保證產品后期上線產品視覺稿的高度還原，這就要求設計師輸出一整套產品的視覺和交互規范。

重復配色

在 app store 的頁面中使用了相同的顏色進行提醒，方便用戶快速查找和點擊，整體的藍色又給人理性的感覺，看到付費app 的好評數可以看出是因為產品好才推薦你進行理性消費。

重復大小

INS 主頁第一排頭像相同大小進行重復排列，與內容的人物頭像有大小對比之分；INS 搜索頁采用了九宮格布局，為了重復中有變化它把右邊的四個方格合并成一個內容展示區域，推薦好的熱門視頻。

重復間距

Airbnb 界面中的間距非常規范，首頁大體采用了谷歌里面的8px 原則，每個間距之間的規范很多1:2的比例關系。好的比例規范會給界面帶來簡潔大氣的感覺。

重復組件

（如圖標注）INS 界面中用了統一組件，相同的圓角和高度規范又給畫面增加了統一性和連貫性。

2. 突變

在相同的形象重復出現時，嘗試去改變某一形象的形狀、顏色、大小、不透明度等來豐富畫面時我們稱之為突變。

格式塔原理中的相似性也是重復中突變的一種形式。

在產品設計中我們運用的突變的目的很簡單就是為了讓其更加突出，多用于區分當前狀態、選中狀態和默認狀態。

banner輪播

banner輪播圖上面的提示狀態會根據當前狀態和默認狀態進行區分，把當前狀態進行變化從而進行凸顯出來。

導航欄分類

導航欄分類上面的提示狀態也是根據當前狀態和默認狀態進行區分，把當前狀態進行變化從而進行凸顯出來。

按鈕

在登錄注冊頁面中，我們會通過大的色塊凸顯登錄按鈕，引導用戶快速登錄進入到 app 里面。也減少了用戶的思考過程，符合大腦的惰性。

但是在很多 windows系統中，卸載軟件時會跟你玩文字游戲，會用非、否、不是等誘導你作出錯誤的判斷。

feed流

feed流是產品中持續更新并呈現給用戶內容的信息流。feed流在產品展現形式有列表、瀑布流、卡片形式。

站酷首頁 feed流里面會把內容分為作品和文章，之前版本中的作品和文章的樣式是一樣的，新版本中重點是推作品，當文章出現時通過改變文章的排版進行區分，重復里面又帶有變化。

3. 節奏感

多少元素排列可以形成節奏感，一般來說是3個或3個以上，兩個你不能說是節奏感只能說它是重復。當3個或3個以上整齊的排列就會形成一種節奏感。

左右滑動

（如圖來自uistar）界面中三個書籍整齊的排列在一起，可以通過左右滑動來獲取更多的書籍。在使用左右滑動效果時，應考慮元素的數量，盡量不要超過10個以上。

列表頁

（如圖來自uistar）列表頁面整齊的排列在一起有一定的節奏感，通過改變 icon 的配色來豐富畫面。

4. 韻律

元素在排列的過程中有形狀、顏色、大小、不透明度等有規律的變化就形成了一種韻律感。在動效上主要還是通過位移、放大縮小、旋轉、不透明等變化來制作界面動畫。

最美有物

最美有物app 的畫報界面中，通過改變每個界面的大小比例有序的排列在一起，通過上下滑動可以快速瀏覽標題，進行查找翻閱，整個過程很流暢，整個界面有流動性和韻律感。

圖表

圖表在設計的時候通過不同顏色來區分不同的時間段，線條錯落有致的排列增加了界面的韻律感。

配色

△ 來自Prakhar Neel Sharma和crisssamson

這兩個作品都是通過色彩按照紅橙黃綠青藍紫規律運用到界面中的背景和列表中，增加了畫面的豐富感和韻律感。

重復在動效中如何運用才會有韻律感？

界面動效中主要分成當前狀態動效變化和轉場動效變化，界面中的元素a1對b1、a2對b2、a3對b3信息對等，能幫助界面做出很有韻律感的動效。

二、總結

重復可以使畫面秩序化、整齊化，形成和諧、富有節奏感的視覺效果，更加有利于人們加強對畫面的記憶。

重復、突變、節奏感、韻律幾種不同的方式都是存在于產品當中的，幾種不同的美感可以同時存在的，只不過它適應不同人群的審美能力，審美能力高一點的更喜歡一些變化，審美能力相對基礎更喜歡簡單的重復。

所以畫面中不斷出現同樣的元素這叫重復，而在很多重復里面突然出現一個變化這叫突變，相同元素整齊的排列在一起這叫節奏感，而這些元素在排列的過程中有形狀、顏色、大小、不透明度等變化就形成了一種韻律感。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

圖片標簽

    


        


            


                


                

            

            


                

                    <!DOCTYPE html>
                

            

        

        


            


                


                

            

            


                

                    <html>
                

            

        

        


            


                


                

            

            


                

                    <head>
                

            

        

        


            


                


                

            

            


                

                    <meta charset="utf-8">
                

            

        

        


            


                


                

            

            


                

                    <title></title> 
                

            

        

        


            


                


                

            

            


                

                    </head>
                

            

        

        


            


                


                

            

            


                

                    <body>
                

            

        

        


            


                


                

            

            


                

                    <h1>這是一個圖片</h1>
                

            

        

        


            


                


                

            

            


                

                    <!-- 圖片標簽<img src=路徑屬性 alt：加載失敗后顯示的文本  width:指定圖片寬度  height:指定圖片高度  單位:px> 
                

            

        

        


            


                


                

            

            


                

                    路徑屬性：
                

            

        

        


            


                


                

            

            


                

                     絕對路徑
                

            

        

        


            


                


                

            

            


                

                     E:\ruanjian\軟件\環境\images
                

            

        

        


            


                


                

            

            


                

                     相對路徑：相對于主文件位置的路徑
                

            

        

        


            


                


                

            

            


                

                     同級：直接寫文件名.后綴名
                

            

        

        


            


                


                

            

            


                

                     上級：../文件名.后綴名   ../返回上一級文件夾
                

            

        

        


            


                


                

            

            


                

                     下級：文件夾/文件名.后綴名
                

            

        

        


            


                


                

            

            


                

                     -->
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/ad.jpg" alt="加載中" width="1000px" height="500px">
                

            

        

        


            


                


                

            

            


                

                    <img src="../img/1.jpg" alt="加載中"><br><br><br><br><br><br><br><br><br><br><br>
                

            

        

        


            


                


                

            

            


                

                    <img src="../footer.jpg" ><br>
                

            

        

        


            


                


                

            

            


                

                    </body>
                

            

        

        


            


                


                

            

            


                

                    </html>
                

            

        

    

2018年Behance 上最值得關注的20個設計趨勢...

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、設計師的現狀

1. 設計師已經開始被人工智能取代

2018年緊跟2017，是人工智能重點發力的一年，關于「人工智能會完全取代設計師」的話語層出不窮，很多從業者倍感危機。

崔校長表示，AI 時代是真的來了，設計師也開始被人工智能所取代。

現在，很多負責垂直業務的運營設計師已經參與到智能體系建設中，建設素材庫、設定配色、排版規則和標準，幫助訓練 AI 等。

甚至美團點評也開發了可以做 Banner 的智能設計系統，不光可以做 Banner，今年內還可以自動生成活動主頁和簡單 H5 頁面，而且是多品類覆蓋，包括餐飲、休娛、麗人等。

相應的，設計部門原先計劃申請的運營設計師人數就減少，甚至不新增了。

盡管 AI 的強勢沖擊很嚇人，但是設計師工作中，例如設計師對目標受眾的理解，現階段是沒有機器可以替代的，頂尖設計師的專業技能在沖擊之下，反而會更加突出、顯眼。

2. 國內設計師普遍話語權不高

在國外，很多優秀的公司都是設計驅動，而國內設計師普遍話語權不高。

針對這個現象，崔校長認為，實際上國外很多「設計驅動」的公司，本質上是 CEO 驅動，有一個重視用戶體驗的 CEO，那么全公司做事都會重視用戶體驗。實質上是 CEO 在驅動，設計僅僅是執行。

而在國內，行業環境沒有那么舒服，特別是偏傳統的公司，高管層對用戶體驗的價值認知非常弱，所以才會有設計師話語權低的問題。

如果要解決這個「歷史難題」：

• 首先，設計團隊本身要對用戶體驗有清晰正確的認識，不能唯設計、唯用戶體驗論；
• 然后，通過專業手段，既保障了用戶體驗，又良好的解決了商業問題，

那么一定是可以在業務團隊那邊贏得認可的。

有了實際案例證明價值，下一步就可以做一些跨團隊的用戶體驗概念普及，去提供相關的認知度。

美團點評是一個高管層很重視用戶體驗的公司。在美團點評，用戶體驗部的價值是可以得到足夠認可的。

在這樣的情況下，大家依然會努力拓展自己的價值空間，會突破邊界，比如說交互設計師會做一些用戶研究和產品分析相關的事情。

項目產品 Leader 只需提供一個產品目標，而在「戰略層、范圍層、結構層、框架層、表現層」五個層面的分析研究和輸出工作，交互設計師都可以完成，產出一個完整的項目提案報告。

由此可見，設計工作者只要有實際案例證明價值，得到 Leader 的認可，加上持之以恒的拓展自身價值，提高自身話語權不是問題。

3. 對產品設計的認識還停留在圖形界面

很多剛工作的設計師擺脫不了專業的束縛，認為設計只是圖形的搭建，沒有更多思考。

對此，工作經驗豐富，且閱人無數的崔校長表示，這是一個普遍現象，也是一個正常的現象。

在社會化精細分工的時代，設計師從專業入手，自然而然地，一開始認知會局限在圖形界面上。隨著專業級別的提升，會擴大認知范疇，看到界面之外的東西。這是基本規律，沒有捷徑。

古語說：

不謀全局者，不足謀一域。

設計師應該有意識去突破邊界，這是正確的方向?，F實中有很多人無法突破瓶頸，往往是拒絕突破邊界，思維的局限導致了個人價值的局限。

4. 設計的好壞沒有絕對的評判標準

大家都知道，設計是有好壞之分的，但卻不一定清楚這個評判好壞的標準。

崔校長認為，設計師沒有一個絕對標準來評判好壞的。

在商業團體中，一切資源投入都是為了達成商業目的，所以能幫助達成這個目的的設計就是好設計，這是一個評判標準。而具體的標準，根據團隊的商業目的差異，有很大區別。

在商業團體中，用戶體驗是實現商業目的的一種手段，脫離商業目的，講純粹的用戶體驗就是耍流氓。

只有擺正了這個認識，在職場中就更容易獲得成功。

二、設計師的突破

1. 保障用戶體驗是第一標準

現在，很多人都在倡導，設計規范化、組件化，這種趨勢是有利有弊的。

針對這個趨勢，崔校長建議，不能唯規范唯組件論。雖然規范化、組件化這類比較基本的設計增效手段，可以明顯提升基層效率和基礎質量，但是規范和組件只能保障底線，無法拉高設計質量的上限。

比如有的設計師會跟產品說，我們的規范如此，所以只能這么設計，這是錯的，規范不是一刀切的標準，保障用戶體驗才是第一標準。

該用規范組件的時候就用，如果場景上不適用也不能硬用。

2. 用戶體驗設計，不僅僅要把界面做好看

作為用戶體驗設計師，要有把界面做美觀的能力。

除此之外，崔校長還說：

界面好看是最表層的設計體現，真正的用戶體驗遠不止于此。

《用戶體驗的要素》所描述的「戰略層、范圍層、結構層、框架層、表現層」五個要素，要做到都充分、專業、邏輯連貫，最終才能獲得一個在線產品的良好用戶體驗。

在構建一個良好的用戶體驗時，更重要的是表現層背后的商業體系、產品目標、用戶心智模型，對設計依據做充分的研究和挖掘才是根本。

3. 方法論為主導，找靈感

遭遇設計瓶頸時，找靈感也是有技巧的，有一部分設計師，憑空想靈感，這是低效的。

崔校長建議，以方法論為主導，找靈感。

崔校長說：

設計的目的是為了解決問題，應該以理性思維為主導，去定義問題，分析問題，解決問題。如果以 Idea 導向，也就是通過試錯來驗證有效 Idea，這跟碰運氣差不多，效率非常低下。

在美團點評上海用戶體驗部的設計路徑中，總體是以方法論來主導，僅在方案的表現層，會運用頭腦風暴和素材搜集的方式幫助激發靈感、發散方案。

4. 注重自身和團隊的共同成長

在學習、成長上，每個工作者都更注重自我的成長，這是必然的，設計師也不例外。

但工作究其根本，是自我成長、團隊成長、產品成長的結合，優秀的團隊一定都是非常注重這三方面成長的，美團點評也是如此。

崔校長說，美團點評有涵蓋各個專業的互聯網+大學，在設計方面設有設計學院，沉淀了很全很豐富的方法論和案例，同時公司還有復盤文化，大家會從每次的項目實踐中，總結經驗、獲得知識。

崔校長建議，設計師應該嘗試「跨界」，個人能在其中飛速成長，這是經驗之談。

校長本人是學計算機專業的，做過產品經理，最后在設計領域深耕。

這樣的綜合角色幫助他更宏觀、更完整地去看產品體驗搭建的過程；能夠更好的理解上游產品角色到底關心什么，下游開發角色需要什么；能夠更好的跟相關角色溝通，并讓設計發揮更大的價值。

所以設計師不僅要注重外部學習環境，還要注重自身的跨界、不斷拓寬邊界，自身和團隊共同成長，這對你職業生涯的發展產生不可估量的價值。

5. 優秀的設計團隊不能沒有管理者

設計不是單打獨斗。

一個優秀的團隊應該注意哪些問題呢 ?

對團隊進步起著關鍵性作用的管理者應該是怎樣的呢？

對此，崔校長認為，優秀的設計團隊在團隊建設上，要有完善的管理制度、完善的專業體系、扎實的人才梯隊，在結果上要有優秀的產品案例。

作為 Leader ：

• 首先，要專業過硬、學習能力強、格局大；
• 然后，要賦能團隊，用你的決策力賦能，給團隊判斷正確的方向，不走錯路；
• 用專業能力賦能，指導團隊提升專業高度；
• 用協調能力賦能，讓團隊運作更。

剛剛成為 leader 的同學，可能會不適應與設計師完全不同的工作模式。

對此，崔校長建議，此時你最需要注意的是思維轉換。思維轉換首先需要明確三個角色，崔校長總結為「三位一體管理模型」，分別是教練、裁判、經理，這三者缺一不可。

• 在項目過程中，要發揮教練角色，進行專業指導，保障設計輸出質量，如果教練角色缺失，設計質量難以提高，設計師成長難。
• 在評審和決策的時候，要發揮裁判角色，給出明確的結論，承擔決策責任，如果裁判角色缺失，容易變成甩鍋俠，把自己的責任丟給基層設計師，設計質量容易失控，也會導致設計師壓力過大，產生流失。
• 最后是經理角色，去思考團隊建設，去選擇團隊需要的設計師，對設計師的績效進行判斷，識別出哪些應該重點培養，哪些應該淘汰換血。經理角色缺失會導致吃大鍋飯的局面，團隊能力止步不前，陷于平庸化。

6. 保持溝通

溝通，在設計師的工作內容中占了不小的比例。

跟團隊同事進行合理的溝通，在一定程度上，能提高工作效率，專注設計質量，將更多的時間放在設計本身。

對此，美團點評崔校長很有發言權。

美團點評上海用戶體驗部現在有100多位設計師，對接的產品經理在500人以上，對接的程序員在1000人以上，而且上下游部門都是分散的。

產品部門和研發部門都是多個的，不像 UED ，只有一個部門統一管理，那么溝通方面確實有很大的難度。

崔校長表示，為了團隊溝通更，美團點評內部要求 Leader 跟相關部門的 Leader 建立良好的溝通機制，保障信息通暢；然后，用設計流程規范，來要求設計師跟自己的上下游對接方充分溝通；最后，團隊風格上推動設計師走出去，深入上下游討論和協作，跟進產品討論會，多到開發位置上確認實現的細節。

崔校長還分享了一個關于溝通的小故事：

在搬了辦公區之后，產品的座位離設計師只有一個過道之隔，于是設計師開始有了一些「小煩惱」。產品經理一有問題就隨時找設計師討論，設計師的工作總被打斷，卻不太好意思拒絕產品。

這是一個比較有趣的現象，說明產品跟設計師之間溝通非常緊密，而且很信任設計師的專業度，能夠一起有效地解決問題。

這個場景在團隊內部時有發生，這個「煩惱」對設計師而言，可以說是不可避免的。

對此，崔校長建議設計師要做好時間管理，掌握好溝通的時間安排，不能影響了總體的設計效率。

總結

設計不設限，是每一個設計師都應該思考的方向。

只有自己不甘現狀，勇敢突破，才能以更高的速度進步，才能在互聯網高速發展的現在，甚至未來，成為最后的贏家。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。