起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識淺談“加載刷新”與“品牌設計”的思考
“加載刷新”的與產品品牌如何才能完美融合呢？
gif圖片來源互聯網，僅供演示請見諒！
為什么要談“加載刷新”？
在談為什么之前，筆者要講一個大家可能都經過的場景，過春節坐火車回家，我們都遇見過特別想上廁所（內急），從車廂的一頭跑到另外一頭，跑了好幾個車廂終于到排隊人數少的位置，此刻恰好非常漂亮的美女或者帥哥也在等，自己也是必須要開閘放水的節奏，不過作為紳士或淑女禮貌性的給對方優先，美女或帥哥把門關住的瞬間，自己的內心都罵自己多少次了（實在太急放水），然后自己在無盡的等待中，此時此刻不管下一個人是多美或者多帥，說話多甜或磁性，你都不會紳士或淑女了，那一刻唯一等的就是剛剛進去的美女趕快出來（內心想“laozi”要放水了），但很久又出不來的尷尬場景……
在我們生活的這個時代，互聯網產品充斥著每個人，接觸著每個產品，同時也都可以對產品有想法和感受，人人都在談體驗，那么影響用戶體驗的關鍵因素有很多：單元素有效性、功能布局合理性、信息架構層級性等等都是影響用戶體驗，但有一個是最關鍵因素也是最重要的指標—時間（用戶等待數據加載的時間），等待時長就是數據加載的時間，所以“加載刷新”的設計往往成為忽略細節設計之一，靜止的等待（加載刷新過程）空洞無聊的，這種空虛的感覺會增加個體主觀感受的等待時間長度，同時等待會使個體的焦躁心情發展起來，隨著等待時間的延長，焦躁心情會加劇，使等待顯得更漫長，消極情緒會導致很多不利結果，因此來談談“加載刷新”……
如何做“加載刷新”的設計融入產品品牌
a.“加載（loading）刷新”的價值&場景
之前很多從業者深入分享過很多關于“加載刷新”的設計，那么我們今天談什么呢？難道談等待時間長短？答案肯定不是的，首先等待時間不可能為“0”，其次等待時間也和很多因素相關，比如網絡環境及制式（2g\3g\4g\5g\wifi）、產品形態（字符、圖片、聲音、視頻）、還和硬件相關（每類因素都可以很深入討論和研究）等等，這些太多相關性了，這些筆者都曾經在項目中遇見過也處理過，減少加載等待時間在某種程度上屬于性能優化的今天不在此做深入討論。
b.“加載（loading）刷新”的核心價值
簡而言之等待時間是相對無法控制的，在等待時間無法控制的時候如何提升用戶體驗成為重要問題之一，在不同的場景下的“加載刷新”的設計表達也是不一樣的。在用戶等待過程中，不同場景的變化或其他吸引或轉移用戶的注意力，能夠增加用戶的認識活動并抵消一定量的延遲帶來的負面影響，因此“加載（loading）刷新”的核心價值有兩種：使用價值&品牌價值
c.按照使用場景“加載（loading）刷新”分類：
操作類場景（用戶主動操作行為）：上滑、下拉、狀態操作（如：關注、發送）、內容刷新、查看\查找、搜索、定位、清除緩存等；
狀態&預加載類場景（呈現狀態但可以有引導用戶操作）：新頁面數據請求、網絡狀態請求、空白頁面刷新等；
特殊類場景：h5頁面進度條、頂部圖片變化刷新加載等；
如何把做這些“加載刷新”的設計表達做好，不是那么容易的一件事情，就把市場的（結合公司業務產品+特色產品）有意思的作品給梳理一下，然后得出加載樣式分類。
從選擇的產品（拆解的方法）歸納出了四類“加載（loading）刷新”樣式，這四類不是單一存在某種產品中，而是同一個產品中不同的場景下傳達不一樣的體驗設計；比如在“京東”內有簡潔類型也有趣味類型的，也存在互動型的；這些都是結合產品不同場景傳達的動機或想表達的東西不一樣而形式不一樣，也就是我們常常講的產品表達和設計表達要結合的巧妙，在解決問過程中（也就是對設計的定義）我們可以提供很多方案（設計），但能恰如其分的表達到位的方案就是我們所找的最佳方案（最優解），用“解刨”的方式去定義“加載刷新”與品牌表達關聯；
簡潔樣式：構成元素形式簡單、操作效率優先、目的明確單一
用戶期望閱讀瀏覽更多數據和信息時的操作（列表信息閱讀，聊天記錄翻找等等）如下拉刷新、上滑刷新等操作類場景
從梳理看出，簡潔型的加載刷新設計構建上要么在圖形上，要么在配色上去傳遞給用戶品牌的特性，從而形成在產品的整體上形成產品的品牌印象，但品牌故事的傳達性不是那么的強和完整；因為在這中類型的場景下，效率是第一位的，所以什么類型的加載樣式取決于場景的表達最終目標是表達什么，而不是簡單的統一而已。
趣味場景樣式：故事敘述性、場景比較完整、相對豐富、品牌完整性
用戶期望看到信息更新時，能給出用戶超出預期的或能帶意外有趣的場景傳達
示例（一）——天貓首頁場景加載
天貓是一個綜合性購物產品，市場占有率比較大，且主打品質商品和海外原裝進口商品，首頁的加載刷新是場景故事性表達：一只悠閑的貓騎著一輛時尚的自行車在一個叫“Tmall”都市的商場里面暢游“BUY！BUY! BUY!”
- 品牌體現：色彩+logo+產品屬性（電商）
- 場景表達：故事有趣性，運用一個小的場景去傳達產品（天貓全球購）的特性
- 增強信任感：整體氛圍的渲染，能給用戶帶來額外的購物安全感和儀式感
示例（二）——京東的下來加載頁面
故事場景：一個京東的快遞員拿著（JD）京東的包裹奔跑給消費者送商品的場景；這樣主要傳達給用戶京東產品服務目標“讓購物更便捷”，購物便捷與用戶收貨便捷，京東核心都是自己物流體系（快遞員），簡單而生動描述自己的差異化核心競爭力；
場景類的數據加載本身是一種訴說品牌故事的形式，簡單而又生動傳達產品屬性，是一個完整品牌傳播+數據加載的完美體現，適合用戶剛剛進來進行數據加載，讓用戶第一次使用就感知不一樣的體驗及印象；
互動性：有一定的互動性，通過用戶操作可以與頁面互動
示例——天貓我的首頁頁面
天貓的個人頁面往下拉動，會出現不同的場景，隨著滑動距離不一樣展示的動態場景也不一樣，元素也不一樣，最后停留底部用戶可以互動操作；這種隨著用戶操作不一樣，頁面發生不同的變化稱之為互動性的加載刷新，適合特定頁面的交互行為或趣味性App較常見；以下2個是在網上找的有趣互動性的例子，僅供參考！
(該gif圖片來源互聯網，僅供演示請見諒!)
（該gif圖片來源互聯網，僅供演示請見諒?。?/p>
項目中的各種嘗試，這些是做項目中APP端不同場景的嘗試（局部場景）
總結
品牌性的東西是細節的體現一個維度，品牌也不是一蹴而就就形成的，而是慢慢積累由初次體驗，到感知印象，久而久之有一種回憶在里面，然后產品能對用戶又一種期許在里面，這就誕生了一個牛X的品牌，所以如果一個產品處處體現細節的思考，那么整體給用戶的感覺是比較強的統一感和嚴謹感，這樣讓用戶覺得產品的設計是經過思考且有表達的層次，就本期的話題“數據加載”在不同的場景下有不同的表達，這個本身就是思考，如何將這些與品牌結合是更高的思考，把產品品牌的不同元素融入到這些細節場景是對設計更好的詮釋也是對產品品牌更好的體現。
ps：有興趣可以交流交流產品品牌形成的過程，歡迎大家交流！
作者：林三水，07干過工地搬磚工的，也當作小蜜蜂（發過傳單）、在夜場也干過幾個月，帶過藝術類文化高考輔導班，也做過2年室內設計，從事用體驗從學習到現在大概有9年，大學主修專業為湖南大學的工業設計和交互設計，輔修湖南大學建筑學，同時也是鄭州大學土木工程專業工學背景,是典型的什么都干過的主，一直不想寫東西，最近發現不管觀點如何，還是分享一下交流交流！
本文由 @林三水 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖由作者提供
??
溝溝壑壑hkk
不過現在培訓班太多啦，速成有速成的好處，但往往沒有授之以漁，我帶團隊也面試過不少設計師，但思考方式沒有學會，自己的積淀太少，也太浮躁，產品設計入門簡單，但要做好很難，希望看見的伙伴一起加油努力共勉之，設計思考的路上一路前行！