提到輪播首先可能想到的是廣告，我們經常在移動端首頁或網站首頁會看到各式各樣的輪播banner，不管在移動端還是網頁上通常點擊數據都是非常差的，本篇文章帶你深入了解banner輪播。
如果需要設計一個輪播，我們應該考慮哪些因素？如何讓輪播更具有價值？如何讓輪播的體驗更好？如何避免輪播常見的問題。
本篇文章通過以下幾點探索輪播的特性，預計閱讀20分鐘
1、用戶真的使用輪播嗎
2、輪播的輪換形式
3、輪播的進度展示
4、輪播定位
5、輪播的切換
6、對輪播進行分類
7、使用縮略圖進行預知
8、輪播異形化
9、輪播時間
10、總結
用戶是否對輪播有感知，這個則需要根據不同的場景進行判斷，包括每個產品中的每個輪播對用戶用戶的定位也不相同，常見的應用場景品牌曝光、活動營銷、產品展示，每個場景下相關的數據也不相同。
促銷輪播banner
品牌推廣輪播banner
產品介紹輪播banner
同時還有個關鍵因素，輪播的占比，這里以pc端為例若是產品是以品牌效應吸引用戶的，大多輪播是以大的屏幕占比為主通常會占首屏的50%，如果是以營銷、內容為主的產品，輪播通常以16:9、7:4的常規比例進行展示。
用戶在使用產品時會默認忽略輪播區域，一般輪播都會有自動輪換機制，一定時間后自動輪放下一張banner，那么每當頁面上進行輪播時便會吸引用戶進行關注，效果上會有一定的提升，所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。
還有一種用戶比較喜歡關注輪播過去的banner以此來滿足好奇心。
如果banner是作為內容傳播希望用戶通過banner了解內容，那么則要避免放在最后一位置，對于用戶而言最后一張輪播路徑過于長，并且用戶很少會手動滑動banner。
國外一家公司在針對輪播中進行了相關的研究測試，隨著頁數的增加用戶的點擊逐步下降。
那么如果想讓產品中的輪播更具有效果，則需要根據不同的場景設定策略達到目的。
不管在移動端還是手機端，輪播都有各種交互形式和尺寸，以pc為例在交互上會多樣化一些，常見的幾種則是通過滾輪滑動、通過點擊切換兩種。
如下圖某藝術網站，它則是通過鼠標滾輪進行切換輪播banner，并且banner的占比也是鋪滿首屏，這種輪播形式適合一些品牌、產品宣傳等相關的網站以此來突出產品的亮點，同時也符合用戶目標。
在看下面這個醫美網站它的切換方式則是通過鼠標點擊進行切換，并且占比也是鋪滿首屏，在醫美領域用戶更關注美感，而輪播形態也是符合用戶的心理預期更加沉浸美觀。
而在移動端輪播的形式就比較統一，大多都是自動播放+手指滑動進行切換。
在網頁中輪播都會有當前的定位點，許多用戶的習慣是點擊進度條進行切換banner這樣能夠更快的達到目標，不用一張一張切換，但是在有些產品中會忽略這一點，設計中會做的非常小導致用戶在點擊上可用性不太友好，如下圖中的banenr進度點設計上過于小導致點擊上有些阻礙。
如以下網站去除進度定位的方式，通過縮略圖預覽來告知用戶下一個banner的內容，空白區域也可以添加縮略圖引導介紹等關鍵信息，幫助用戶提前預知在體驗上相對較好。
以下國外某網站在進度定位的設計上采用了標簽文案方式進行設計，能夠幫助用戶更加全局的了解banner內容
定位主要是用來指示當前輪播的進度，像上圖中講的便于用戶更加全局的觀看banner的張數和當前進度。
以下網站的設計中則把定位與進度相結合，進度條展示該banner預計多久會切換下一張，對于自動切換的產品輪播這個更直觀的進度展示體驗上相對較好。
以下是某個國外網站，不管是pc還是移動端都在輪播底部添加了水平條，告知用戶當前位置
隨著市場上產品同質化嚴重，產品的競爭力也更依賴體驗，在下圖中的數據可視化的網站上，在進度條上就利用了產品的特性以餅狀圖的形式進行展示。
在剛才上面舉的例子中很多優秀的網站在設計上都很有創新性，但是需要注意一個點，在輪播中不只有自動播放，還需要考慮用戶手動切換，因為在實際用戶瀏覽中可能會對產品的播放時間達不到預期，此時則會使用手動切換，除去可點擊的進度點，還需要上一張和下一張的入口切換。
在此基礎上需要注意，在處于最后一張banner時，下一張切換還能不能點擊，第一張時上一張切換還能不能切換，這個取決于產品特性和輪播張數，如果輪播張數過小的話則需要進行循環播放，如果過多的頁數則第一步和最后一步不可點擊。
上一張和下一張的距離遠近取決于banner的大小，如果輪播banner占比較大時則需要考慮用戶的操作時長，距離越短時間越快，為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出，便于用戶尋找。
如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大，保持視覺平衡，因為小區域banner用戶能夠更加全局的觀看，在使用上不會猶豫。
反觀移動端在輪播中除了展示banner進度外很少展示切換按鈕，移動端更加依賴手勢交互。
當輪播banner過多時利用標簽進行分類，用戶通過點擊標簽進行查看相關的輪播組合。
此方式更適合一些電商平臺、新聞網站這種內容過多的產品
如下圖國外社交媒體網站則使用了標簽進行分類，此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。
在banner首屏中，顯示的內容越多，越能激發用戶進行點擊，像上面講過的農業產品網站就使用下一張預覽圖的形式進行展示，當然不僅局限于這種形式，如下圖中的餐飲網站把所有的輪播banner展示給用戶觀看。
相對于縮放圖，圖標展示效果上也較好，空間占用更少，使用這種方式需要謹慎，對圖標的識別性要求較高，我印象中能夠使用的這種方法的網站是蘋果官網，讓產品抽象化展示。
在移動端也存在這種設計手法，但是基于分辨率原因移動端的縮略圖展示過少，最常見的如下圖中的馬蜂窩和企鵝電競。
輪播最大的缺陷則是像剛開始講的用戶會默認為廣告，對此可以使用個性化設計突破用戶心理障礙，使輪播banner更具備親和力。
如下圖中的數碼科技網站，利用產品與背景的結合營造出一種功能性的展示。
再例如下圖中蘋果官網入口，結合百度的定制化功能在大搜中進行個性化處理，把常規的banner輪播以功能卡片形式進行展示，同時卡片承載產品動畫引導用戶進行點擊。
蘋果官網進入后隨意點擊產品介紹頁后會發現，蘋果把輪播結合鼠標滾輪營造沉浸式觀看，每個屏效內都展示產品一個功能特點，打破傳統banner的展現形式。
自動播放的輪播會根據用戶的耐心和用戶的訴求進行調整優先級，如我們平常使用產品時會忽略banner廣告，我們會更加關注移動中的東西，特別是在移動端上通常是banner進行輪播時才會關注。
谷歌設計團隊曾對banner輪播的時間進行測試，測試結果得出5s-7s的輪播時間最佳，在這個時間內用戶有足夠的時間對輪播banner上的產品內容進行了解。
如下圖谷歌商店的輪播時間設定在6s。
同時還需要注意，在自動播放的過程中如果用戶鼠標hover上去后，則需要判定播放暫定，避免用戶錯過感興趣的內容。
本文從輪播的樣式、特性、用戶對輪播的認知等多方面的介紹，在實際產品中輪播有很多可用性上的問題存在，我們在設計中則需要根據自己產品的特性、用戶群體特點等多維度去思考適合什么樣的輪播形式。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
Dribbble 平臺對于互聯網 UI 界面設計有著舉足輕重的定位，對 Dribbble 設計的研究會讓我們看清設計的方向。
為了保證這篇文章的質量，Dribbble 年度的每個作品都超過 550 贊。在此原則下挑選了 828 件作品，作品總的大小為 2.2G。
從挑選出的 828 件作品中，排名前十的作品中 9 件為 B 端設計，另一件作品也是 B 端產品 C 端化的產物。其中：
明眼人都能看出其中的比重關系，B 端設計再次大火，為什么是再次？因為 B 端設計之前火過，只不過沒有趕上一個好的時代，在 C 端設計風光的十年里而忽略了其存在。隨著 C 端市場飽和與數字化的浪潮下，實體經濟、ToB、ToG 的產業再次迎來了它的曙光。視頻動效的作品占比也已超過 C 端界面設計，相信今年視頻動效作品占比還會再次提升。
Dribbble 年度最佳作品來自大家最熟悉的 UI8 團隊中的 Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個贊。
為什么看似平平無奇的作品卻能獲得 Dribbble 年度最佳作品呢？既不是 C 端也不是純 B 端的作品，更像一個網頁與平面的結合體。如果去掉搜索圖標、分類圖標和按鈕，你可以理解它就是一個平面作品，一個字體加幾何形體構建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標題閱讀有停頓感和呼吸感。faster 底部的橫線讓它從標題文字中脫穎而出，這種使用線條突出重要信息的設計也是今年Dribbble 設計流行趨勢之一。
MetroUI 是 Windows8 的界面設計語言，在 2010 年至 2013 年間曾經風靡一時，那也是移動互聯網的發展元年，現在國家推行實體經濟、數字化帶動 To B、To G 的發展元年，通過幾何色塊（MetroUI）實現 B 端產品與 C 端設計風格的傳承與銜接，你會發現歷史總是驚人的相似。最后背景結合今年最流行的微軟風，毛玻璃的多彩高斯模糊漸變風，年度作品當之無愧。
最后來看下按鈕的設計，正常的按鈕要么文字加色塊，要么左圖標加右文字，它設計成左文本加右圖標，更加注重信息的可讀性和易讀性，也體現 B 端設計重功能和交互體驗，視覺點到為止的設計理念。
下面我們來欣賞年度最佳作品里面的流行趨勢吧。
1. 易讀性（停頓感）
字體三原則：可讀性、易識性、易讀性。當你同時讀一篇文言文和一篇設計文章，肯定設計文章的內容可讀性更好。易識性是用在字體設計上，不能過于浮夸的改變字體骨架、形體而不易識別。易讀性和每個位設計師都息息相關，因為我們都需要編排文本。當我們小時候寫作文時，不會寫的文字可以用拼音代替。這時候讀者讀到拼音時會有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P聯文本后面添加圖片、表情、圖標來更好的理解文本內容，豐富文本內涵。比如情侶間表達愛意時會輸入文本，“我愛你”、“我 Love 你”、“我 ai 你”、“我??你”，哪個更加會有情感共鳴呢？不言而喻，相信你心中已經有答案了。
2. 曲線
在標題文字上添加曲線來突出重要文案是 2021 Dribbble 最流行的趨勢之一，第一個設計目的就是突顯文字，其次就是想表現鉛筆真實書寫的感覺。之前很多帶有簽名的設計中，簽字的文本都是手寫體的感覺，手寫體對比電腦的機械字體會帶有一種人文氣息，也會讓兩者之間產生一種對比、矛盾。
除了突顯文本外，曲線還有視覺引導的作用。通過視覺引導讓用戶按照設計師編排的順序進行瀏覽界面。當然還有比這更科學的工具就是眼動儀測試，通過真實用戶眼睛瀏覽界面顯示對應的熱點圖。
3. 多彩高斯漸變風
多彩高斯漸變風是從色彩的角度來傳達和豐富畫面的，多彩高斯漸變風其實是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對比來制造畫面的沖突，需要控制冷暖畫面的大小來實現平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯漸變還可以結合輕擬物、幾何圖形、三維等新的組合方式去創新，給用戶呈現一種更加新穎的視覺表現形式。最后我們還是要回歸到內容上，為了更好的傳達信息需要去設計與內容相匹配的視覺風格。
1. 側邊欄 Sidebar
B 端設計的火爆帶動了 B 端相關模塊設計，更多的人也愿意嘗試 B 端相關模塊設計，側邊欄作為產品架構中重要的導航系統，好的側邊欄設計能為用戶帶來更好的效率。主流側邊欄都做了展開、收起、拖拽等交互效果，也是受限于 PC 屏幕為展示更多數據而騰空間。側邊欄主要承擔的功能有導航、分類、自定義篩選、共享、新增等。Dribbble 的 B 端產品設計已經不再是假大空概念設計，而是一套實用美觀可落地的設計。
2. 儀表盤設計
儀表盤設計是一個很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉速表、故障指示燈等。B 端類產品后臺界面的儀表盤設計也需要展示一些重要的數據和各種狀態，大體分為側標欄、導航欄、待辦任務、個人信息、報表數據、消息中心、快捷入口等。當然最重要的就是報表數據，團隊收益、任務進度、轉化比例、新增、存量、團隊工作時長等都是老板或領導關心的內容。每個公司業務不同、每個人員權限不同，自定義的儀表盤也各有差異。重要的是突顯數據和業務狀態，需要分層級系統性去思考和設計。
3. 流程設計
復雜的事情簡單化，簡單的事情標準化，標準的事情流程化，流程的事情自動化。流程設計是每一個企業核心功能和業務，可自定義的管理流程系統搭建也是 B 端產品設計的難點，需要對業務高度抽象，讓每一個業務人員可自定義的流程才是好的流程設計。
4. B 端 C 化
B 端 C 化是 B 端產品設計的視覺表現力慢慢往 C 端產品設計的視覺靠齊，國內 B 端產品界面設計視覺水平還有很大的提高空間。除了視覺上的提升外，由于業務的發展，B 端產品也開始移動化、智能化，國內主流還是通過小程序、H5 來現實 B 端產品 C 端化。
5. 輕代碼化
輕代碼化是一種低代碼賦能無代碼的方式，彌補無代碼拓展性差、覆蓋場景少的問題。在保有無代碼靈活、易用、快捷的同時，又能覆蓋低代碼使用場景。簡單理解就是無需代碼開發即可如搭積木般快速、靈活地創造屬于你的個性化管理系統，輕松實現多元業務場景的數字化管理。
輕代碼化將功能進行打包，升級成全局可以用的配置，技術人員配置好后，業務人員在應用編輯時直接選擇使用模版，綁定對應的變量即可使用。
1. 人文氣息
為什么人加色塊的組合方式能流行起來？還是 B 端行業流行帶動的。B 端講的更多的是企業對企業。企業對企業除了講行業解決方案外，還需要傳達公司的價值觀、使命、愿景。人加色塊的組合方式非常適合體現公司的企業文化。對于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價值觀已經就不言而喻了。
當然企業也需要進行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對食物、性、動的東西、人臉和眼睛、危險的動物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風格更適合大公司，國內的一些手機廠商 OPPO、VIVO 等也會通過手機+背景+人物來體現科技與人文的結合，而對于中小型公司產品差異化和行業解決方案展現應該還是重中之重。
2. 毛玻璃效果
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應當下 UI 扁平化的設計趨勢。蘋果 Mac OS Big Sur 系統的圖標、界面中運用了大量毛玻璃和半透明元素，界面更扁平。至于 C4D 三維彩色玻璃的視頻教程可以在 B 站搜索“透光藝術-C4D 創建彩色玻璃的 4 個技法”，完全能滿足 UI 設計師。當然還有一個好消息就是 Mac 用戶可以享有 OC 一年免費的使用權，具體安裝購買方法上某寶就可以輕松搞定，真香。
3. 輕擬物
輕擬物這幾年一直流行，在 UI 設計中趨于穩定的位置。從寫實到扁平再到輕擬物，其實是設計師們一路不斷探索的結果。本質就是光影對形體產生的視覺感受。在色彩中對高光、亮面、明暗交界線、暗面、反光（環境光）五個部分的處理。寫實三維的圖標等設計更適用于簡潔的畫面中，扁平等設計更適用于復雜一點的界面中，比如 B 端產品界面中的功能圖標。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma 軟件對于漸變、高光、投影、高斯模糊處理已經非常簡單且出彩。
4. 簡潔設計
簡潔設計遵從了密斯·凡德羅的“少即是多”的設計原則，在 B 端產品界面中更加需要簡潔設計，我們最熟悉的 Sketch 軟件界面已經是相當的簡潔了?；氐浆F實當需求功能不斷增加，產品界面的編排如何取舍，如何保證界面的簡潔是設計師需要深度思考的問題？如何與上級溝通？該功能是否可做可不做？是否需要埋點用數據說話？如果只是一味競品有我們就需要有，功能不斷累加只會讓界面越來越重。
5. 幾何圖形
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產品界面和宣傳內容的抽象，產品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個整體。B 端產品視覺設計 C 端化的進程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年Dribbble B 端產品的視覺設計一定會更上一個臺階。
幾何圖形另一個場景化的地方就是品牌，作為一名 UI 設計師一定會經歷從圖標到幾何圖形到品牌設計的過程，品牌設計的技巧基本還是以幾何圖形為主，至于品牌的內涵需要更深層次的解讀。掌握主流品牌設計的技巧對產品定位、品牌宣傳打下扎實的基礎。
6. 暗黑設計
暗黑模式的設計是解決在微弱環境下內容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設備時長增大，如何在夜晚這個特定場景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設計暗黑主題時，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質感。而應該把舒適度、可讀性作為設計的衡量指標。Material Design 給出了暗黑主題的設計準則，即正文和背景之間的對比度應至少為 15.8:1。按照此標準設計，可讀性都還不錯。這里介紹一個插件“Stark”（Figma、Sketch、XD、Chrome 插件）用來測試界面的對比度。
7. 模塊化（組件化）
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統從原子、分子、組織、模版、頁面來快速的搭建界面，但在 B 端產品設計中基礎組件和業務組件的搭建是以提高工作效率為前提，是否有從 0 到 1 搭建 B 端產品組件的經歷是設計師一生中最寶貴的經驗之一，它能提高設計師的系統化思維、邏輯思維和抽象思維能力。
產品模塊化設計就是將產品分成幾個部分，也就是幾個模塊，每一部分都是具有獨立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產品族中可以重用和互換，相關模塊的排列組合就可以形成最終的產品。通過模塊的組合配置，就可以創建不同需求的產品，滿足客戶的定制需求 。
8. 插畫
插畫作為設計的一大品類，不同的插畫師都有自己擅長的風格，本質是都有自己的個性，但是在產品設計中更多是需要共情、共性來講故事，表達產品理念和價值觀。這就需要插畫師去嘗試并探尋出適合互聯網產品設計類的插畫風格。設計的本質是舊元素的重新組合，插畫不會過時，而是需要結合當下和產品找到最匹配的設計風格。
9. 幾何插畫
幾何插畫算是插畫簡化的一種表現形式，人和物的形態不再寫實，而是抽象成幾何圖形拼湊的感覺，同時保留人物形態的神韻。加上幾何色塊與人物交互形態的表現，傳達出簡潔、科技的現代感。難點還是在人物形態的表現上，平時多練習練習速寫還是很有必要的。
10. 線面插畫
線面插畫最近一兩年非常流行，準確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現人物形態時某些結構會表現不出來，這時候用線條簡單勾勒后，結構就會清晰明了。其次當線面插畫運用在界面上時，可以打破界面純文字或組件化的機械和沉悶感。線面插畫的風格提升畫面熱鬧感的同時，還能保持界面的干凈整潔。
1. 微交互
界面微交互動效會讓用戶的體驗更加精致到位。想要打造優秀的產品設計，微交互和動效設計是繞不開的，UI 界面設計通過微交互反饋告知用戶當前正在發生的事情，所處的狀態。細微的動效更能調動用戶情緒，取悅用戶。C 端產品微交互和動效已經很成熟了，一部分功勞來自 iOS 系統原生自帶的效果。B 端產品的微交互和動效更多還是在學習海外產品，還需要給前端工程師灌輸微交互和動效的設計價值，共同打造產品體驗細節。
2. Mg 動畫
Mg 動畫需要很好的節奏感、韻律，每一個場景動畫都需要其中的元素進行連接變化，讓轉場動畫更加自然，MG 人物動畫通過點線面的動效變化讓畫面更加有趣、自然，通過粒子效果讓特定場景無限循環會讓人更加印象深刻。
1. 三維圖標
MacOS Big Sur 系統圖標的更新帶動了三維圖標的流行，三維圖標的應該場景還是需要有較大留白空間的界面，因為三維圖標太小后就看不到更多細節。三維圖標感覺又回到了擬物化和扁平化哪個更好的問題上？設計師應該保持開放多元的視角。設計本身也在不斷的演化融合，存在即合理。合適最重要，它們都會有適合自己的場景和設計價值。
2. 輕三維
為什么輕三維在界面設計中占有一席之位？一個是設計師不斷追求差異化的產物。另一個是更好的表現內容，并與用戶產生共鳴。輕三維的基礎模型都是來自手機界面中的各種元素，比如組件、開關、按鈕、占位符、圖表、幾何圖形、圖標、進度條等，這些都是用戶日常使用系統軟件常見的元素，通過簡單的幾何形體建模—打燈光—加材質—渲染—PS調色。難度系數不大但效果很出彩。第一個出彩點是模型帶有厚度的倒角，結合燈光渲染的光澤是二維軟件不能比擬的。第二個出彩點就是材質自由添加，特別是當下流行的毛玻璃效果，玻璃材質渲染效果更佳。第三個出彩點就是可以加局部燈光，局部的漸變色或環境光更加出彩。
3. P4D（PS+C4D）
P4D 是 PS 加 C4D 的設計表現技法，也是視覺設計的最后一個環節，通過 PS 對 C4D 的渲染圖片進行調色，利用 PS 的調色技巧可以很好的解決 C4D 打燈光的瑕疵，還可以利用 PS 強大的合成功能，將渲染圖片與圖片素材進行合成，來表現畫面的視覺度，當然三維軟件比較難實現的水、粒子、煙花等效果，也可以通過 PS 的后期合成來實現，這也是 P4D 的強大之處。
4. 卡通 IP
卡通 IP 設計最近三四年技術的迭代已經慢慢的走上成熟，卡通 IP 也從傳統的純 PS 手繪技法，轉到 C4D 建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態）/AE（動態）調色。
卡通 IP 火的本質更適合做營銷，相比于品牌或 Slogan，卡通 IP 具有親和力和畫面感。隨著各種手辦行業大熱，受互聯網大廠影響下，卡通 IP 已經是互聯網 B 輪以上公司的標配了。如果團隊中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對于 UI 設計師來說學習是有成本的，暫時并不是必備技能，如果喜歡完全可以學習，從設計差異化的角度來看三維視覺確實有一定的競爭力。
5. 三維動畫
C4D 三維場景動畫通過構建實物和場景模擬生活中的現實場景，會讓用戶體驗真實感，三維軟件制作動效的最大優勢是通過動力學和表達式來模擬真實感，未來在 AR/VR 領域會有更好的發展。相對于界面動效學習成本難度也相對較大。在三維動畫中 C4D 軟件對于域、動力學還是有一定的優勢。
上一次寫 Dribbble 流行趨勢還是兩年前了，通過兩年的沉淀對趨勢流行有了更深的認知。十年的互聯網行業風風火火，隨著最近的互聯網裁員潮大家也慢慢的進入到反思層，客觀的看待和理解這個真實的世界，曾經的流行趨勢也需要慢慢的沉淀下來。
存在即合理，趨勢流行稍縱即逝，注定是不長久的，只有大浪淘沙歷史遺留下來的風格才能更長久。但我們也不能不去關注，因為哪有什么所謂的創新，只不過是舊元素的重新組合，并符合當下這個時代人的審美需求。香奈兒的“時尚易逝，風格永存”大概就是這個意思吧。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
客戶與公司的商務售前進行溝通，客戶的痛點和建議會傳達給產品經理，產品需求明確后，做出原型圖給到設計師。等設計師拿到需求的時候，基本已成定局，合不合理、如何優化的空間都會比較小了。造成這個現象的根本原因是設計師能看到的視角范圍有限，B端業務場景本身比較專業，難以直接帶入使用者的角色，就比較難取得大的突破了。
如何打破這一僵局呢？答案只有一個，那就是設計師要主動更前置的加入到產品方案設計中，深刻理解業務，為產品升級提供助力。這就涉及到用戶研究了，本文將和大家分享用研的相關理論基礎和方法。
雙鉆設計模型由英國設計協會提出，該設計模型的核心是：發現正確的問題和發現正確的解決方案。
雙鉆模型是一個結構化的設計方法，被很多設計師喜愛和使用。
探索/調研——透析問題（發散）
定義/合成——聚焦領域（集中）
發展/構思——潛在問題（發散）
傳達/實現——實施方案（集中）
實際工作中用到雙鉆模型會有一些變體，舉個例子：
下圖是對阿里內部款移動運維產品的分析，分析其從0-1的方向探索和從1-1.5的發展歷程：
下圖是曾經在一個設計講座中，滴滴CDX 一位設計師的分享，她把雙鉆模型利用到設計的研究和輸出階段，個人感覺此模型的使用場景也很貼切。
不僅僅是在完整的一個項目中，在單一的某個階段雙鉆模型也是理念很好的承載容器。在每一個“確定”前后，都有用研的身影。
用研旨在通過實驗和觀察結合的研究方法來提高產品的可用性，指導產品的設計、開發和改進。重點是通過觀察技術、任務分析和其他反饋方法來了解用戶的行為、需求和動機。
在獲取后臺數據之后，我們會分析為什么留存、為什么流失、為什么買這個不買那個，
設計師認為很棒的新功能，真的是用戶想要的嗎？用戶真的會用嗎？
觀察數據只是一種手段，而非結果。當一個頁面中出現值很低的功能時，我們不能直接判斷他就是不重要的，也可能是因為視覺上太弱或者交互操作不方便引起的。只有做用戶研究才可以真正了解用戶的行為背后的原因，真正的動機。
如上圖，是一個紅包發放頁面的設計前后對比，從數據中了解到使用優惠券的用戶不到30%，埋點發現大多都點擊了返回，用戶沒有按照期望的路徑走，調研發現操作路徑不清晰，沒有形成閉環。由此可見，發現問題時，先埋點細化問題——再分析問題——結合用戶研究，提出優化方案，才能真正發現問題解決問題。
產品的發展周期分為產品概念期、設計開發期、宣傳推廣期、平穩發展期和產品衰退期五個階段，在每個階段都有相對應的用戶研究測試可以做。
對應上文的產品發展周期可以做的用戶測試，我們要找到相對應的人群：
最后就是將用戶研究進行落地了，如何讓用戶研究達到預期的目的和效果呢？可以在開始前的準備階段問問自己如下的問題：
接下來我們看看到實際落地環節，有哪些用戶研究的類型可以做以及怎么去做。
桌面研究又叫“文案研究”，指不進行一手資料的實地研究和收集，而是通過電腦，雜志，書籍，文檔，互聯網搜索等現有二手資料進行分析和研究的方法。
完整的桌面研究分為以下五個步驟：
在需求細分階段，可以用到SWOT 分析、波特五力模型、PEST分析、波士頓矩陣等模型
收集數據通?？梢詮膬炔繑祿屯獠繑祿碓磸V泛獲取然后結合分析。
內部數據來源：市場營銷數據、產品后臺數據、其他相關報告等。
外部數據來源：政府部門、國際組織、行業協會、專門調研機構、聯合服務公司、其他大眾傳播媒介、商會、銀行等金融機構、官方和民間信息機構等。
定性研究是指通過收集、分析和解釋那些不能被數量化的信息，來挖掘問題、理解事件現象、分析人類行為與觀點的方法，主要作用是探索“可能性”。
定性研究專注于更小但更集中的樣本，通過非結構詢問和觀察來獲得不能量化的信息。
流程如下：
常用的定性研究方法：
我們需要明白訪談適合哪一種項目研究，比如要針對新功能進行一次面訪。
接下來我們需要進行用戶的招募，因為面訪比較耗費時間和精力，所以最好準備一些禮品，否則很難招募到用戶。招募用戶的渠道可以是產品中投放問卷、社群招募等方式來邀約難度用戶。
用戶訪談環境，準備一個安靜的房間，準備好水、紙、筆、錄像、錄音筆等工具。
整理訪談內容，每訪談完一位用戶進行一次小結。
接下來模擬一次用戶訪談的整個流程：
開場：首先介紹一下自己的情況，并且讓用戶了解這次訪談的目的，建立一個輕松的談話氛圍。
探索：針對研究目的進行探索，比如目的是做用戶體驗地圖，了解用戶在使用過程中遇到的問題。
注意：如果直接問平時怎么使用我們的產品，用戶會比較懵。這個時候最好給他一個確定的環境，比如你能不能演示一下你平時是怎么管理貨源的，這個時候他就明白原來需要我進行這樣一個任務。
觀察：在用戶回答提問和操作演示中，查看用戶碰到了什么難題。比如有超過一半的用戶多次點擊一個按鈕，說明這個按鈕設計的大小不太合理。
思考：深層次挖掘。比如用戶反饋字太小，但實際操作中并沒有瞇著眼或更靠近屏幕，可能原因一是他們本身就把手機屏幕文字調為最大，二是信息排布過于密集，效率低，并非因為字小。
定量研究是指確定事物某方面量的科學研究，將問題與現象用數量來表示，進而分析和解釋，從而獲得意義的研究方法。定量研究的數據分析，主要作用是回答“多少”的問題。
定量研究的意義：
用一個數值來表示你產品的可用性。數值有時比質量檢測的結果和視頻更有說服力（特別是當你試圖說服像高管或客戶這樣的人）時。
比較不同的設計（比如，你的產品的新舊版本，或者是你的產品與競爭對手的產品相比），并且確定你觀察到的差異是否具有統計學意義，而不是隨機的。
改進用戶體驗權衡決策。比如，如果預期的設計改進成本很高，那么它值得做嗎？定量研究方法可以幫助你驗證重新設計是否值得。
常用的定量研究方法包括：可用性研究、A/B Test、問卷調查和滿意度調查。
測試的重點是收集數據指標，比如任務時間或者成功率，一旦你收集了相對較大的樣本量（大約35個或者更多），你就可以使用它們來跟蹤產品的可用性，或者將其與競爭對手產品的可用性進行比較。
在A/B測試中，團隊需要創建同一界面的兩個不同的最新版本，然后將每個版本展示給不同的用戶，用來確定哪個版本的性能更好?；诜治龅膶嶒灒瑢τ跊Q定同一個設計的不同變體非常有用，并且可以結束團隊關于哪個版本最好的爭論。
問卷調查是一種靈活的用戶研究工具，調研時可以同時獲得定量和定性的數據，比如評分、多項選擇題中的答案的比例，再加上開放式問題的答案。你甚至可以把對調查的定性回答轉化為數字數據。
問卷的一個優點是：可以經常將你的調研結果與行業或競爭者的分數進行比較，看看你做得怎么樣。即使你創建了自己的自定義問卷，也可以隨時間的推移對自己產品平均分數進行追蹤，來監控產品的改進情況。
可以根據你的研究問題進行定制，這些方法通常會首先讓參與者接觸到產品（通過向他們展示靜態圖片或者要求他們使用現場產品或原型）。然后，要求用戶通過從描述性的詞語列表中選擇一個來描述當前設計。
如果你獲取自身目標用戶的樣本量足夠大，那么整體趨勢就會顯示出來。例如，你可能會有84%的受訪者將此設計描述為"最新"。
比如這次改版用戶對新版本的滿意度怎么樣。只有確定了目標，你的問卷才是有價值的。
因子分析法要求調查數量是調查問卷問題數量的5-10倍，因此，如果調查問卷中共有20個問題，那么調查樣本數量可以大概確定為100～200個，有效回收樣本30份即可。
問題順序的基本原則
往前放：
熟悉的問題
簡單的問題
引起興趣的問題
往后放：
開放式的問題
個人背景資料
簡潔明確：
?你用了多久的Google map？（?）
?你第一次使用Google map是什么時候？（?）
這兩個問題看似類似，但是當用戶在思考的時候，第一個問題顯然會思考更多的時間，用戶很可能在想，是想知道我第一次用的時間，還是我用了多久的時間。
中立、無誘導性：
?你喜歡這個功能的設計嗎？（?）
?請您對這個功能的滿意程度進行一個打分，最低1分最高5分？（?）
避免使用帶有引導性的問題，問用戶是否喜歡、是否滿意，這樣通常用戶都會偏向于回答喜歡。
設置選項時，要做到：
定量分析的結果多以數據、模式、圖形等來表達。
?眼動追蹤，英文Eye Tracking，是指通過測量眼睛的注視點的位置或者眼球相對頭部的運動而實現對眼球運動的追蹤。
眼動儀是一種能夠跟蹤測量眼球位置及眼球運動信息的一種設備，在視覺系統、心理學、認知語言學的研究中有廣泛的應用。
注視分析——分析注視軌跡、先后順序與流暢度
注視熱點圖——分析最關注區域和忽視區域
興趣區分析——分析平均注視時間與各興趣區注視順序
通常需要輔助測試（如定性訪談）來收集更多實驗數據
?腦電研究，大腦活動時，腦內億萬神經元活動引起頭皮表面的電位變化，含有大量心里信息，測量腦電信號可繪制腦電圖，以不同波形反映出來。
利用生理探測技術，研究用戶對產品的情緒反應
相比傳統調研，更加能夠排除從眾行為、事后回憶偏差、社會贊許效應等的干擾
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
很多網站在短時間內就取得了巨大的進步 —— 那些過去十年里最知名的品牌網站，與第一次迭代相比發生了很大的變化，這令人感到無比驚訝。
網站最初用于商業目的時，人們并沒有過多地關注用戶體驗。過去的目的是將盡可能多的內容塞進一頁里?，F在，設計師們通過大量研究、數據挖掘和優化等方式來吸引用戶的注意力，同時在正確的時間提供合適的內容、功能和選項。
越來越多的公司正在采用先進的心理學研究，以推動用戶參與更多的互動和付費項目，這一現象使得曾經被認為是一門藝術的東西轉變成了一門科學。
1997 年的 Apple 網站
除了許多必要的元素之外，好的設計總是會考慮到用戶的情感和心理需求。讓我們來看看什么是「說服式設計」，并探索如何將影響人類行為的心理過程應用到設計中。
“說服” 這個詞往往與操縱、欺騙相關聯，尤其是對一個善于使用「互聯網陷阱」的設計師來說。但是，我們要明確一點，說服式設計中的 “說服” 并不是這個意思。說服式設計可以使網站易于使用，從而改善用戶體驗。因為，說服式設計是源于對心理誘因、用戶行為的理解和運用。
（互聯網陷阱：興于 2010 年，由當時英國用戶體驗咨詢師 Harry·Brignull 首次提出，指的是網站或應用程序采用誘導性或脅迫性設計，迫使用戶采取或不采取某種行動）
例如，亞馬遜就很好的運用了說服式設計，它通過推薦其他產品和配件，以及展示 “查看過此商品的顧客也購買了某物品” 的選項，引導用戶繼續購買更多商品。為了快速完成銷售，他們還為購物者提供了一鍵購買商品的功能。
亞馬遜運用說服式設計的案例
我們都一直在花費大量時間上網，設計師可以利用從線下行為中學到的知識來創造更好的用戶體驗。無論你是想優化現有網站還是構建應用程序，說服式設計都將引導和支持用戶的在線體驗。
設計師要如何利用心理學的研究成果來增強其設計的影響力呢？
理解心理學原理可以讓你對工作的基本原理有更透徹的理解。它可以：
讓我們來討論一些心理學理論。
作為人類，我們天生就需要控制。這可以追溯到我們最本源的需求。在劃分需求層次時，心理學家亞伯拉罕·馬斯洛（Abraham Maslow）在提出需求層次時，將我們最基本的需求命名為：健康、食物和睡眠。所有這些都需要我們對環境進行一定程度的控制。
馬斯洛需求層次
作為 UI 設計師，我們需要確保用戶在我們為他們創建的環境中擁有積極的體驗。這就意味著需要通過提供合適的工具來增強用戶的能力，以幫助用戶在產品的使用過程中獲得控制感。
“今天，你可以調整屏幕的亮度，禁用通知，并可以決定手機是否應該同時連接蜂窩數據和 Wi-Fi …… 即使這些調整只會將手機的電池壽命延長幾分鐘，但這種可以掌控一切的成就感也會使用戶感到溫暖。” -- 用戶體驗顧問 Nadine Kintscher
我們需要創建能夠平衡功能和視覺吸引力的界面，并將掌控權提交給用戶，以便他們有更滿意的體驗。
澳大利亞房地產搜索網站 Realestate 成功的做到了這一點，它讓用戶能夠根據自己的偏好篩選所有房產，并讓他們可以選擇按不同的標準進行排序。
澳大利亞房地產搜索網站 https://www.realestate.com.au
我們該如何設計一種數字體驗，才能使用戶在適當的時候進行所需的行為？這需要了解一個簡理論 -- 「福格行為模型」：一個人行為（Behavior）的發生需要滿足至少三個條件，動機（Motivation）,能力（ability）和誘因（trigger），用公式表示即 B = MAT，這三者必須同時具備，缺少任一條件都不會導致行為的發生。對于任何試圖實踐勸導心理學的人來說都是理想的選擇。理論表明，一個行為得以發生，行為者首先需要有進行此行為的動機和操作此行為的能力，接著，如果他們有充足的動機和能力來實施既定行為，他們就會在被誘導時進行此行為，預期的行為就會發生。
（福格行為模型：由斯坦福大學「說服技術研究實驗室」Persuasive Technology Lab 創始人 BJ Fogg 研究而來）
動機 -- 人們做出這一行為的原因是什么，做出這一行為的原始動因是什么；
能力 -- 人們做出此行為需要滿足什么能力，人們是否有條件來完成這個行動或者做這件事；
觸發 -- 是什么誘發用戶會做出這個行為，什么因素會導致用戶會完成這個。
福格行為模型（https://behaviormodel.org/）
尼爾·埃亞爾（Nir Eyal）和瑞安·胡佛（Ryan Hoover）合著的書籍《上癮》中曾提到過 福格行為模型，揭示了很多讓用戶形成習慣，甚至“上癮”的互聯網產品服務背后的基本設計原理，告訴你怎樣打造一款讓用戶欲罷不能的產品。作者根據自己多年的研究、咨詢及實際經驗，提出了新穎而實用的 「上癮模型」（Hook Model），即通過四個方面來養成用戶的使用習慣。通過連續的“上癮循環”，讓用戶成為“回頭客”，進而實現循環消費的終極目標，而不是依賴高昂的廣告投入或泛濫粗暴的信息傳播。
上癮模型
一個很好的例子是 TurboTax，在《為心靈設計：勸導式設計的七個心理學原則》一書中討論過。
即使交稅不會使我們感到開心，我們仍有很強的動力來報稅。然而，與其他所有國家一樣，美國的稅收制度過于復雜，難以理解。TurboTax 在書中提到，使用戶能夠通過詢問基本問題更輕松地完成納稅，可以有效的提高用戶的納稅能力。在 TurboTax 的設計中，他舍棄了冗長的文檔，相反，創建了一個工作流，使用戶可以進行簡單的逐步操作。最終便捷的操作方式會成為誘因，使用戶愿意嘗試在線提交稅款。
TurboTax 設計的報稅系統
用戶有充足的動機和能力，同時又具備誘因，三個要素完美結合的情況可能會讓人感到過于理想或不自然。事實上，其中某一因素占比多也沒關系。發微博就是一個很好的例子，沒有什么重要事情的話，發微博的動機可能很低，大多都是瀏覽；但觸發因素隨時都可能出現，提醒你可以開始行動了，可能是一個轉發抽獎的活動、可能是朋友正好生日；同時，發微博的操作非常便捷，用戶具備能力隨時都可以發布。
作為設計師，我們可以使用該理論來檢查是否為用戶建立了足夠的動機和能力，并提供誘因來引發他們的行為。
以上兩種理論（控制感，以及 動機、能力和誘因）都需要進一步的研究，它們在設計界面時非常有用。
或者，有一些更簡單的心理學理論，不需要較復雜的研究，即可用到你的設計中，比如 稀缺 和 害怕錯過（FOMO -- Fear of Missing Out）的概念。
亞馬遜在商品上增加 “只剩下 1 件存貨” 強調庫存不足，使用 FOMO 加強緊迫感
幾十年來，心理學家一直對人們保持注意力的能力不斷下降而感到困擾。
眼動追蹤已經存在一段時間了，它主要用于測量用戶注視某一點的位置和持續時間。研究表明，互聯網的平均注意力持續時間不到幾秒鐘，用戶會立即做出有關網站的決定，如果不適合，就會離開。
數據驅動的設計（https://www.eyequant.com）
EyeQuant 將這一想法向前推進了一步，利用眼球追蹤數據構建了一種預測算法。你無需自己進行眼動測試，而是將設計上傳到他們的網站，他們會告訴你用戶在使用你的網站時關注點在哪些地方。
他們找了德國的參與者，并利用這些參與者建立了一個龐大的數據庫，該數據庫包含了大量吸引用戶注意力的內容和不吸引用戶注意的內容。研究發現，高對比度色彩比較容易吸引用戶，表情和粗體的文字也是如此。
眼動追蹤軟件可能很昂貴。取而代之的是，諸如 Sumo Heat Maps 的在線分析軟件，可用于顯示訪問者單擊的內容和位置，以及吸引最多注意力的內容。然而，請記住，雖然我們可能會抓住大腦的注意力，但我們也有可能會把用戶從更重要的事情上拉走。
使用眼動追蹤或熱力圖可以使設計人員立即獲得有關其設計的客觀反饋。作為設計師，它可以用作用戶體驗想法的驗證，并為你的設計決策提供數據，允許你通過 A / B 測試來優化設計。
眼動追蹤可獲得用戶行為的客觀反饋
你是否曾經注意到人類天生會有模仿他人的欲望？一個人的欲望也會促成他人的欲望。這種理論是由勒內·吉拉德（Rene Girard）提出的，理論認為，如果某人表現出對某件物品的渴望，你也會渴望得到這件物品。廣告商就是利用這一方式促成人們對某物的渴望，顯然，廣告成功的激發了人們更多的欲望。
你我都是模仿生物。Darren Bridger 的《神經設計》一書就探索了這一理論，研究發現我們有一個鏡像神經元系統。換句話說，僅看到某人執行某項操作（例如撿起一件物品）就會使你的大腦反映出該活動。
模仿一詞的英文解釋
模仿欲理論意味著如果我們看到別人擁有某樣東西，我們便也想擁有 —— 這一點可以用 「社會認同」（或從眾心理）來解釋。
一種社會認同是來自 “用戶的認同”，就像是推薦。推薦之所以有效，是因為它們來自擁有共同愿望和價值觀的人。例如，專門為企業家服務的媒體 Foundr 不僅使用用戶的聲音，而且還顯示人臉，從而觸發了鏡像神經元系統。
Foundr 專門為企業家提供媒體服務
另一種社會認同是來自 “專家的認同”，即你的產品獲得了專家的認可，例如你的產品被 Twitter 提及、新聞引用、甚至有大 V 專門為你的產品撰文。Google 在其最新的 Pixel 手機廣告系列中使用了這種技巧，用 Google 自身的品牌影響力作為最強力的背書推薦這款手機。
僅僅強調這款手機是 Google 出品，無須多言
對于設計師來說，現在是一個令人激動的好時代 -- 有豐富的資源和研究可以支撐我們的工作。
設計趨勢正在向體感，語音、虛擬現實（VR）、增強現實（AR）、混合現實（MR）和物聯網（IoT）轉變；隨著這些交互技術的不斷發展，人們需要以更直觀的方式來使用界面。
我們將迎來許多新的設計機會，而心理學將在其中發揮著重要的作用。
下一個我們日常生活中與設備交互方式的重大轉變，將從觸屏變為使用腦電波交互。該技術已經可用，使人們能夠通過思想直接控制其設備。
隨著我們逐漸接近人們的真實想法，心理學在設計中的應用以及設計師的道德責任將發揮越來越重要的作用。
除了使用分析法、用戶研究、用戶體驗地圖和其他方法來幫助做出設計決策并迭代產品外，設計師還應考慮使用上述四種有說服力的設計方法來完善其 “技巧工具包”。
有說服力的設計并不邪惡。它是一種工具，并且像任何工具一樣，它可能被濫用。然而，通過正確的研究和深思熟慮的應用，它可以成為任何設計師工具箱中的寶貴補充。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
簡介： 按鈕組是把相關的動作組織成一組按鈕的設計模式。按鈕組的內部內容彼此水平或垂直對齊，并采用相似的視覺設計。如果超過三個或四個動作，往往會采取多個分組。
例子： 語雀編輯器的頂部工具欄
按鈕組可以讓界面不言自明。在復雜的布局中，被精心安排過的按鈕組會很容易被用戶感知和使用。一方面，它們在界面上往往非常明顯，用戶能夠一眼看到有這些功能可以進行相關操作。
大家所熟知的格式塔原則（Gestalt principles）也在這里起作用。彼此相鄰的按鈕往往暗示著這些按鈕的功能相近，因此會讓用戶感覺到這一組按鈕可以完成類似的功能。相對的，不同的按鈕分組往往暗示著不同的功能類型，因此彼此間應該保持間距，或用不同的形狀，或用分割線進行區分。
如果你需要在界面上展示許多操作按鈕，且需要確保它們隨時在界面上可見。但同時，你又需要用圖形化的方式組織它們，以使它們看起來不會特別散亂。
這些動作中有許多是彼此相似的 —— 它們有相似或互補的效果，比如，它們的功能語義相類似 —— 由此它們可以三五成組地放在一起。
按鈕組可以用在對產品全局有效的操作上（例如「打開」和「選項」操作），或特定的一些通用操作（「保存」、「編輯」和「刪除」），或特定的某些操作（例如布局的「對齊」、「分布」）。不同范圍的操作不應當被到一個組中。
使用條件：
· 存在大量操作按鈕；
· 希望用圖形化的方式組織這些按鈕；
· 操作按鈕間存在功能相關性和差異性；
這個模式的總結簡單到像是一句廢話：把相關的操作按鈕分成一組。
但如果詳細展開就會有更多的介紹。比如：
· 如果需要包含文本說明，盡量使用兩個字或三個字的動詞短語，不要使用專業術語。
· 不要把不同功能范圍的按鈕放在一個組，應當將它們分成不同的分組。
· 同一組的按鈕應該有同樣的視覺設計：邊框、顏色、高度或寬度、圖標風格、動態效果等。
· 在空間排布上，可以將它們并排起來作為橫排放置，如果空間不太適用的話，也可以考慮一列縱列放置（例如Photoshop的左側工具欄）。
· 如果某一個動作是核心動作，可以將其區別對待。例如網頁表單中的“提交”按鈕。核心動作是希望大部分用戶都需要（或期待）執行的動作。讓這個按鈕擁有更加強烈的圖形或視覺風格來讓它在顯得更為突出。
· 如果按鈕足夠多，而且它們都有小圖標，你也可以把它們放在工具條或者像工具條那樣的狹長條上，放置在頁面的頂部。
通過使用按鈕組可以避免界面上按鈕或鏈接過于擁擠混亂，也可以避免一長串冗長的動作列表看起來毫無關聯或區別。
通過這一模式，你可以創建一個較為清晰的元素層級結構：用戶可以一眼看出哪些動作是彼此相關的，哪些是重要的。
用戶需求：編輯設計文件中的對象
Sketch 也是個很典型的應用了按鈕組的設計工具。Sketch頂部的按鈕不少于15個， 有很多要理解和追查。 但是得益于精心的視覺和語義組織，界面按鈕始終保持一定的可理解性。
用戶需求：按自己需求對文件進行顯示修改和操作
這個案例顯示了來自 macOS 的 Finder 窗口的頂部按鈕組。 秉承其設計傳統，按鈕風格明顯。 導航組是放置在左側中的按鈕組。 布局相關的按鈕組放在了中間，文件操作相關的按鈕組放在了右側。這樣的設計使得界面變得易于理解和使用。
用戶需求：項目執行相關操作
這個案例顯示了 Webstorm 的頂部功能操作區。WebStorm 采用了按鈕組的模式，將項目執行的相關操作和Git相關的操作聚合在一起，中間使用了分割線進行了區分。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在日常工作中，身為設計師的我們時常有這樣的情形：身兼多個業務，但大部分的業務都是小業務，業務方給的需求也是七零八碎的小需求居多。面對該情況設計師有時會覺得沒有一點挑戰，限制自己對美好設計，給用戶創造美好生活的想法，總想要去搞個大新聞。
不妨回頭看看小業務，自己真的對它了解了么？這里提供一種視角，小業務也可以做大視野的事。通過一個小業務的案例改版，講述如何從小項目中出發。
曾經負責過一個基礎模塊支持：設計詳情。它是設計師用酷家樂設計工具設計方案產出的載體。該模塊在之前有過改版迭代，迭代對業務目標（留存活躍）的提升并不理想。那從哪里入手呢？
理清業務目標
挖掘用戶需求場景
梳理產品功能
拆解設計目標
設計策略實施
驗證迭代
相對于大業務（例如網站改版），小業務因為簡單，其業務目標界定常容易被忽略。在日常設計中常會遇見設計師在不知道業務目標是什么、目標模糊、目標不正確的情況，直接從梳理小業務具備哪些功能直接入手，分析下現狀問題后開始制定設計策略，這往往會導致設計出現解決不了關鍵問題、出現偏差情況。產品功能本身只是滿足用戶需求和實現業務目標的服務載體，只是策略的表象。理清小業務所承擔的業務目標是前提，那么如何理清呢？
理清業務目標
小業務目標來自大業務目標，對大業務的業務目標進行一級級向下拆解后，即可獲得小業務對應的目標。目標拆解需要遵循MECE原則，拆解方法包含：二分法、過程法、要素法、公式法、矩陣法。（tips：目標的拆解有一定難度，）
Dapp設計詳情為例，在酷家樂大增長業務背景下，用戶活躍和用戶留存為核心的目標，設計詳情處于設計路徑的一個節點，拆解得到設計詳情的5個主要業務目標：
設計詳情-用戶周活躍
設計詳情-新用戶留存
設計詳情-老用戶留存
設計詳情-內容投稿數
設計詳情-內容分享數
業務目標可分為2個類別：
第一類別：符合用戶意愿，如活躍、留存，在滿足用戶需求的情況下可以自然達成；
第二類別：不符合用戶意愿，如內容投稿、內容分享，用戶不太會主動去完成，需要去創造動機，激勵用戶進行。
有小業務的業務目標后，第二步就需要給用戶提供價值滿足用戶需求，以此來實現業務目標的達成。梳理清楚小業務服務了哪些用戶需求是提供價值的前提，那如何獲取用戶需求場景呢？
1. 用戶訪談——獲取相關用戶需求場景
用戶需求場景可以幫我們清晰了解到用戶使用產品的原因。用戶需求場景可以一句話進行界定，包含四個關鍵要素，其中需求本身最為核心，需要挖掘出當前訴求和其背后的潛在需求。
“在【某環境下】，【某用戶】做了【某事】來滿足【某需求】”
用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設計師入行年限分組（1-3年、3-5年、5年以上），每次分組訪談2-3個設計師。梳理出設計詳情相關的8個需求場景
訪談信息整合如下
2. 規整用戶需求場景
在業務訪談中獲取的場景往往都是碎片化的，碎片化場景對設計指導容易出現偏差，需要把場景結構化，為后續的方案設計提供依據。我把獲得的場景按照設計師設計流程進行規整，按設計前、設計中、設計后三個階段進行劃分。
以上梳理了設計詳情相關的用戶需求場景，再來看原設計詳情只基礎滿足了資料管理和方案展示的2個單一場景，在設計師的整個設計流程中只占了一部分。從設計層面來看，該2個場景局限在方案設計大場景中，設計更多做的是對其方案設計操作的體驗優化，在原有較好操作體驗的現狀下，其對給用戶創造價值上沒有很大增量。再從以上業務目標來看，2個單一場景很難去促使用戶對內容進行分享和投稿。
在理清小業務的業務目標和需求場景后，下一步就是按照場景去梳理產品能力。
1. 小業務功能現狀分析
老版app設計詳情的功能進行初步的現狀分析，設計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看，多個場景無法實現，如營銷、談單；從業務目標來看，通過當前功能有較大的優化空間，如當前投稿很難讓用戶知道投稿有什么價值。
2. 產品能力梳理
分析現狀發現功能不足以支撐用戶需求場景，有獲取功能2個方向：
挖掘現有能力：可以擴大梳理范圍，從小業務所在的上一級業務到整個平臺，一級級往上梳理場景對應的現有功能。
打造新能力：圍繞場景，打造出新的功能
挖掘平臺上現有能力，可對業務的能力價值最大化利用，與其他業務形成互通，實現1+1大于2的業務價值。亦可圍繞場景打造新能力，可反推產品去發倔新功能。
以下是設計詳情涉及所有場景的產品功能矩陣，從平臺獲取到了很多全新的能力，以及對原有的能力進行了能力拓展。
在梳理出產品能力后，需要通過設計策略把產品能力有效組織起來，讓用戶快速感知快速上手使用。設計策略推導自設計目標，那如何得到設計目標？
基于用戶需求場景將行為事件拆分，提煉行為事件再推導出設計目標，再基于設計目標給出設計策略。
Dapp設計詳情受制于移動端能力，只涉及設計詳情中5個相關場景，其設計目標和設計策略的拆解結果如下
拆解出設計目標后，基于目標分析產品現狀得到存在的設計問題。為什么要基于目標分析現狀？首先需要明確什么是問題，問題是導致目標和現狀不一致的原因。只有明確了目標才可以理性分析與現狀存在多少問題。在日常中時?？吹皆O計師會直接得到問題，很多情況是默認假設了一個預設目標，但這目標得到不嚴謹、不全面，容易導致得到的問題本身也出現偏差。設計策略基于設計目標或問題得出，其最終都來自設計目標。
對老版Dapp設計詳情現狀進行了分析，得到了問題
在上一步得到設計策略后，圍繞著設計策略是設計方案。本段將不全部展開說明，只選3個關鍵點講述設計方案的思考
1. 設計詳情框架的設計
Dapp設計詳情涉及5個場景的承載及產品功能繁多，設計三步思考：
第一步：簡化功能認知，對功能結構化，以場景的維度重組織功能，并以場景打造功能集合的認知，建立場景能力區；
第二步：梳理場景共同涉及的內容，作為聯系的載體承載場景的放置，設計詳情中展示態的方案涉及到了5個場景中的4個場景
第三步：提取場景中即時性和高優先級功能，打造快捷功能區
框架如下
建立框架后，填充具體的能力和內容。如場景入口放置于底部，并根據場景優先級做了主次的區分。
設計詳情框架建立后，打造細分場景中的設計
2. 營銷獲客場景設計
營銷場景的設計，將營銷組成拆分為可營銷內容、營銷的渠道、渠道內容展現三大類，就可以清晰去梳理出現有的功能，以及可從內容、渠道各自去拓展挖掘。內容和渠道清晰后，再傳達各渠道提供的價值激勵用戶去觸發行為。
3. 談單場景設計
談單場景關鍵在方案詳情上，談單面對不同情況，存在多種內容形式去展示方案。在上面內容梳理中最主要是3個內容：圖文方案、全屋漫游、渲染圖冊。在方案詳情中，頭部承載了全屋漫游、圖冊，如圖文方案過于繁瑣可直接點擊全屋漫游圖進行講解，亦可點擊封面進入圖冊直接圖片說明。圖文詳情加上了房間切換的導航，可快速切換到需要講解的地方。
上線后數據平穩后觀測，設計詳情的周活提升了89%，每個場景下的功能數據都得到顯著的提升（tips：有部分數據因技術原因沒有采集到）。除了改版了Dapp側的設計詳情，后續對PCweb側的設計詳情進行迭代，同樣起到不錯的結果。數據的結果驗證了方法的可行，并起到了積極的效果。
以上是我應用這套設計方法去做了塊小業務優化，反向推動進入產品迭代，上線后取得了不錯的成績。在本次賦能后，對小業務中多了一些感悟
小業務是大業務的縮影，可以作為去賦能大業務前沿驗證的實驗田，大概率可以快速驗證自己的想法，即使方向錯了因為小業務改動影響面也小
因知識廣度和深度的限制，不是所有設計師都可以一開始就可以把控大業務，小業務可作為打磨設計深度專業度，一些小業務的復雜度并不低于大業務
該設計方法同樣適用于大業務，但方法是死的，不是所有情況都套用，得需要把握重點靈活應用
不要總想著搞個大新聞，在能力未被業務方認可時，小業務的賦能可以成為一個很好的發聲口
不要輕視小業務，有可能是你根本還不了解
近些年，得益于經濟和社會的高速發展，越來越多的中老年人開始嘗試享受移動互聯網帶來的便捷生活。50歲及以上網民在總網民中的占比已經由2015年的9.2%提升至2020年的26.3%，增長接近兩倍。但中老年在融入移動互聯網時仍面臨諸多困難，是需要重點關注的弱勢群體。
隨著各類問題在社會輿論中持續發酵，國家政策也開始關注中老年的互聯網使用體驗，推動各類APP進行適老化改造。2020年12月，工信部發布《互聯網應用適老化及無障礙改造專項行動方案》。2021年3月11日，全國人大發布《十四五規劃綱要》，明確提及“加快信息無障礙建設，幫助老年人、殘疾人共享數字生活”，更是將信息無障礙建設上升到了國家頂層規劃的高度。
為了更好地服務中老年人，百度在2021年上線了百度大字版和百度關懷版APP。對于中老年人來講，視力老化是難以避免的問題。隨著年齡增長，中老年人晶狀體硬化、睫狀肌衰弱，物體不能很好地成像在視網膜上，帶來視覺上分辨物體的敏感度、色彩感、明暗感、空間感的下降。
但是對于中老年人而言，手機APP的字號、行距真的是越大越好嗎？我們首先試圖從現有標準中尋找答案。然而通過梳理，發現行業內已有標準主要是針對各類殘障人士的，并且是原則性的建議，推薦的字號、行距的理想值過于寬泛，對手機APP適老化設計升級的指導意義比較有限。比如W3C發布的《Web內容無障礙指南（WCAG2.1）》，關于行距的要求是“至少為字體大小的1.5倍”。所以我們通過科學、嚴謹的研究，制定了一套設計標準，來指導資訊類/內容類APP全場景文字排版適老化設計升級，為中老年用戶帶去字里行間的關愛和更好的閱讀體驗。
下面就將從研究方法和成果兩個方面做具體介紹。希望能幫助大家掌握相應的研究思路，在后續制定設計標準時可以快速上手，同時也將此次適老化設計標準研究的成果與大家分享，為資訊類/內容類APP適老化設計升級提供參照。
///
研究流程與方法：如何通過用戶研究制定一套設計標準？
| 明確標準的應用方向
為了讓一套標準對設計工作具備實際的指引價值，我們在研究規劃環節充分考慮了設計經驗和迭代需求。用戶研究和設計師一起對資訊類/內容類APP所有涉及文字排版的頁面、模塊進行了通盤梳理，確定了12類應用方向（即用戶的使用場景）。對于這么多使用場景分別做研究費時費力，我們選擇通過洞察背后的用戶閱讀模式，把12類應用方向收斂為4大類閱讀場景：3類主場景（包括長文閱讀、搜索、概覽閱讀）和1類輔助信息場景。針對主場景，研究中老年用戶理想的字號、行距和粗細組合；針對輔助信息場景，研究中老年用戶的最小可辨識字號。這樣研究既能覆蓋各類應用場景、不同的信息層級，又能更聚焦、更高效。
| 構建評估體系
在確定了標準的應用方向之后，評估體系的搭建也參考了過往的設計經驗。我們一方面查找并梳理了學術界在字號、行距方面的研究成果，另一方面也結合了百度已有的設計經驗。最終確定了字號、行距、粗細、顏色四個考察變量在不同研究場景的研究范圍（即自變量選取水平），并綜合主觀體驗指標和客觀眼動數據指標搭建了中老年閱讀體驗的評估體系。其中,主觀體驗指標包括關鍵信息發現、清晰度、舒適度、滿意度；客觀眼動指標包括眨眼頻率、瞳孔直徑變異性和閱讀速度。
| 實驗流程
在實驗中，我們邀請了60位50-70歲中老年用戶參與調研，通過任務模擬他們在真實場景的長文閱讀、搜索、概覽閱讀情況，綜合眼動實驗、問卷調研和訪談方法評估不同字號、行距、粗細對中老年閱讀體驗的影響，探尋不同場景下最適合的字號、行距、粗細方式。在實驗過程中，通過SMI-ETG2w眼鏡式眼動儀測量眼動數據。
///
研究成果：適老化設計標準介紹
通過對各類閱讀場景、設計變量和體驗影響因子的充分分析，本研究形成了一套完備、成體系的適老化設計標準，可用于指引資訊類/閱讀類APP中不同頁面和不同信息層級的適老化設計改造。
| 主場景理想字號、行距和粗細的組合
研究結果明確了資訊類/內容類APP對于中老年人在不同場景里任一信息層級的理想字號、行距和粗細組合。以概覽閱讀場景（Feed列表頁）和長文閱讀場景（圖文落地頁）為例，優化前與預計優化后的字號、行距、粗細組合如下：
概覽閱讀場景
長文閱讀場景
| 輔助信息最小可辨識字號
此外，研究結果也明確了黑色（1F1F1F）字體的全局最小可辨識字號。以75%中老年用戶可以看清的字號作為最小可辨識字號標準，黑色（1F1F1F）最小可辨識字號為36px。
此次研究填補了學術界和業界在手機APP適老化設計領域的空白。在百度，該套標準已落地百度關懷版，未來還會在百度大字版和更多為老年人提供服務的APP上線。面向行業，我們也積極共享研究成果。百度大字版、百度關懷版運營同學牽頭和老齡產業協會合作，設計師結合本次研究成果編寫了《移動互聯網應用適老化設計要求》團體標準，已經于2021年11月10日發布。希望本次的研究成果能幫助更多資訊類/內容類APP完成文字排版的適老化升級，為中老年人帶去更多的關懷和更好的閱讀體驗，為移動互聯網行業的信息無障礙建設貢獻一份綿薄之力。
文章來源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
課題背景
今年，突如其來的疫情使兒童家庭學習成為重要學習場景，線上教育與家庭早教類產品的需求陡然增加。但線上教育和早教行業已然成為一片紅海，數字化產品和服務的同質化嚴重，各大公司和廠商都希望形成差異化競爭，以在激烈的賽道中爭得一席之地。目前，市面上的早教產品大都聚焦于兒童學習效率提升和內容豐富，卻忽視了兒童對于早教類產品的真實體驗與訴求。
MOMOUX設計團隊致力于創造有溫度的體驗，主張將真實用戶需求帶入產品創新與研發流程，使用系統化的方法重構生活場景并發覺用戶訴求，從而創造貼合用戶的產品及體驗，以解產品創新之困。
在研究中，MOMOUX團隊基于VIP（Vision in design）研究框架，對現有的兒童早教學習情境進行解構與重構。
VIP設計方法框架包含三個關鍵流程：提取因素、構建情境、定義交互。VIP設計方法首先通過深度洞察對現有環境下的產品、用戶、場景與體驗進行系統化因素提取與解構；其次通過提取的因素重構出新的情境，最后在新情境下定義未來產品的交互方式、創造全新產品體驗。通過深度洞察與研究，重新定義了未來兒童早教產品的四個創新情境和交互趨勢，分別是：多孩互動、自然探索、擁抱屏幕、多元關系。
這四個情境反映了未來的兒童早教學習場景中，我們對人與人、人與物、人與環境之間關系的洞見，是我們根據真實用戶情況對未來數字數代早教產品交互方式與情境的大膽暢想。希望此內容能給兒童早教行業帶來一些不同的聲音和啟發，能夠在數字化時代為兒童發聲，回應數字化中兒童學習需求及市場發展的需求。
調研發現，多孩家庭中照顧孩子的任務非常繁重。通常，一部分母親會轉為全職媽媽，爺爺奶奶等長輩分擔部分育兒工作。
學齡前兒童與低幼兒童的互動方式和操作習慣完全不同。要讓兩個孩子同時使用產品進行互動與交流，就需要產品本身的操作特性滿足不同年齡段孩子的行為習慣與互動方式。
其中一個潛在的發展方向是融合AR技術的互動式搭建玩具。該類型的產品既滿足了學齡前兒童需要的產品拓展性、多元化，也能在實體層面滿足低幼兒童在感知運動階段對于實體互動的需求。
OSMO Hotwheel MindRacers
Hotwheel ? MindRacers將現實和虛擬賽車游戲結合在了一起?；旌狭硕嗄B的交互方式，強調游戲過程中的競技性與可玩性。在游戲過程中還加入了現實中的協作影響游戲進程的模塊，通過互動游戲促進不同孩子之間的交流與溝通。
◆ 思考
◆ 討論
◆ 實踐
傳統的教育與學習活動通常發生在學?；蛘呒抑?。隨著城市文化活動設施日趨豐富，“戶外教育”等新型教育觀念的倡導，越來越多的家長傾向于在周末組織出行，這衍生出了豐富的戶外親子學習場景。
MITA - 小糖口袋相機
Zigmo兒童戶外玩具
◆ 思考
◆ 討論
◆ 實踐
Marbotic Deluxe 學習套件
◆ 思考
◆ 溝通
◆ 實踐
在兒童帶屏產品開發過程中，需要優先考慮內容是否能于其屏幕進行有效適配，軟硬件的多模態交互會很大程度影響產品的全局體驗。在這個過程中需要盡可能地減少系統的BUG。在軟硬件協同設計中，再小的問題都容易毀掉產品整體的體驗。快速原型與漁網模型是開發過程中不錯的選擇。
社會結構和家庭結構的變化使得親子關系變得越來越多元。有為了陪伴孩子而辭去現有工作，進入幼教領域給孩子更好教育的家長；也有在異國他鄉出差而將孩子交給保姆、老人撫育的家庭……家庭關系多元化帶來的是家長對自己的身份定位也越來越多元化。在調研過程中我們發現母親在家庭關系中的定位從“施教者”轉向了“引導者”。主要體現在：
? 與孩子溝通中更加尊重孩子的行為自主性，希望通過興趣讓孩子主動做喜歡的事情，以此來培養孩子的學習習慣，而不是一味地向孩子灌輸。
? 母親們也會主動地將部分家務工作分配給孩子，通過平等地共同體驗來讓孩子理解自己（自己是誰，母親還是孩子）。
PUPUPULA 兒童學習打卡機
Kitchen Kids 兒童廚房裝備
◆ 思考
◆ 溝通
◆ 實踐
親子家庭學習場景，在互動方式、場景、交互媒介、親子關系構建方面都涌現出了新的趨勢。產品經理與設計師需要結合真實用戶在場景下的需求進行深入思考，才能設計出更加貼合未來場景與用戶需求的產品與體驗。
文章來源：站酷 作者：MOMOUV墨默體驗
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在數字化的浪潮下，政府希望通過人工智能占據智慧城市的發展先機，推動民生改善及產業增長，這離不開政府和科技公司的緊密合作。因此，科技公司不僅面向To B型企業，同時面向政府或相關事業單位，即是稱之為「To G」這種特殊劃分。
鯤云科技（以下簡稱為鯤云）就是這樣一類科技公司，他們作為一家技術領先的人工智能公司，以數據流技術為核心，提供高性能低延時、高通用性、高算力性價比的下一代人工智能計算平臺和軟硬一體化的平臺解決方案，加速人工智能技術在智慧城市、智慧安監、智慧制造、自動駕駛等領域的落地。
當用戶接觸一個產品或物品的第一步，永遠是外觀視覺。固然，企業官網作為互聯網產品，優質的官網必然是為它的用戶有針對性地服務。雖然訪客首先感受到的是網站的視覺設計，但我們不僅要對網站視覺美觀與否有所重視，更好的訪問體驗、更實用的網站功能、更高的網站辨識度，以及通過視覺實現直觀的價值傳遞表達，都需進行深度探討。
網站呈現給訪客的第一印象尤其重要，而網站首屏則會作為傳遞網站風格及功能的媒介。我們從鯤云的品牌設計理念出發，以直觀的視覺形式來體現科技感。
一個視覺效果好的網站，80%以上是靠優質的圖片支撐。我們首先在官網首頁Banner采用產品渲染圖來呈現鯤云核心產品。首屏的功能性常會被忽視，其實，企業官網附帶著商業屬性，商業環境下的視覺應該更注重強化產品，滿足需求的產品力加持。
為了提升banner的視覺質感，我們對鯤云三款主打產品重新建模渲染，通過主要光源及補光掌握好產品形態，在將產品細節充分展現清晰的前提下，產品暗面加入環境光使整個畫面更豐富飽滿。
與此同時，完成產品渲染后結合了場景化的特殊版面來營造氛圍，使整個畫面更具真實感染力。這樣一來，當訪客來到鯤云官網，一個極具科技感和創造力的鯤云會給訪客留下深刻的第一印象。
圖標是比文字更容易理解的可視化語言，它對于信息傳遞十分高效，可以說圖標將這個世界結合起來。鯤云圖標體系由兩部分構成，分別是UI icon和3D icon。
3D icon可幫助訪客更簡易、高效地理解鯤云兩大核心技術的實際屬性。UI icon擁有清晰、簡潔單色線性的特征，其風格符合鯤云品牌氣質，每個圖標特征和細節保持一致，在視覺上呈現出更好的統一性。
我們提煉鯤云logo造型輪廓特征、以及根據產品和服務方向進行圖形發散，提取鯤云品牌基因，進而使圖標實現差異化設計。
一個可以給人留下記憶點的網站，往往需要靠一個個精致到位的細節設計，做到讓網站最終脫穎而出?？梢哉f，細節是構建起整個設計的基本元素，細節不僅是細節。
科技類產品復雜度較高，只查看技術和產品概念往往會感到枯燥，如何做到直觀呈現鯤云核心技術區別于普通技術，還能提升趣味性？
在首頁接著往下呈現鯤云核心技術的第三屏中，我們應用柱狀圖結合交互微動效的方式，將鯤云CAISA芯片與普通芯片進行利用率、性能及延時三方面的對比。
當訪客點擊查看某一維度對比，可觸發柱狀圖由下至上勻速的位置及漸變色變化，更直觀地向訪客表明鯤云此款芯片可提供更高的算力性價比的優勢，同時引導訪客注意力，加強訪客與其互動鏈接。
在網站中較為常用且能保障性能的微動效有四個變化屬性：大小、位置、旋轉、透明度。這四個屬性任何一種或是幾種有所變化時，就能達到交互微動效的目的，如果再加入其它不必要的屬性，則會影響動效的流暢度。
首頁第四屏的四個核心產品展示中，移動鼠標放置各個產品版塊觸發的微動效，緩動的效果能讓版塊更自然順滑，看起來十分舒服和諧，符合訪客認知及預期。
我們明確了鯤云官網文案語言要保證表述清晰明了、詳略得當，直觀地將產品信息及優勢傳達給訪客，便于訪客理解且能產生記憶點。
關于鯤云
---------------------
核心技術
---------------------
產品中心
---------------------
應用案例
---------------------
合作伙伴
我們見過不少企業官網文案，都喜歡用抽象的詞匯來高度概括產品概念。在我們看來，佐證產品使用真實專業的語言搭配數據內容，可體現出產品專業性的同時，用更真實的力量打動訪客。
我們利用響應式網頁設計構建網頁布局，使頁面能夠更好地適配不同尺寸屏幕，進而使網頁體驗更適應用戶的需求偏好。
官網建設需要遵循“不要讓我思考”的原則，這是產品設計中廣為流傳的一句話。網站作為單向信息傳播工具，我們難以左右訪客的瀏覽行為。
我們需確定官網的層級結構，做好訪客整體體驗的宏觀把控，讓訪客按照我們設想的行為去操作。我們除了必須滿足訪客基本瀏覽需求之外，更要主動展示企業核心競爭力的內容，這是最終實現增長的有效途徑。
我們從用戶分層入手，站在各個訪客角色的角度進行審視，使得鯤云官網各版塊頁面設計上不同的展示區、功能區以及CTA按鈕等充分滿足訪客想看到的信息需求。誠然，各版塊信息內容之間存在價值等級，例如知乎的問答會占據首頁較大的空間。
根據鯤云先有技術再有解決方案的底層邏輯，我們將鯤云「核心技術」板塊放置在導航欄第一位，先有「核心技術」，再有「產品中心」，后有「解決方案」及「應用案例」。
路徑1：「核心技術」頁面關聯「系列產品」
路徑2：「產品中心」頁面關聯「應用場景」
路徑3：「解決方案」頁面關聯「應用案例」
通過設計官網層級結構，結合對訪客心智特點的思考和利用，讓訪客更多行為能夠發生在直覺系統的判斷中。當然，降低訪客跳出率、建立起訪客信任都在上述層級結構設計的考慮范圍之內。
對于To B和To G產品，企業更看重的是產品本身能否為企業帶來價值。鯤云的客戶群體角色通常為多層級，他們會從性價比、效率提升、適配企業狀況等多個維度進行篩選和考量，本質既是要優化客戶效率，實現“降本增效”。
基于這一特點，我們在「核心技術」板塊Banner圖設計了下載白皮書的「 CTA 行動號召按鈕」，并確保CTA顏色對比顯眼且目標清晰。
基于鯤云SEM投放需求，我們專門設計了專屬落地頁——「解決方案」版塊，將官網首頁與該廣告轉化頁分開，各司其職。
大家應該多少有聽說過，我們可以通過FABE法則和AIDA模型等經典方法搭建出一個優質的網頁框架。
一個落地頁應該凸顯對訪客有利的信息，當訪客來到廣告轉化頁時，如何快速獲得想要的信息，并為他們建立起對鯤云產品的價值認同進而實現轉化，這時就需重點打造信息分層。
整個頁面采用相對清晰簡約的視覺設計，圍繞「解決方案」這一核心有層次地規劃整個布局及各信息點優先級。頁面Banner作為門面，也是整個頁面氛圍的關鍵所在，我們將重點信息突出，文案傳達簡潔有力，圖片素材的選取兼顧了鯤云品牌形象，整個頁面的營銷屬性做到盡量弱化。
訪客瀏覽頁面時，不一定會經歷完整轉化過程才會轉化，我們設計了及時的行為號召入口，幫助訪客在某一節點做出行動時，實現快速轉化：
......
鯤云面向的客戶群不僅是面向To B，同時面向從To B衍生出To G這一種特殊劃分?；谶@一行業特點，我們在整站設計中有更多精致度和可視化的思考，它不需要五花八門的Banner、會員體系以及炫酷的交互動效。
我們只需要讓訪客“慣性”操作，制定更符合人性的策略來指導設計，讓訪客按照我們設想的行為去操作，這是最終實現增長的有效途徑。當然，提高轉化率是我們引導設計的主要目的之外，降低訪客的跳出率、建立起訪客信任都在我們網站引導路徑設計的考慮范圍之內。
增長超人為客戶做的從來都不僅僅是一個網站，而是為企業提供從營銷策劃到落地的一整套互聯網解決方案。網站只是一個載體，我們真正的價值在于能夠幫助企業找到正確的競爭優勢，扭轉高成本低轉化的現狀，實現營收增長。
文章來源：站酷 作者：增長超人
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
這一篇，我們來探討下交互設計的善意。
善良常常被用來形容人，偶爾被用來形容產品，很少被用來形容交互設計。
就像人們會說，iPhone 有人文關懷，而很少會說，iPhone 的交互設計有人文關懷。在筆者看來，原因之一，是交互設計很難將人文關懷囊括完，而產品本身則基本可以。
類似的道理，本文探討的善意，始于交互設計，但不局限于交互設計，還包括產品和企業的善意。
一家之言，歡迎交流探討。
01 為什么選擇善意？
一個 3 歲小孩流落街頭，無家可歸，會讓無數人起惻隱之心。我們普通人的微小善意，有時可能是一種本能反應，或者說是一種感性反應。
“他內心是有時邪惡，還是對人們始終良善”，這是李宇春《年輕氣盛》里的一句歌詞。
惡是否為本能，筆者不知道?？茖W家的解釋是，有些基因中會帶有惡?？梢钥隙ǖ氖牵茞航詾槿诵?，共存于人類當中。
感性和理性是會此消彼長的，林黛玉和薛寶釵就是兩個極致的例子。同理，人類體內的善惡，也會此消彼長。
一款產品，在做決策時，很大程度上是基于理性。
這種理性決策，很多時候是無意為善，也無意為惡。但遺憾的是，那個非善非惡的中間地帶不會一直存在，有些無意為善和無意為惡，最終會成為非善即惡，比如開屏頁是否放廣告這件小事（下文有詳述）。
既然善惡會此消彼長，而且產品的有些理性決策會導致非善即惡，那么不可避免的，有時候，善惡會變成一道二選一的選擇題。
接下來，我們就從理性的角度探討下，為什么選擇善意。
1 長期主義
最近幾年，互聯網從業者有個共識：創業是件九死一生的事兒。因為據數據統計，90% 的創業公司活不過三年。
這是一個值得深思的社會現象，背后的原因究竟是什么？直接原因，往往是資金斷裂。深層原因，會有很多，比如產品不夠好、方向不夠準，等等。
那么，核心原因呢？筆者認為，和創始人的執念有關。
有兩類執念可以避免此類悲劇。第一類是做出優秀產品；第二類是長期主義。
做出優秀產品這塊，有很多例子，最典型之一是特斯拉。特斯拉曾面臨多次危機（資金、產能等），但都挺過來了，這肯定和產品深受車主喜愛有關。
筆者也見過兩個普通創業公司的例子。他們都有一顆做出好產品的心，都很重視 UI、交互、用戶體驗這些基礎的東西，而且把 UI 做的比較優秀，交互和用戶體驗做的還不錯。其中一家靠著用戶的付費在平穩發展，另一家連產品帶團隊被大廠收購了。
長期主義這塊，典型例子之一是巴菲特。巴菲特信仰并踐行價值投資，價值投資依賴長期主義。最近幾年，長期主義在國內也被越來越多的提及。
個人的理解，長期主義至少包含兩個要點，分別是：積累、多贏。因為，沒有積累就不會有成就，沒有多贏成就就不會長久。
中國女排，世界冠軍。排球界有個說法，叫三年成型，五年成才，八年成器?；ヂ摼W行業，也大致如此。這是積累。
用戶，員工，投資人，三方利益都兼顧好，才是多贏。
俗話說，顧客是上帝，大家都知道對用戶好；投資人作為強勢一方，利益也往往有保障；員工的利益是否有保障，往往取決于創始人，所以存在很大變數。
回到主題，長期主義和善意，有什么關系？
通常而言，多贏能否實現，關鍵在于員工的利益能否得到保障。
筆者在網上看過一個有意思的評論，說當下的年輕人，如果收入、成就感、高興這三點有兩點達不到，就會辭職。
所以，員工利益得到保障的標準，可以簡單定義為“三中二“，即收入、成就感和愉悅這三點滿足兩點。
再來分析一下現狀：相比員工，公司是強勢一方；人們仍受最大程度剝削剩余價值、官僚思想等觀念影響；惡性加班等風氣存在；僧多粥少的就業行情。
在這樣的大環境下，如果公司對員工沒有愛和善意，員工的利益是很難得到保障的。
最后，總結一下：公司有善意，員工利益就有保障，就能實現多贏，從而有望實現長期主義。
2 美好生活
前段時間，因為給武漢捐款 5000 萬、并且疫情期間蔬菜按成本價銷售，一些網友被胖東來這個商超刷屏了。
胖東來來自河南許昌，一個三四線城市，也是筆者的家鄉。目前僅在許昌和新鄉有店。
在一些關于胖東來文章的評論區，很多網友在喊胖東來去自己的城市開店。
為什么有這么多呼聲？簡單分享幾個例子。
顧客方面，胖東來有 6 類購物車，包含嬰兒手推車、兒童購物車和老年人購物車。老年人購物車自帶凳子，可供休息，同時還配有放大鏡。
員工方面，有高薪、高福利和利潤分紅等。胖東來比較為業界稱道的高福利有：每周二閉店，春節閉店 5 天，工齡滿 1 年即有 30 天帶薪年假，一天最多工作 7 個小時。
從網上的報道、評論以及公布于網上的企業文化來看，胖東來一方面主張工作和生活（愛情、家庭、休假等）的平衡，一方面在踐行和傳播幸福、快樂、尊重等很多積極的文化價值觀。
看新聞的時候，筆者注意到，老板于東來經常會提到“美好”這個詞兒。實際上，在筆者看來，胖東來本身就代表了一種美好生活，一種物質和精神雙豐盛的美好生活。
對于這樣的美好生活，用戶和員工自然喜歡?？蛇@對企業有什么好處？
胖東來曾經意欲退出新鄉市場，新鄉合作商家和市民紛紛請愿，政府也多次出面挽留，最終胖東來留下來了?？梢?，胖東來在新鄉已經深入人心，顧客自然會大力支持它的發展。
胖東來有一句 slogon，能夠很好的解釋這一切，那就是：愛在胖東來。
同樣，既提供體面的收入，又關注員工和用戶的精神需求，給他們帶去美好生活，當然需要更大更多的善意。
在當下中國，能提供高薪的互聯網公司已經很多了，但是能在精神層面讓員工感覺良好、感覺愉悅、感覺幸福和快樂的公司卻為數不多。
對于所有企業而言，這又何嘗不是一種機會？
02 交互設計里，有哪些善意？
現實中，像胖東來給顧客和員工提供的這種美好生活不常有。但是退一步講，還是有很多產品對用戶展現了很多微小善意，值得我們學習。
這種微小善意主要有三類，分別是：不打擾，護尊嚴，人為先。
1 不打擾
我們生活在一個信息爆炸的時代，不被手機上的信息過度打擾，是一個剛需。有三類信息，如果把握不好度，就會對用戶形成打擾。它們分別是：廣告、推送、推薦。
廣告這塊，主要有兩類會形成打擾，分別是：時機不佳的廣告，過長的廣告。
這方面，微信是個榜樣，值得學習。比如開屏頁廣告，就是時機不佳的廣告，因為大家不想在這里看到廣告，微信就沒有放。朋友圈里也有較長的視頻廣告，微信的常見做法有兩類，要么先展示一張圖片，要么先是無聲播放。是否看完整的視頻廣告，選擇權在用戶手里。
推送這塊，常見的有手機系統的通知和 App 內的紅點消息。
系統通知，目前也有被濫用的趨勢。根據使用情況和感受，個人的建議是這類推送控制在 1-2 類。第 1 類是關于核心功能，比如微信推送新消息，搜狐新聞推送新聞；第 2 類可保留一定的彈性，核心原則是對用戶有價值，比如偶爾的活動通知。
目前有兩種情況會對用戶形成打擾和困擾，第一種是過于頻繁的活動通知；第二種是推送和核心功能相差甚遠的信息，比如金融類產品推送新聞。
紅點消息，有一類會對用戶形成打擾，那就是來自官方的過于頻繁的各類活動、促銷等信息。
推薦這塊，主要指 App 內的 Banner 和專題。目前對用戶形成打擾的主要是一級頻道的一些專題。
一種是過多，比如網易云音樂的首頁，就有 9 個專題；一種是位置不佳，比如 Keep 的“探索”頻道就包含了課程的推薦，但是在“運動”頻道還有兩個專題來推薦課程。
2 護尊嚴
護尊嚴，就是盡最大可能，維護用戶的形象和尊嚴。
最近幾年，常有產品花巨資撒紅包給用戶搶。產品的初衷自然是好的，而且看起來也是一件皆大歡喜的事情。但是這件事很難提升產品的美譽度，也就無法增加用戶對它的喜愛和忠誠程度。
為什么會這樣？
讓用戶搶自己撒的紅包，這件事能維護用戶的形象和尊嚴嗎？非但不能，可能還會對此造成傷害。因為可能會顯得用戶愛占小便宜，也可能會使用戶處于被施舍的一方?？傊@種事對用戶來說，并不酷。
一款產品，要想贏得用戶更多的喜歡、尊敬乃至忠誠，就最好不做哪怕僅是微弱傷害用戶形象和尊嚴的事情，同時多做一些相反的事情。
3 人為先
人為先，是當用戶利益和企業利益發生尖銳矛盾時，去追求一種用戶利益在先的雙贏局面。
大家都知道，吸煙是有害健康的，但是煙草公司又是要賺錢的。泰國香煙那種既觸目驚心又惡心嚇人的包裝，就盡他們最大的可能詮釋了“吸煙有害健康”，是真正的用戶為本，讓人心生敬意。
泰國香煙的這種做法，值得一些極易讓人上癮的游戲廠商借鑒和學習。
03 交互設計：如何做到善意？
上一大段，是善意的三類表現。這一大段，再探討下做到善意的一個原則。
以社區型內容型產品為例，這個原則就是：先服務后管理。
這里的服務，是指以服務者的心態做好用戶體驗，并不局限于交互設計。這里的管理，指的是一些必要的管理，一般是用戶的行為規范和用戶違規時的處理，比如評論里罵臟話、發布侵權文章等。
所有用戶都是需要被服務的，只有少數行為不當的用戶才是需要被管理的，所以我們要先服務后管理，以免誤傷了不需要被管理的用戶。
服務本身就是一種善意，筆者把它分成了兩個階段，分別是：體驗的初始階段，體驗的完整過程。
初始階段對應的是：初始服務；完整過程對應兩類服務，分別是：家常服務，極致服務。
1 初始服務
初始服務，是當用戶剛開始用這款產品時，能給他們留下良好印象的服務。
如何做到？不出現任何輕微惡意和管理傾向即可，再提供一些便利和幫助則更好。
下面分享一個反面例子。
在個別城鎮的衛生死角，有時會看到這樣的標語，“此處禁止倒垃圾！違者罰款 200！“。結果那個地方往往有很多垃圾。
為什么會這樣？
這個標語，有兩層意思：第一，你很可能會在這里倒垃圾；第二，禁止你這么做，做了要罰錢。
也就是說，某種程度上，這個標語在用惡意揣度別人，同時也在很嚴的管理別人。
看到這個標語的人很可能會這樣想：既然認為我會在這倒垃圾，那我索性就倒了；禁止我？憑什么？還罰我錢，嚇唬誰呢，況且你有證據嗎？
下面再分享一個很好的正面例子。
筆者有一個宜家的退貨經歷。把一個已經拆過的桌子打包送到了宜家，宜家沒有檢查里面的零配件（很多螺絲之類的），直接退了。這樣寬松的退貨條件，宜家可能會蒙受一定損失，比如小概率的零件丟失，但宜家還是把這種服務提供給了顧客。筆者當時的感受是宜家挺信任我們的，對宜家就多了幾分好感。
2 家常服務
家常服務，是指一種稀松平常，但又讓用戶感到舒服自在的服務。
舉個例子，你去好朋友家里玩，朋友給你倒了一杯水，并端出一盤削好切好的蘋果，你們一邊吃一邊聊。你和朋友是平等的關系，他這種簡單的招待并不會使你感動，但卻使你有一種接近在自己家的那種舒服自在。
筆者在用微信公眾號（后臺）時會有這種感受。在星巴克和肯德基時也會有類似感受。
家常服務，如何實現？第一，要有良好的初始服務，這是基礎；第二，要有周到且較高品質的交互設計，這是關鍵。
以微信公眾號為例，和微信一樣，它的交互設計也做到了周到和較高品質。下面看看微信公眾號的初始服務。
面向大眾的資訊平臺大多都有一個發文規范，多是關于禁止的行為，通常都會用一個單獨網頁來展示，有 1-2 頁紙那么多。
通常情況下，多數作者是不會違反發文規范的。對于這部分作者，當他們首次看到 1-2 頁密密麻麻的發文規范時，可能會產生抵觸心理，即便自己不會違規。就好像高中開學第一天，班主任二話沒說，直接就立了 20 條班規，同學們會是什么心情。
微信公眾號的做法就很巧妙，它把這些規范分割成了三部分。
第一部分是嚴禁的紅線行為，以高度概括的一行文字呈現，所有人都能看到，但是得仔細留意才能注意到。這是規范性質。
第二部分和競品一樣，也是鏈接出來的一個單獨網頁。鏈接入口也和競品一樣，在關聯性最強的發文頁面右上角。不同的是，這一頁展示的是規則，主要以問答的形式呈現，給人感覺是有幫助的信息。這是服務性質。
而競品的這個頁面，通常都是禁三禁四的規范，給人的感覺可能是緊張、壓抑甚至抵觸。
第三部分是次于紅線的禁止行為，比如侵權、低俗內容等。這部分內容的管理辦法被以公告的形式分散在公告列表里。而且公告列表里內容多樣，還有很多一般的通知，所以這個公告列表也不會像競品的那一頁規范一樣，給人緊張、壓抑的感覺。性質上是中性。
另外，這部分的入口在后臺首頁右上角，和發文模塊是分開的。所以不會違法規范的作者一般不會去公告列表里翻這些內容，也就看不到。
微信公眾號就是這么巧妙的讓多數作者看不到“班主任”的“20 條班規”，同時還讓他們看到了“班主任”的“常見問題回答”。
這就是微信公眾號在發文規范方面的初始服務。另外還有一個加分的細節，就是檢測疑似錯別字的功能，很貼心，雖然目前還不是很準。
3 極致服務
極致服務，是指讓用戶感動的服務，比如海底撈和胖東來的服務。
這種服務，一般是由許多細節積累而來，是一種做加法的服務，而且背后往往依賴人力。
好的交互設計，一般都是在做減法，而且純粹是界面、機器在和用戶打交道。所以極致服務難以復制到交互設計上。
不過，一款互聯網產品，除了交互設計，還有其它方面的內容。
B 站就是一個例子，它以不走尋常路的方式，在兩個方面做到了較為極致的服務。那就是：視頻無廣告，比較積極、歡樂的彈幕氛圍。
結語
以用戶利益為先，不打擾用戶，維護用戶的尊嚴，這是交互設計里的三種善意，值得我們學習。
先服務后管理。服務作為一種善意，也能夠引來用戶的善意，最終形成良性循環。
杜絕任何輕微惡意和管理傾向，再提供一些便利和幫助，便能做到良好的初始服務；
在初始服務的基礎上，提供周到、高品質的交互設計，就能做到良好的家常服務；
交互設計難以做到極致服務，但是其它方面有機會。
最后，用劉備的一句話來結束本文。
勿以善小而不為。
文章來源：站酷 作者：SnowDesign
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計的小編 http://www.syprn.cn