作者：藍藍
表格，是一種最常見的信息組織整理手段，常用于信息收集、展示、數據分析、歸納整理。
UI軟件設計中最常用、最基本的是表格的設計，有些軟件中80%都是表格類頁面，可以說，設計開發的是否易用，很影響口碑和用戶的使用感受?；A的東西一定要做好，就像我們吃的主食一樣，雖然都是米和面，但是各地出產各種品種口味都不相同，要根據食客的喜好選擇、烹飪。今天就聊一聊最基礎的表格設計、變化和常見問題。
一、基礎的表格設計美化
基礎的表格可變化的地方很少，可以根據當前軟件開發選擇的框架控件（ext/vue/jequery不同框架會有一些不一樣）做色彩和風格的變化，如：加表格不同粗細的線、斑馬格，中間無豎線種種的設計，有的表格需要標題很突出，有的內文突出，這就和內容焦點相關了。
為了操作直觀便捷，在操作區放一些圖標“刪除、編輯、審核”，配合文字來使用，有的把操作類的圖標放在最左邊，有的放在最右側，按行業用戶習慣而定。
可以用固定表頭（標題位置不變），允許用戶排序，單元格內有很長的文字，設定最大字節，多內容用……替代避免轉行，有小數點的數字右對齊，每列的大小可調整，這些也是設計開發中可以做好的細節部分。
二、特別寬的表格怎么設計？
有的表格的寬度，達到了屏幕的兩屏和三屏，出現寬寬的橫向滾動條，又有長長的豎向滾動條，但工作的人又必須看，可煩人了！很多軟件都因為這個原因被吐槽。下面就介紹三種方法解決這個問題：
方法一
如果表格的標題是可以定制的，允許省略的，可以從業務角度取舍去掉無關緊要的，不常用的內容，把這部分放在點開的詳細頁內容中即可。這就像一個房間的斷舍離：挑選、丟棄、分類、收納，思考哪些物品是不要的，哪些是必不可少的？哪些是可有可無的？依次排序放在順手的位置，ui設計的道理也是相通的。
方法二
如果表格里面的內容是確定的，不可省略的，比如銀行的報表就是這么長，這么多，那我們就可以從設計的角度來優化，做一個加高版的表格。
表格為什么一組信息只能一行呢？完全可以一組三行四行，在組中進行重點信息，非重點信息以及符號化的直觀轉變。用大小、對比、濃淡、色彩、間隔這些平面設計的基本原則，讓一個普通的“山里娃”土土的表格變成一個“青春靚麗、人見人愛”自帶明星氣質的表格。
方法三
大表格里面嵌套小表格，利用交互設計，巧安排空間。當用戶光標移至感興趣的那行的時候，關于它更多的內容，在下方滑動撐開出現或者右邊浮動出現。這個方式雖然比較土，但也確實管用。早年在看某一招聘網站的時候，每一個人的簡歷只要點名字就可以看到一組關鍵信息，便于迅速篩選，而另外一個招聘網站，就沒有這個功能，每個人都要打開之后才能看見整體信息，我后來就不怎么看那個網站了。多一步操作，對典型用戶就多了許多的工作量，網站和軟件的使用口碑，用戶粘度就是這樣在為用戶考慮中一點一點積累起來的。
上圖：大表格里面嵌套小表格
方法不會只有這三種，其他的方法要根據當時的業務，用戶使用的習慣、重點，因地制宜的去設計了。軟件中的表格節省了許多程序工程師的工作量，如果做大的改動或許是巨大的工作量，如果要做變動，一定要在開始的時候就要讓ui設計納入開發體系，一生二，二生三，在前期第一批實施時越注重細節，后期就會越輕松，甚至省去幾倍甚至幾十倍的時間挨個頁面的去糾偏、修改。
一個系統總是需要業務擔當，顏值擔當的核心部分，重要的頁面要額外的對待、花更多的精力和時間。如果千篇一律，也就不能顯示出軟件產品的獨到之處了。
第三 與表格配合的部分設計
第一種 “搜索查詢”和“過濾”部分的設計
大多數表格的前面都有搜索過濾功能，如果搜索條件相當多，可以精選一部分主要的排成一行，其他的隱藏，點箭頭再出現。整個搜索區域也可以有隱藏／顯示的按鈕，來給下面的表格更多的空間。
過濾條件區域可以定義好“條件名稱”一致寬度，一般在八個字左右，避免有的字節多，有的字節少，行數多了，參差不齊，區塊和區塊之間也要定義好統一的間距，這樣整體頁面就顯得整齊劃一、條理清晰。
上圖：搜索和卡片式信息的組合
第二種 表格操作部分的設計
對表格的操作“導入，導出、批量導出”有的時候這類操作有10—20個，有的時候才幾個，多的時候很占地方，可以用隱藏的方法，over到表格上再出現，以節省空間。
也可以分組把同類的操作聚合在一起，把常用的放在目之所及，不常用的點后下浮出現，以節省空間，
還可以光標跟隨表格的某一行，點選自動浮出一群小跟班，各種操作按鈕。即節省空間，操作移動路徑又很短。只是不支持批量操作。
第三種 表格和卡片式設計、統計圖的整合切換
表格是可以轉換成卡片式設計的，用一個卡片代替一行的展現信息，改變一種閱讀的方式。
有的也可以轉換圖統計圖表：曲線圖，柱狀圖讓用戶直觀的去解讀，而不必一直看枯燥的數字。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
原創藝仁 藍藍設計 2020-12-18
其中，3D成為2021年的主要趨勢，我們在所有的設計類型中都可以找到它。2021年3D的新穎之處在于應用在了UI界面上，而在此之前，UI界面一直被平面設計所主導。即將發布的Mac新操作系統Apple Big Sur也讓3D在UI設計中得到更頻繁的使用。
ios14的界面更新將影響所有的UI設計。ios14新推出的Widgets小工具分為大、中、小三種尺寸，用戶可以自由布置界面。因此設計師需要設計3種樣式的Widgets小工具圖標。
線稿填色這種插畫風格的流行在2020年已經初見端倪，在2021年也將繼續流行下去。
近年來3D風靡設計界，有一些精致的插畫給我們留下了深刻的印象。簡約而配色鮮明的3D插畫將成為2021年插畫的流行風格之一
時尚是個圈，70、80年代懷舊風漫畫將在2021年重回潮流。這種經典風格的插畫特點是使用輪廓、簡單的形狀和一些細節填充。
這種風格的插畫非常像凌亂的涂鴉，乍看未完成，但所有的細節都是經過深思熟慮的。重疊的形狀和強烈的色彩讓這些插畫與眾不同，同時能有效激發靈感。
VFX或視覺，是將現有的鏡頭與計算機生成的圖像相結合，創造出逼真的場景。隨著眾多方便友好的軟件出現，VFX開始在視頻和短片中會變得更加普及。
3D影響了所有的設計領域，我們甚至可以說，2021年，它主導了幾乎所有的數字設計。隨著虛擬現實在越來越多的App、網站或軟件中的應用，3D也將越來越重要。而設計師們可以將3D和攝影或2D結合起來，創造出一種不同的設計效果。
動態logo已經出現了好幾年了，但現在他們被更多的品牌使用，因此非常值得我們的注意。打開App之后，我們首先看到的就是logo，將logo與動效結合能給用戶留下深刻印象，從而更容易記住品牌。
因為疫情隔離，很多公司開始投資AR技術。在未來，我們可以看到，在人工智能和機器學習的幫助下，增強現實技術將大規模應用于各個領域，無論是醫藥、藝術、商業、客戶服務還是導航。
排版是設計中最重要的元素，有經驗的設計師甚至可以只使用文字排版來設計視覺標識。排版對于建立信息、建立強大的視覺層級、傳遞信息以及為用戶創造良好的體驗都很重要。
從上世紀初開始，幾何形狀就已經用于視覺藝術中，盡管這不是一種新的設計趨勢，但在2021年的平面設計中，無論是海報、印刷品、包裝還是品牌識別，都將聚焦于幾何形狀。
線條藝術充滿魅力，并可以在各種設計領域內應用。
疫情讓人們對環境保護格外重視，因此包裝行業必須開始采取措施，減少對環境的影響，使用可生物降解的材料。
經過深思熟慮后設計的獨特插畫可以為你的品牌故事產生廣泛影響。因此你必須謹慎地選擇能夠傳達你的品牌故事的插畫。它們必須是有意義，并給品牌帶來一致性的。
在銷售產品時，用優質的包裝設計講述有關品牌的迷人故事，能有效激發出購買欲。包裝上的所有元素都應該為客戶帶來獨特的體驗。
在人人都離不開手機的時代，包裝也可以和手機產生互動，比如使用AR等手段創造品牌知名度。
權威色彩機構 Pantone 公布了2021年度雙流行色：灰+亮麗黃。
這是繼2016年水晶粉+寧靜藍之后，第二次推出組合年度色，寓意光明，傳遞力量與希望?；?亮麗黃這兩個獨立的色彩，聯手打造出夢寐以求的色彩組合，像是自然風化的巖石上浮起的日出，帶來了一種更深層的體貼和踏實感，同時也表現了對未來充滿希望的樂觀精神。
當人們期望尋求能量來強化自己，克服持續的不確定感時，堅實可靠而又熱情洋溢的色調，恰好能夠滿足我們對生命力的追求。
在過去幾年里，潘通的選擇充滿了社會意義，被看作是對全球情緒的捕捉。
目前，已有相關設計產品使用了潘通2021流行色：
本文藍藍設計著重介紹一個未來可以配合3D設計趨勢的全新設計風格-新擬態設計。
光是人眼感知世界的媒介，溫和柔美的光影變化輔以精致優雅的配色紋理展現出真實世界原本物體的豐富質感。光影的把控影響著事物的情感表達，光影的流轉變化傳遞出不同的情緒，同時也影響人對事物空間感的判斷。
新擬態是一種圖形樣式，其原理是通過簡單富有層次的光影變化為界面的UI元素賦予真實感。新擬物算擬物風格的一種，只不過表現形式相對特立獨行，最早出現在國外網站dribbble上,之后陸續被收錄在2020設計趨勢預測中，在2019年的年末慢慢被大家熟知，討論，重視起來。
在2020年2月11號舉行的三星視覺發布會使用新擬態的設計手法作為設計海報。帶有漸變的淺灰色背景，結合富有層次感的光影漸變，充滿未來感。相對克制的色彩選擇和多角度的光影變化，強調出產品豐富的質感和科技感，簡潔而神秘。
這是一款多平臺記錄工具，有道云筆記的擬物化設計風格相對謹慎，主要的操作按鈕部分，均采用了“擬物化的”風格，但是在大面積的展示區域和非功能性按鈕依然沿用了簡潔的扁平化設計。在保證“新擬物”質感的同時，保證主體內容的可閱讀性，和整體頁面的清爽感。
藍藍設計也在設計項目中結合目前流行趨勢進行探索設計，容器元素通過光影的變化，展現出不同的狀態，通過模擬物理層面“高程”的不同，形成不同的組件狀態，從而演變成承載各式功能的基本元素。
在扁平風大行其道的當下，公眾審美難免已經疲勞，設計風格再次回歸擬物化，或許已經是主流趨勢。未來，3D設計，輕立體設計將與扁平化的設計風格相結合，產生新的設計語言和領域。
從輕擬物風格到Glassmorphism風格，擬物化設計的演變進程已然開啟，未來，無論是3D設計的加入還是扁平風格的延續，“質感”都將成為設計過程中被著重強調的風格。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一般進行軟件首頁的設計，我們先思考：
首頁要放什么內容？哪些是核心的，用戶最在意、最常用的。
軟件產品提供什么樣的核心價值？
用戶常用的功能是哪些？
未來1到3年軟件會增加什么重要的功能？發展方向？
需要借助軟件產品傳達哪些企業價值觀？
在交互上和需求上先和軟件公司做一些交流，雙方達成一致再進行。
設計后的效果圖
1. 理解用戶所需，優化交互，增加部分內容。告警事件除了原型中的時間線按順序發生外，加了用戶頭像，已處理、待處理、緊急任務統計數字，讓用戶可以總覽全局，做到對工作量心中有數。
2. 數據中心信息，秉承著信息簡單易懂，界面引導友好的理解，把信息分組，4個關鍵信息總數并列2排，設計了相應的擬物化圖標，美觀整理有秩序。在線和離線位數增加了表達當前比例的橫向柱狀圖，用戶從綠色和紅色的區塊長短中可以輕松感知，比原型的表達方式又多了一個緯度。
3. 本機系統信息，將單個的數字轉化為儀表盤，可以表現出高中低預警和正常的多重含義。通過輕擬物的表現手法，增強駕駛艙的沉浸式體驗，營造中控管理氛圍的真實感。
4. 所有的設計，都是基于對業務的理解，回到本質，思考用戶是否需要多層次信息的統計分析，不同的緯度呈現結果。最終以感性、直觀、優美的方式視覺表達，并考慮到數據可視化的控件類型和實現難度。
這個案例比上一個案例更加整體，重大的項目應該采用這種方式來進行。
1 同類產品APP對比：
藍藍設計觀察了20家流量類的App。通過在應用市場監測流量平臺類app的下載量，我們選取以上三家為競品。
『流量寶』中國電信出品。
『流量銀行』中國聯通出品。
『流量來了』，世紀龍信息網絡有限責任公司出品。
分析內容：
1. 界面布局對比
2. 核心功能對比
3. 色彩對比
4. 首頁印象對比
5. 界面設計優缺點
2 產品洞察 明確產品的定位和發展方向
按照用戶對于流量的認識、了解、使用的程度，通常流量經營可以分為三個發展階段。
在流量消費培育階段(2008-2012年)，隨著智能手機的快速普及，客戶上網頻率逐漸加大，對于網絡的使用逐漸從PC互聯網向移動互聯網轉移，其標志就是智能手機用戶在2013年超過了PC保有量。這個階段主要以前向流量客戶經營為主，采取流量包月甚至流量免費等方式驅動流量增長。
在流量理性消費階段(2013-2014年)，流量消費習慣逐漸養成，運營商開始改變甚至取消流量包月無限量使用策略，用戶開始感受到流量的費用壓力，開始對自身的消費行為和內容進行整理，逐步回落到用戶能夠承受的流量消費水平。而流量經營主要收入來源依然是個人客戶。
在流量后向經營階段(2014年-)，隨著運營商發現流量收入增速放緩的現象，運營商開始嘗試定向流量、后向流量捆綁、流量800等面向后端企業的運營。至此，運營商正式邁入流量平臺化經營時期。
產品不斷的迭代，使我們的產品在不斷的完善。 流量平臺的定位也在不斷的跟隨行業的變化在不斷的變化，才能使我們的產品得到用戶的認可。
功能方向：使產品向貨幣化、社交化、媒介化轉變。
增加用戶使用率，創造可以長期登錄使用的情景和功能。
基于個人：監測自己的手機流量及使用情況，提醒自己：少了可以買，也可以把多余的流量轉給家人、朋友、同學、或充入手機、
基于社交：比如：發紅包、賺流量、做任務、簽到送流量，流量兌話費等、是可以嘗試的方向，使我們的產品向貨幣化、社交化、媒介化轉變。
視覺方向：使我們的產品更加的年輕化、擁抱90、00后。
交互方向：減化路徑、清晰簡潔
3 基于產品分析策劃進行主頁的交互設計
在不斷的思考、對功能的深入理解后，交互設計師對首頁構圖了三個方案，希望能契合產品定位并在布局和表現形式上與競品區別，展現出愛流量的。
團隊討論思考后，認為將“流量監測和流轉“做為首頁目前重點，賺流量做為以后發展點。確定第二種布局(中），進行視覺設計。
4 視覺設計成果
主頁設計風格確定后，就可以進行其它頁面的視覺設計啦。
軟件的優化設計是一個長久的的事，挑一些典型頁來設計是基礎的部分。
目前國內都在進行數字化升級進程，這一二十年來，從不知UI為何物，到企業紛紛重視，每個企業都有自己的設計師，重點的項目再外包給專業公司。關注整個用戶體驗，用體驗地圖觸點做設計，在中小型的項目上存在認識不夠或目前達不到應有的預算和精度。未來發展中，相信會漸逐把重要軟件的整體用戶體驗設計、服務設計、品牌設計的融入做為增長點。
藍藍設計公司有一個群，每天都在分享好的UI設計，如果你有興趣，請報上姓名和公司職位，我們共同成長和學習。請加微信ben_lanlan, 標注“想加入設計分享群”.
2021年產品體驗日記，小目標365節，第016~030節。
前言
在互聯網產品日趨成熟的今天，APP同質化越來越嚴重，使得設計不夠精致、沒有氣質及品牌感。一個設計精致APP不應漏過任何一個細節，美觀、可用和的界面設計都需要花費大量的時間從細節上去打磨，并從多方面鉆研并創造出打動人心的UI/UE設計。
2021 | 第02篇分享目錄（016~030）
016.「QQ」手勢力度決定頁面展示范圍
017.「高德地圖」地點打卡-未來回憶曾經的足跡
018.「優酷」會員轉化-擊潰用戶最后一道心理防線
019.「網易云音樂」播放中的歌曲快速定位
020.「boss直聘」多個入口-簡化二次操作流程
021.「菜鳥」備注-快速找到列表中的包裹
022.「蝦米音樂」符合產品特性氣質的標簽欄
023.「QQ音樂」觸手可及的選擇性MV播放
024.「微信讀書」提升操作效率的進度條控制
025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕
026.「淘寶」應對意外退出的通道
027.「微信」行為預判-提升操作效率
028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂
029.「京東」送禮物-更是一種神秘和驚喜
030.「叮咚買菜」一頓吃光-減少食材的浪費問題
016.「QQ」手勢力度決定頁面展示范圍
產品體驗：
QQ聊天的表情列表版塊，系統會根據用戶上滑的力度來確定表情選擇區域的大小，力度越大，列表區域占比就越大，同屏可供選擇的表情就越多。
設計思考：
經常使用QQ表情包的用戶都知道，其更新頻率非?？?。比如社會上的最近發生的大事件、互聯網當前流行的熱詞，甚至在疫情期間，凡是跟疫情相關的表情包都在不斷變化，從開始的安全防護到后面的線上辦公等，以至于深受廣大用戶的喜愛。
QQ的表情功能其中還有一個細節，用戶在選擇表情時，系統根據向上滑動的力度來確定表情區域所展示的范圍?；瑒拥牧Χ容^大時，考慮到用戶可能需要在更多的表情包中選擇的情況，固增大顯示的區域，便于用戶在同一屏界面中可瀏覽的范圍更大，同屏展示更多的表情包讓用戶在更短的時間內找到自己所需，所見即所得，對用戶進行的定性操作十分友好，從細節處理方面提升了用戶體驗。
017.「高德地圖」地點打卡-未來回憶曾經的足跡
產品體驗：
在高德地圖的足跡功能里，可以對我們所在的地點進行打卡，系統就會以亮光形式顯示我們去過的城市，并留下“???”標記，點擊可以查看自己的打卡時間和具體位置。
設計思考：
我們在高壓的生活下及忙碌的工作中，曾經去過很多地方游玩或者路過，隨著時間不斷的流逝，這些都成了模糊的記憶。當有一天靜下心來細想，好想去過的地方很少，甚至回憶不起來。
高德地圖APP的足跡打卡功能可以幫助我們記錄所去過的每一個地方，分為自動和手動打卡。在設置中開啟自動打卡后，當用戶使用導航的目的地屬于名勝古跡、美食地標建筑等類型的地點，導航結束后，即可自動完成打卡，如有特別需要，還可以通過手動打卡記錄每一個點。打卡功能雖然在表面上并非用戶硬性需求，但在未來的某個時間看到自己曾經的足跡時也略表欣慰，還可以滿足部分用戶的虛榮心，也許在無意間就能撫慰認為自己去過的地方太少、較為傷感的幼小心靈，給與溫暖的安撫與力量。
018.「優酷」會員轉化-擊潰用戶最后一道心理防線
產品體驗：
優酷普通用戶在看影片前面的廣告時，倒計時后面會提示xxx元可關閉廣告，廣告下方通過展示會員特權以鼓勵普通用戶升級會員，且定時滾動展示剛剛已加入會員的文字提醒。
設計思考：
不管哪個影視平臺，無論何種設備，非付費會員用戶在看影片前都需要先經過長達幾十秒的廣告，這是任何人都無法避免的一堵墻，廣告除了可盈利之外，還能起到激勵普通用戶開通付費會員的用處。
優酷視頻激勵普通用戶開通會員的的手段可謂是拍案叫絕。
①、利益引誘：在廣告倒計時的后面直接展示開通會員的金額， 通過優惠等利益刺激手段，吸引用戶繼續完成對產品的消費。較小的金額可以降低用戶的經濟成本，同時增加用戶對會員價格的心理接受程度，減少其防備心理，有很大的幾率吸引用戶產生開通會員的動機，促使用戶行動增強轉化（除了首次開通連續付費業務，所付出的金錢成本較低外，其他情況下價格并無優惠，不過一旦讓用戶產生了付費動機，這些都是后話）；
② 、增加說服力： 廣告下方羅列了部分比較重要的會員功能，圍繞開通會員后的特權并強調效果，以此證明會員內容的質量與真實性，吸引用戶去了解，為用戶增加開通會員驅動力；
③、羊群效應：提示****剛剛加入了會員，利用從眾心理，因為用戶的想法和行為容易受到周圍人們的影響，往往會勝過自己的理性認知。通過前面的用戶已做了前驅和后盾，不斷的引導和刺激用戶去開通會員（羊群效應在現實生活中遇到的很多。比如：大部分用戶出去吃飯，對空無一人的飯店沒有動力，往往會選擇里面已經坐了一些人的店鋪；走在外面，哪里圍的人多，就想擠進去看個究竟）。
019.「網易云音樂」播放中的歌曲快速定位
產品體驗：
在網易云音樂播放當前列表的歌曲后，當界面存在上下滑動的操作行為時，右下角會出現定位圖標，點擊可直接定位到正在播放的歌曲位置，如無任何操作，3秒后圖標自動消失。
設計思考：
我們在聽歌時，如果是無目標的行為，基本都會進入到某一個類型的列表或收藏歌單，進行順序播放，比如飆升榜、新歌榜等。如果有興趣，可能會在列表中上下滑動來看看是否有自己熟悉的歌曲，等最后要回到正在播放的歌曲位置時，就尷尬了，需要花費更多的時間來找到，在自己收藏的歌單中就更不用多說了。
網易云音樂在歌曲列表中增加了快速定位按鈕，當系統檢測到正在播放的歌曲列表中有滑動操作時，圖標會自動出現，點擊快速定位播放歌曲位置，方便快捷、省時省力。如果你的歌單中添加的歌曲太多，又無法找到播放的歌曲時，不妨試試右下角的定位按鈕吧，此功能真的很人性化。
020.「boss直聘」多個入口-簡化二次操作流程
產品體驗：
在boss直聘求職關鍵詞頁面，單點復選框選中/取消，底部同時提供已選中關鍵詞，可進行單個刪除或通過左下方的清除按鈕一鍵刪除。
設計思考：
在用戶的常規認知里，選項條件為數不多的復選框操作都是單點選中/取消，這種操作方式基本也成了用戶的慣性思維，若站在用戶體驗角度深挖細節的話，即使是大眾用戶都認可，其實也沒有最好，都還有上升的空間。
boss直聘的求職關鍵詞選擇，在這方面就做的更好，除了常規的單點選中/取消外，其底部還提供了已選中的關鍵詞條，用戶可在小范圍內清楚的知道已選中的內容，讓需求更加集中，便于進行統計、對比或刪除等操作，避免在頁面多個目標中尋找而增加時間成本。另外左下角還提供了清除按鈕，需要重新選擇目標的用戶，可一鍵刪除，節省了之前多次點擊的重復步驟，簡化二次操作流程。
021.「菜鳥」備注-快速找到列表中的包裹
產品體驗：
菜鳥的包裹列表，左滑其中的一個，可通過包裹備注修改名稱，方便用戶在包裹較多時有目標的查看。
設計思考：
網購已成為用戶的日常習慣，沒事的時候淘寶逛一逛、京東走一走、不急用的就在拼多多砍一砍。但網購平臺何其之多。我曾經碰到過這種情況，在不同的平臺都買了商品，其中有急/不急用的。最為難熬的就是等待物流了，頻繁的奔波于各大電商平臺個人中心的訂單頁面查看最近物流狀況，步驟繁瑣不說，還浪費大量的時間，手機差的還會閃退卡頓，相信這也是很多網購用戶的苦惱，直到菜鳥包裹的出現......
菜鳥定向的集合各大物流平臺的包裹數據，通過手機號碼，將單個用戶的包裹歸類到一個地方，非常方便。在使用過程中，還有一個很友好的設計細節，包裹名稱備注。在包列表中，可選中其中的一個包裹左滑，對名稱進行備注，便于用戶包裹過多時需要對其中部分包較急的包裹進行頻繁的查看，備注之后一目了然，能降低因誤點造成重復操作的可能性，快速找到想要的包裹，方便用戶有目標的查看。
022.「蝦米音樂」符合產品特性氣質的標簽欄
產品體驗：
蝦米音樂頂部標簽欄的選中狀態，文字放大的同時配合一段起伏較大的音頻波紋動效，彰顯行業產品特性。
設計思考：
標簽欄是APP界面中較為常見的控件之一，在視覺表現方面，只有選中、未選中兩種狀態，其設計也比較簡單，通常會在文字顏色/字重大小上進行變化，標簽下方加上小長條來區分兩者的狀態，用戶對于這種表現方式也是高度認可的，如果不想被同質化，未在細節上下足功夫，就很難設計出彩。
蝦米音樂的標簽欄選中狀態除了文字大小對比非常明顯外，下方是一段音頻波線動效，跳脫出較為常見的設計規范限制，從行業屬性中獲取靈感，把用戶在現實世界中物理認知的“聲波”形象來源作為產品特性，提取出具有獨特氣質的視覺音頻波紋樣式替代選中狀態的小長條，這樣能建立起視覺上的聯系，讓用戶產生由內而外的一致感受，既有設計感又符合產品特征。
023.「QQ音樂」觸手可及的選擇性MV播放
產品體驗：
在QQ音樂播放頁封面圖的右下角，會顯示該歌曲相關的視頻數量，點擊則展開視頻列表，通過左右滑動選擇想看的視頻，可直接進入視頻播放。
設計思考：
有人說：聽音樂是一種情緒，也是一種心情，能從不同類型的音樂中聽出共鳴，去發現一些事物的美好。當我們發現自己喜歡上一首歌曲時，有沒有想打開該歌曲MV一睹演唱者的風采，或者邊聽邊看去感受歌曲意境和內容所帶來的一些理解上的輔助。
QQ音樂將歌曲的MV展示在播放頁封面圖片的右下角并提示數量，近在咫尺，便于用戶在聽歌的過程中對視頻選擇性的播放。一般音樂類型的應用在都是一首歌對應一個MV入口，需要先通過頁面的跳轉才能對視頻進行選擇，QQ音樂的這種交互路徑能避免用戶在聽歌過程中選擇視頻時造成中斷，通過左右滑動選擇想看的視頻，選中即可直接進入視頻播放頁，優化了操作路徑，減少操作步驟，觸手可及且不打斷沉浸式的音樂享受。
024.「微信讀書」提升操作效率的進度條控制
產品體驗：
打開微信讀書的進度控制條，點擊游標左右滑動，除了頁面內容變化外，進度條上方會顯示當前頁碼/總頁碼，并提示章節及標題；長按游標可單獨對書本的頁碼進行精準化的切換。
設計思考：
讀書就是和世界各個行業的人物進行一對一交流的過程，如果想通過讀書收獲成長，就要靠自己看書、學習、思考，并把知識用到自己的工作和生活中，不斷讓自己做出改變，因此也誕生了很多讀書類型的應用，線上看書不僅能適合多樣化的環境，還能節省經濟成本。曾經有人感慨，電子書是線性的，而紙質書是立體的，想看前面有聯系的內容就可以隨時返回去再讀，而電子書只能通過目錄和書簽來解決，要經過多次的操作和頁面的跳轉，且書本的內容都是通過數據傳輸、每次都要刷頁面才能看到內容，有可能會打擾用戶看書的思路，相對紙質書籍，看書效率和吸收程度就低了許多。
其實并非全是如此，微信讀書考慮到體驗方面，針對用戶在讀書過程中可能出現的前后頻繁翻頁的問題，在進度條控制細節上做了很多便捷化的設計。用戶可通過點擊或長按控制條上游標，根據自己的實際需求進行前后長/短距離的滑動，就能輕松滿足自己所需要的頁面轉，并伴隨明顯的小窗文字提醒。此功能相對紙質書籍雖然不能堪稱完美，但足以解決用戶線上讀書時最基本的需求，讓操作流程變的更加簡單，大幅度的提升了操作效率，節約時間成本并提成產品的易用性。
025.「嗶哩嗶哩」信條-承包笑點的逆向彈幕
產品體驗：
在嗶哩嗶哩看《信條》電影，播放到時間發生逆向片段時，彈幕的文字及方向也發生逆轉，即逆向彈幕，兩者結合在一起非常應景，網友幾乎被“驚掉下巴”。
設計思考：
有很多用戶喜歡開著彈幕看視頻，彈幕有可能是視頻內容的良好補充，大部分視頻是不能牢牢抓住觀眾，也不需要觀眾死死盯著看的。各種神彈幕、刷屏本身就是內容的重要組成部分，所以看著彈幕可以給我們在看視頻的過程中帶來更好的氛圍及愉悅的體驗（部分不愛開彈幕的用戶除外）。
最近被一個腦洞的彈幕方式吸引到了-逆向彈幕。B站在《信條》電影里隱藏了一個很有趣的彩蛋，正負時間線穿插（片頭也逆向了）的情節發展，設計了讓人驚艷的逆向彈幕，跟電影的逆向片段組合在一起時非常應景，神奇且趣味化的彈幕方式讓用戶幾乎“驚掉下巴”，看完電影后仍能記憶猶新。有人直言“當時在電影院看完信條后，是不是倒著走出來，影院就把買票的錢給退了”。
026.「淘寶」應對意外退出的通道
產品體驗：
在淘寶的其他功能頁面發生閃退或意外結束應該進程時，再次進入首頁，會提供“打開上次訪問的頁面”的快捷入口，如無需要，幾秒后入口自動消失。
設計思考：
智能時代，每個人的手機中應該都裝有不下幾十個APP軟件。當我們正沉浸在某個APP當的內容時，因設備或其他原因意外的結束了應用進程，當再次打開時，需要憑借自己的記憶多番操作才能回到原來的內容處，甚至永遠無法找到，為此真的是很苦惱。
淘寶針對軟件意外退出的情況則留了一手，當用戶在使用過程中，APP因意外情況退出時，下次進入，可通過首頁提供的“打開上次訪問的頁面”入口，快速回到原先失蹤的頁面，再也不用擔心內容丟失了，看似一個簡單的入口，但通過細微的改進能給用戶帶來更好的操控感和易用性，便于用戶通過短時間記憶還原。
027.「微信」行為預判-提升操作效率
產品體驗：
我們在手機的其他界面發生截圖行為時，打開微信對話框的工具欄，系統會把剛剛截取的圖片以縮略圖的方式展示在右側，暗示詢問用戶是否有發送此圖片的需求，幾秒后會自動消失。
設計思考：
我們不管使用何種應用，在交流過程中有發送圖片的需求時，除了應用本身提供的圖片之外，其他都繞不開系統相冊功能。如若深究用戶體驗，進入相冊的操作路徑是可以減少的。
從微信對話框頁面打開工具欄，如在相近的時間內系統檢測到有截屏行為時，會把剛剛截取的圖片以縮略圖的方式展示在屏幕右側，點擊即可發送，通過行為感知并幫助用戶解決可能有發送此圖片的需求，提前預判用戶的操作，以提升選擇效率。若無此需求，幾秒后自動消失，絲毫不影響用戶的其他操作。
028.「抖音」搜索-撫慰每一個被情緒困擾過的靈魂
產品體驗：
在抖音搜索較為極端且消極的關鍵詞時，比如：抑郁、服毒、不想活了等，系統會出現較為溫馨的愛心畫面，并通過情感化的文案鼓勵以及提供心理援助渠道，以此來提高用戶的積極情緒。
設計思考：
人們通常會借助于歡樂、開心來表達自己的愉悅，同時也會面臨悲傷、憂慮的情況，需要表達心中的苦悶。如果沒有得到有效的疏解、排遣，使得內心一直處于郁悶狀態無疑是很糟糕的。尤其是目前處于高度壓力下的年前人群，在環境因素、心理與生理創傷、家庭環境等情況的影響下，導致一些人因為心中的苦悶，得不到很好地宣泄、發泄，走上了極端的想法，其解決問題的方式不管是線下、線上都是從心理上入手。
抖音APP在面對極端且消極的關鍵詞搜索時，并非跟其他應用的搜索結果雷同，而是以情緒激勵的統一樣式展示結果。首先通過溫馨的愛心畫面緩解較為消極的用戶情緒，并通過積極正向的文案鼓勵用戶；其次，基于用戶在心情低落時要得到安慰或鼓勵的需求，平臺提供了心理援助熱線以及消極心理的疏導建議，幫助用戶進行緩解或改善消極行為。作為一個短視頻平臺，雖然沒有明確的義務去撫慰用戶，但這種做法可以用溫暖的方式傳遞愛與力量，也撫慰每一個被情緒困擾過的靈魂，讓用戶感受到親切放松的氛圍，是鞏固用戶粘性與忠誠度十分巧妙的方式。
029.「京東」送禮物-更是一種神秘和驚喜
產品體驗：
在京東商城購物禮物時，可以通過商品詳情頁的“送禮物給TA”，節省很多中間步驟，直接在線上完成包裝、賀卡、寄語和快遞等“一條龍”服務，將禮物送到對方手中。
設計思考：
部分用戶在特殊情況下，都有送禮物的小習慣，不管是禮尚往來、男女朋友還是送基友，有時甚至不需要理由，只想把最好的東西送給TA們。這時候可能去會店里（線上/線下）買一個對方喜歡的東西，然后經過包裝+寄語，再快遞給對方，因為整個流程的復雜，有時候不可避免會出現一些突發性的狀況，難免造成尷尬。
在京東APP購買禮物則省去了一些列的麻煩，只需要選好禮物，即可完成從包裝、賀卡、寄語和快遞等“一條龍”服務，免去不必要的麻煩以降低出錯的可能性，將操作流程和路徑都進行了簡化，讓整個送禮的過程更。通過選擇合適禮物的包裝風格，制造出禮物的神秘感，送出的不僅僅是禮物，更是一種浪漫和驚喜。
030.「叮咚買菜」一頓吃光-減少食材的浪費問題
產品體驗：
在叮咚買菜分類的“一頓吃光”列表中，菜品會根據專業廚師建議一頓的常規用量進行組合搭配包裝，包括分量較小的調味品類也進行了小份裝的貼心組合，避免食材偏多造成浪費或損耗。
設計思考：
“一粥一飯，當思來之不易”，勤儉節約，珍惜糧食是我國的傳統美德。隨著互聯網帶來的便利，很多人足不出戶便可在線上平臺完成食材的購買，但買菜也存在的很多困擾，比如買少了不夠吃，買多了又浪費，沒有一個確切的方案可以讓買的一頓食材剛剛好，因此會造成食材的浪費和更多的金錢成本。
叮咚買菜推出的“一頓吃光”欄目，用倡導勤儉節約的用餐理念與生活方式，篩選出用戶經常購買的食材搭配，再根據專業廚師對食材配比，進行分量、包裝及動態調整，以最大化滿足消費者需求，減少食材的損耗，在很大程度上解決了買菜很難確定食材分量的問題，不僅讓用戶每餐都吃得新鮮健康的同時，盡可能地減少食物浪費。
結語：
設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來，加強自己的記憶，不僅能提升自己的語言組織和總結能力，也為日后輸出優秀的作品當鋪墊，對自己的能力提升以及未來的職業發展帶來便利。
本期產品設計細節分享結束，我們下期再見。
轉自：站酷
作者：大漠飛鷹CYSJ
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
