標簽: ui 界面設計 設計流行趨勢 社交APP

1.遙望app

1.視覺設計

遙望app的設計在整體上的風格化很強，有自己的獨特性。為了讓用戶之間的粘性更好，更是在活動上、動效上花了很多心思，給用戶帶來很多有趣且良好的體驗，讓我?guī)闳ンw驗一下吧

2.設計語言

整個app的設計語言貫穿了星形、圓形和三角形 ，同時增加上面三種圖形的線性來點綴設計。tab圖標是圓形和三角形的排列組合，同時增加線的形式點綴其中，層次更加豐富。其他頁面的設計也是同理，通過將上面3種圖形排列組合，貫穿到整個頁面，設計語言十分統(tǒng)一。

3.空界面設計

空界面的設計運用手的動作將每個頁面的情緒感拉的滿滿的，在互動消息的版塊，從關注到@我，每一個頁面通過不同的情緒表達方式極大了緩解了用戶的焦慮，同時也增加了一些趣味性。

4.勛章設計

勛章是根據(jù)你的確幸值的多少，等級的高低，送禮物的多少，以及你在平臺的表現(xiàn)會給你發(fā)放不同的勛章，以此讓用戶享受到尊享和定制的感覺，增加用戶的參與感和在平臺的粘性。

2.動效設計

遙望app的動效設計也是十分的流暢和有趣，線性的風格特征的插畫、溫暖的文案和趣味的動效，帶來的絲滑體驗感十分強烈。

1.匹配器

遙望app首頁上面的頭像是匹配器，隨著頭像慢慢的流過,頭像旁邊還有對話框彈出介紹用戶的信息，點擊會有兩只手彼此召喚，再點擊幸會就可以和其他的朋友打招呼了。在匹配器下面的“遙望一下”點擊也可進入到好友快速閃過的頁面，點擊可以同樣到打招呼頁面，多個入口引導用戶相互吸引從而形成社交動機。

2.下拉加載

加載的動態(tài)效果加入了遙望的IP形象，一個是像地球一樣的自轉，一個是像風箏一樣在天空飛的效果，動態(tài)十分流暢且有趣。

3.記錄心情

記錄心情這個是個很有趣的設計細節(jié)，在記錄心情發(fā)表后，在查看心情的小罐子里就能夠看到你的心情小表情，并且還有心情占比、情緒波動分析，最后在日歷上還能看到每日心情的狀態(tài)，可以很好的記錄每日的心情。

查看心情

3.彩蛋設計

1.放個氣球

放個氣球把心情寫進氣球發(fā)送出去，可以抒發(fā)自己的情緒。同時，你想自己接收就可以點收一個，出現(xiàn)氣球動效加載，就會接收到別人發(fā)出的信息，不想要了，可以點放飛消息就沒有了。

收氣球

2.發(fā)射泡泡

雖然泡泡這種形式很常見，但是遙望在細節(jié)處做的設計還是很用心，很容易觸動用戶。發(fā)射泡泡很容易讓然想到泡泡相機，加上“biubiu”的音效，有很強的場景感。

2. 配配app

1.視覺設計

配配app的設計可以說是以IP形象為切入的設計，app里面有著各種各樣的表情和動勢，生動且逗比。而且配配在設計的時候會融入很多小的細節(jié)，也能帶給我們很多不一樣的感受。整個ip融入可以說做的很徹底，能夠讓用戶的品牌感知十分深刻。

2.文字字體

貼貼功能用了一個超大的特殊的文字字體設計，十分醒目，在瀑布流的頁面對用戶的信息區(qū)分的比較清楚，但是對于用戶的照片也形成了遮擋，有的時候并不是很好。發(fā)布貼貼的超大字體的設計很少有人這么設計，雖然看起來粗糙，但是卻與眾不同。

3.品牌融入

配配app讓人印象比較深刻的就是這個IP的形象了，在頁面的各種地方都能看到他，無論是在催促你、還是在悠閑的吃東西，還是舉起手或是一起打call，哪里都少不了它。它的設定非常生活化，也很貼近我們的日常，所以這樣才更夠親近。

2.動效設計

1.點亮

點亮設計就是點擊后，寫下一個故事就可以和其他用戶打招呼了，點亮后燈泡會發(fā)出光，然后有星星散落下來，將表情運用在按鈕上也是很新穎的設計方法了。

2.發(fā)布動態(tài)

發(fā)布動態(tài)的功能IP會向你招招手，引導用戶參與發(fā)布動態(tài)。

3.動態(tài)背景

配配的動態(tài)背景很有意思，打call、吃蘋果、打盹，根據(jù)不同用戶展示不同的動態(tài)背景。

3.糖果app

糖果app的設計在于匹配器和其他的很與眾不同，像是在一起炫舞的樣子，看起來很有場景感。糖果app的整體視覺風格比較中規(guī)中矩，

不過有一些的功能設計和設計小細節(jié)值得體驗一下。

1.廣場匹配器

糖果的首頁的匹配器設計是一群人在廣場上一起炫舞，然后各自擺著不同的怪異的姿勢，設計上十分新穎。

2.戀愛上上簽

戀愛上上簽就像我們去寺廟里求姻緣一樣，通過搖晃簽子就可以找尋到好姻緣。罐子上的表情左看看右看看然后閉上眼睛，最后終于連接上一個十分匹配的好友。

3.解憂罐子

解憂罐子就是把心情放在罐子里，發(fā)送出去，別人可以看到你的罐子，然后你自己也可以做罐子發(fā)送給別人。

4.無聊嗶嗶雞

無聊嗶嗶雞就是一只雞不停的晃動，可以發(fā)送一句消息直接可以連接到好友。

4.Blurrr app

Blurrr app是一款功能強大的視頻剪輯軟件，Blurrr雖然是一款工具軟件，但是在配色和設計上還是十分大膽，熒光綠的顏色和黑色的結合，十分亮眼，里面的動效也十分細膩，非常吸引人的眼球。

引導頁的設計用多彩的圖形設計+表情+動效設計的方式，打造了靈動的引導頁設計，形成了自己很獨特的風格。

一、Photoshop(Beta)版本安裝

PS的AI功能需要在Beta版本中才能使用，安裝過程很簡單，可以從下列這個網址前往Adobe官網下載Photoshop(Beta)版本：

https://helpx.adobe.com/cn/photoshop/using/generative-fill.html

點擊「試用」按鈕，會調起電腦中的Creative Cloud應用，正常來說大家電腦里有Adobe軟件一般都會有Creative Cloud，沒下載的話按提示下載就可。

在Creative Cloud中找到①Beta應用程序，點擊②安裝按鈕，再點擊③打開按鈕，就可以啟動Beta版PS啦！(我這里已經安裝過，所以直接顯示了安裝按鈕)

Beta版PS白色的logo和有趣的啟動頁面??

二、AI創(chuàng)意填充功能

Midjourney生成的圖默認是方形，主體位于畫面的中央。如果我們想把主體的位置移到畫面左側或右側，需要花費很大的精力，而PS(Beta)的AI創(chuàng)意填充功能可以很好解決這個痛點問題！

下圖是在Midjourney中生成的例圖，人物在畫面的正中間，關鍵詞描述：

「A portal to another dimension, with a blonde woman dressed as space girl, cyber punk style, hyperrealism, 4k, natural light. --v 5.1」

如果我想在不摳像、不變形拉伸的情況下，把圖片變成橫版尺寸，并把人物移到畫面右邊，需要在PS(Beta)中怎么操作呢？

① 先把例圖拖到PS中，用[C]裁剪工具在畫布左邊拉一個空白。

② 切換到[M]選框工具，框選剛才拉出的空白畫布，下方會出現(xiàn)一個工具欄。

③ 點擊工具欄的第一個「創(chuàng)成式填充」按鈕，進入到AI創(chuàng)意填充功能。

PS的創(chuàng)意填充看起來很像把Midjourney的輸入框移植到PS中，但功能上又和Midjourney不太一樣：

·PS的輸入框沒有復雜的指令，只需要輸入關鍵詞描述，就能夠在選區(qū)內生成想要的內容；

·支持不輸入內容，直接點擊「生成」按鈕，AI會根據(jù)畫面周圍的內容智能填充選區(qū)。

三、不輸入內容直接生成

第一次體驗我沒有輸入任何內容，直接點擊PS的「生成」按鈕，一次能生成3張圖片。點擊左右箭頭可以切換查看3張圖，如果覺得不滿意可以再點擊「生成」，再生成3張?zhí)畛鋱D。

效果圖1??

效果圖2??

效果圖3??

第一次測試生成的圖片效果遠超出預期，和原圖風格也很接近，唯一不足的地方是和原圖拼接處有一條白線，看起來有點礙眼。

經過多次嘗試后，終于發(fā)現(xiàn)了問題所在：如果框選時剛好只選取了空白畫布，生成出來的新圖和原圖之間就會產生明顯的接縫。簡單高效的解決方式是在框選畫布的時候多框一點點原圖。

這樣再點擊「生成」按鈕，運算出來就會有很完美的過渡，看不出破綻。

四、輸入關鍵詞描述

體驗完不輸入關鍵詞直接生成后，接下來體驗一下輸入關鍵詞描述后生成的圖片效果如何～這次使用同樣的方法在例圖右側先拉出一個空白畫布，輸入關鍵詞描述：

「Particle effect, sense of technology」

生成的圖片效果很棒，和原圖完美地融合在一起，不得不服啊太厲害了！

效果圖1??

效果圖2??

右側的屬性欄會記錄你剛輸入的關鍵詞，可以隨時修改關鍵詞，點擊再次生成3張圖，依次類推，生成的所有圖都會保留下來，方便選擇。

最后

通過這次體驗感覺PS的AI填充非常強大，而且效果很精準，誰能想到在PS中就能完成對一張圖的拉伸和智能填充。

進入喜茶小程序的時候給我的感受是簡潔、時尚、極致的設計風格，截了兩張小程序內的兩個界面。 確實做的還挺不錯的，為什么給人感受不一樣？接下來我們分析分析

1.版式

1.首先從下面的頁面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設計給人不對稱的感覺，這樣的設計能讓用戶記住，同時又有一點時尚范的感覺，很符合喜茶目標用戶年輕人的審美。
2.同時產品的banner是3:2的比例，較為靠近黃金比例的尺寸。 

1.點單頁面，喜茶新增了新品推廣位，一些新上的產品都會在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報一樣，同時第三個廣告位露出部分，讓用戶知道后面還可以左滑查看。同時推廣頁的右下角有個箭頭指引，告知用戶可點擊。 

2.看完這幾個頁面會發(fā)現(xiàn)，喜茶的基本上都是純直角的設計語言，推廣頁是直角、標簽是直角、按鈕微圓角，直角的設計語言給人的感受是時尚、極致、極簡的設計感受，個人非常喜歡。 

3.但是點單頁面的有點亂，標簽的顏色過多，不夠統(tǒng)一，圖標的也非常的多，這樣給人的感受就會比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶的效率。

1.在點單頁面用戶上滑，推廣位漸漸的往上消失，這樣產品的展示會更多，利于用戶挑選和尋找。 

2.用戶在選口味界面，發(fā)現(xiàn)每一個標簽的內的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁面給人感受簡潔、易操作，同時用戶可以選自己的口味，可進行保存，下次點直接就可以選擇自己的口味。

在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個模塊的都是不一樣的，很多產品的商場頁面都是一致的，而喜茶在產品的展示會以不一樣的形式出現(xiàn)，每一個模塊都有尺寸和排版的差異，這樣給用戶有種落錯感，更加有設計。

2.會員頁

1.喜茶的會員頁給我眼前一亮的感覺，會員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。 

2.會員頁用戶在切換的同時圖標的顏色會跟著會員的顏色變化，特權的內容也會有不一樣的變化，讓用戶有明顯的等級感知。 

3.切換到“黑卡”的時候，會發(fā)現(xiàn)會員頁的“喜”字加上了質感。 

4.會員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產品的會員做了區(qū)分的同時又加深了品牌印象。

3.圖標 

喜茶有兩種不同風格的圖標，一種是比較極簡，線性，差異性沒有那么強，而另一種則是插畫風格的圖標，給人感受比較有趣，更有差異，極簡則符合喜茶整體小程序的調性，而插畫又豐富了頁面的單調性。

4.動畫 

1.喜茶頂部的banner做非常不錯，例如跟FENDI合作的會在首屏加入視頻，用戶一進入小程序就能看到能很好的吸引用戶的注意。 

2.用戶在左右切換banner時，文字會先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動畫效果能給產品加分，給用戶留下好的感受。

5.字體

1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進去喜茶看到他們的數(shù)字字體非常有獨特性，給人的感受時尚、極致、有設計。 

2.部分界面和海報喜茶會用上方正悠宋，有點中國風、古風的韻味在里面，而且也非常有獨特的設計美感，喜茶會應用在國風的海報以及會員頁的“喜”字上，突出風格化。

3.好的字體能很好的提高產品的品牌感和設計美感，更能傳達該品牌想傳達的東西。

6.更多界面欣賞

一、認識帕累托法則

1.帕累托法則的背景

19世紀末，意大利經濟學家和工程師維爾弗雷多·帕累托（Vilfredo Pareto）發(fā)現(xiàn)，自家花園中80%的豌豆產自于20%的豌豆莢，在隨后研究土地所有權和財富不平等的問題中，再次發(fā)現(xiàn)意大利 80%的土地屬于 20%的人。
20世紀初，由管理學家約瑟夫·朱蘭（Joseph Juran）將其命名為帕累托法則，即80%的結果是20%的原因造成的，并且號召關注「重要的少數(shù)」而不是在「瑣碎的多數(shù)」當中投注精力。后續(xù)在經濟學中得出結論（80%的財富掌握在20%的人手里）更加證實了帕累托法則的觀點。

2.正確理解80與20

帕累托法則有很多不同的叫法，如帕列托法則、關鍵少數(shù)法則、二八法則、巴萊特定律、最省力的法則、不平衡原則等，后續(xù)筆者將其稱為「80/20法則」。
其實，80/20法則是一個較為抽象的概念，可以理解為：大部分的效果由少數(shù)幾項關鍵的因素來決定。在實際的場景中，“大部分”不是精確的80%，“幾項關鍵因素”也不是固定的20%，數(shù)據(jù)會有所浮動，可能是70%+30%或者90%+10%，但不管這些數(shù)字如何波動，其背后蘊含的規(guī)律（集中的投入將產出大于預期的結果）是不變的，并且生活中存在的許多不平衡現(xiàn)象，都與這個規(guī)律相當接近。

3.可適用范圍

80/20法則并不受人為直接控制，更多時候是自然而然的形成，其適用領域非常廣泛。早期大多數(shù)用于社會、經濟、管理以及工程等領域，而在80年代末就已經有設計師將其設計領域，在各行各業(yè)中，已經有大量的案例證明了 80/20原則：

• 人類80%的科學發(fā)明，來自于20%的人口
• 社會上20%的人占有80%的財富
• 城市80%的交通，集中在20%的道路上
• 20%的客戶為公司貢獻了80%的收入
• 公司80%的收益來源于20%的產品
• 20%的網站獲取了 80%的網絡流量
• 20%的常見軟件錯誤導致了80%的系統(tǒng)崩潰
• ......

4.設計領域中的運用

70年代中期出現(xiàn)圖形化界面，而到80年代末，80/20法則就已經被設計師引用在設計規(guī)范當中，后續(xù)經過不斷的發(fā)展及優(yōu)化，現(xiàn)已深入設計中的方方面面，PM用來處理KPI、UX用來劃分權重、UI用來決策版面布局等。
界面設計中該如何應用80/20法則，這就需要設計師時刻注意如何讓用戶更快找到目標、如何更順暢的完成任務以及如何擁有更愉悅的心理感受。例如80%的用戶只會用到20%的功能，那么設計師就應該將80%的時間、精力集中在這20%的功能上，不斷迎合用戶需求以及使用體驗。

二、產品如何應對80與20

1.關鍵性的20%

80/20法則能夠幫助我們提供決策思路、梳理設計方向，通過前面的了解，我們應該清楚了產品80%的用戶只會用到20%的功能，而80%的收益也恰恰來自于20%的付費用戶，甚至低于20%。
雖然一直呼吁盡量滿足所有用戶，但產品團隊的重心始終要圍繞著20%來進行，從產品到設計、再到開發(fā)測試，都能以此為方向制定問題的解決方案。

2.非關鍵性的80%

任何一款產品都不能忽略主次，每隔一段時間就要重新評估功能價值，以備后續(xù)的更新迭代，針對非關鍵性的80%切勿耗費過多的精力，以免喧賓奪主，不僅得到不好的反饋、還會帶來不必要的損失，吃力不討好。
對于已經過期的核心（曾經20%）功能，需要及時降低權重以及精力的消耗，不然即便是掌聲一片、也可能無法變現(xiàn)。

3.僅關注 20%有風險

用20%的部分創(chuàng)造80%的價值，并不意味著只關注20%的關鍵性指標、其它的就可以被忽略，這樣做表面上看是挺誘人，但會讓其他很多指標停滯，呈現(xiàn)出產品過度優(yōu)化的情況，造成短時間內隱藏的負面影響。
團隊應該要有眾覽全局的眼光，考慮到各指標間的相互影響，可視情況而定將時間和精力合理分配，如90%+10%、80%+20%、70%+30%等，只要是將大部分用在關鍵性指標上即可。

三、在UI設計中的運用

在UI設計中，我們會將主要精力花費在20%的頁面設計上，例如APP底部標簽欄的幾大主頁或其它重要的一/二級頁面，會花費更多的心思去構思不一樣的布局、表現(xiàn)手法，將設計功底凸顯出來。而剩下80%的頁面就相對機械化，會使用一些常規(guī)樣式以及復用的方式像搭積木一樣快速完成，成本之低、效率之高毋庸置疑。
同一個頁面的設計方式也是如此，設計師將大量心思放在首屏及位置靠上的功能上，待超過一屏后下滑時，設計也會逐漸輕量、組件化，這有助于節(jié)省產品、設計、開發(fā)更多的時間。

1.排版布局（F型）

用戶瀏覽屏幕時，眼球移動的順序通常都是從左到右、從上到下（基于網頁瀏覽眼動測試），這種移動軌跡很像字母「F」，這也讓F型布局成為網頁設計中效率最高的方式之一，所以設計師通常會將重要的信息放在左上角或左側，不重要的信息放在右側。
如下面這張眼動測試圖，F(xiàn)型布局也正好詮釋了80/20法則合理性與可行性，在頁面中20%的關鍵區(qū)域，吸引了用戶80%的注意力。

2.功能入口設計

很多產品因為業(yè)務功能的龐大，一股腦的將信息全部展示出來，看起來十分臃腫，用戶不能快速找到自己想要的信內容，就會失去信心。
優(yōu)酷APP首頁將熱門頻道和點擊頻率較高的頻道顯示在頂部導航中，如精選、電視劇、電影、最新院線等，而其他更多的分類則隱藏在頻道選項卡中，將少量（≈20%）重要的內容放在明顯的位置，目的就是為了讓大部分用戶更快觸達，提高了產品的易用性。

3.選項列表設計

在一些選項列表中，由于選項數(shù)量的龐大，會給用戶增加使用難度。
例如，使用美團購買火車票在選擇地址時，面對超長的地址列表，逐個查看或通過字母篩選，都要花費一定的時間和操作成本，即便可以通過碼字搜索來完成，但因為自行輸入有很多的不可控性，能讓用戶選擇的就不要讓其輸入。對于地址列表，除開自動定位和搜索歷史，運用80/20法則就能很好的解決這一問題，系統(tǒng)將約20%高頻選擇的熱門城市作為單獨的模塊放在全部列表之前，提高了大部分用戶的搜索效率。

4.極簡風格設計

極簡風格的界面設計跟80/20法則在精神上保持著高度的一致，剔除多余、無用的元素，而保留的每一個元素都是有目的、有針對性的，也是絕對必要的存在。在極簡主義設計中，視覺上簡單干凈，大部分都是通過通過留白來襯托關鍵性元素的存在，讓用戶更加聚焦于主要功能/信息。

四、與其他法則的糾葛

1.與奧卡姆剃刀的結合

奧卡姆剃刀指出「如無必要，勿增實體」，需知頁面中每多一個元素都會增加視覺“噪聲”，意味著用戶需要花費額外的時間和理解成本，對用戶體驗的影響是很大的。那么問題來了，當產品需要增加一項需求量小但確實存在的功能，該怎么處理？
這時我們可以將奧卡姆剃刀原則作為最終的評判標準，是否需要增加上述所說的功能，就要看看能否很好的控制團隊開發(fā)成本和用戶體驗成本。其實在80/20法則中，很多小眾但確實存在的功能需求基本很難抵消所造成的用戶體驗損失，所以即便實現(xiàn)了這個需求，也很難分配出20%的精力去維護與迭代，甚至“俺耳盜鈴”般的將其遺忘，但這個視覺“噪聲”一直存在，如果事先能分析出這種結果，這個需求根本不需要增加。

2.與長尾模型的對抗

在2004年長尾模型才被提出來的時候，很多人認為這是在顛覆80/20法則，它們的曲線長得很像，但結論完全相反，那條長長的“尾巴”（非關鍵的80%）所占據(jù)的長度幾乎與頭部的（關鍵的20%）高度相當，這說明收益雖低，但這么多數(shù)量的累積，依然值得重點關注。所以有很多企業(yè)在采集差異化戰(zhàn)略時運用了長尾理論，例如小米搭建的全品類商城用的是長尾理論。
乍一聽好像很有道理，難道80/20法則被推翻了嗎？事實并非如此，長尾理論的成立必須要滿足兩個條件，第一是尾巴真的足夠長（小眾需求確實非常多），第二長尾巴能被用戶發(fā)現(xiàn)（龐大的用戶量），這兩個條件缺一不可。例如京東、淘寶、微信、支付寶等，其前提都是建立在大規(guī)模、且海量的用戶資源之上，不管多么隱蔽、多小的動能，總能擁有一些不錯的曝光度，所以才能發(fā)揮長尾模型的作用。
說道這里，大家應該就明白了，那些中小型的產品對長尾模型大多是望塵莫及，所以在你的產品規(guī)模、用戶量沒有達到一定的級別之前，就不要妄捧長尾模型，用好80/20法則就好。

五、結語

80/20法則在實際工作中是一個相對普遍的定律，它能讓我們靈活思考設計問題，更好的為用戶服務，雖然80/20法則也存在一定的爭議，但還是適用于覺絕大多數(shù)的場景，在關鍵時候使用，能幫助我們準確的找到問題點，在有限的時間和精力下快速作出優(yōu)化決策并、關注核心功能，最終達成目標。