如何讓自己的產品在保證基本的可用性和易用性的同時，還能讓界面看起來柔和、更富有親和力？一個產品能留住用戶的雖然是內容本身的質量與吸引力，但一個小小的細節卻能夠阻止用戶的流失，成為內容轉化的最后一道防線，讓人眼前一亮，值得借鑒。
076.「百度地圖」出行前的“極端”天氣預報
077.「搜狗輸入法」“跨界”復制/粘貼
078.「支付寶」螞蟻森林/莊園-模擬現實世界的自然規律
079.「躺平」趣味化的“擊掌”點贊
080.「QQ音樂」導入外部歌單-不同的設備/賬號歌單無縫對接
081.「微信」簡便且高效的圖片翻譯功能
082.「橙」不一樣的的登錄方式
083.「高德地圖」桌面一鍵導航-出行更高效
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
085.「餓了么」合適的時間、合適的提醒
086.「搜狗輸入法」教你少打字、多開掛
087.「美團」垃圾分類-解決餐后垃圾分類之憂
088.「優酷」個性化彈幕設置-看劇調侃兩不誤
089.「隨便走」AR導航-“傻瓜”式操作，老少皆宜
090.「微信讀書」模擬現實的行為動作
076.「百度地圖」出行前的“極端”天氣預報
產品體驗：
使用百度地圖，導航路線規劃后，會出現當日的天氣提醒，點擊進入即可查看每個時段的天氣預報。
設計思考：
“賭博看運氣，出行看天氣”，任何時候，大家如果優先知道天氣情況就可以提前做好準備，這對人們的生活方便起到很大的作用。尤其是出行，天氣的變化是影響我們是否攜帶雨傘、交通工具選擇、保暖問題的重要因素，所以提前預知天氣的重要性可想而知。
使用百度地圖APP，導航路線規劃后，出行方式的下方會提示最近可能影響到出行問題的天氣變化，便于用戶選擇更合理的出行方式及交通工具，避免受到惡劣天氣變化的影響。還可以通過點擊進入，查看每個小時的天氣詳情，對于時間不是很敏感的用戶來說，為了錯開惡劣的天氣，提前或延遲出行也是一種不錯的選擇。
077.「搜狗輸入法」“跨界”復制/粘貼
產品體驗：
電腦和移動端都使用搜狗輸入法，且在同一個賬號登錄的情況下，電腦端出現文字復制的操作后，可在移動端設備任何位置的輸入框內直接粘貼，非常便捷。
設計思考：
輸入法給大部分用戶的第一感覺就是用來輸入文字的，哪個好用用哪個，一旦習慣了使用某個輸入法，基本就成了忠實用戶，不會隨意去改變。不過有時候輸入法只是輔助作用，并不需要直接使用，比如：我們在電腦網頁看到自己喜歡的文案語錄時，想發個朋友圈，就需要先復制，再用電腦端微信發到手機微信，最后從手機微信復制再到朋友圈粘貼，雖然很麻煩，用戶還是可以接受的，不然通過自己碼字就會浪費大量的時間。
搜狗輸入法的黑科技一直都很多，比如圖片英文翻譯、智能助手、文字掃描提取等，都是非常實用的功能。最近發現了一個新的設計細節，讓人驚呼。當電腦和手機端都使用搜狗輸入法且登錄同一個賬號時，在電腦端復制文字后，打開手機端任何輸入窗口，即可看到在電腦上復制的文字，直接粘貼即可，由被動輔助變為主動攝取，再也不用通過聊天工具發送到手機端進行二次復制的繁瑣操作了，實現“跨界”復制/粘貼，非常方便?？梢钥闯鰣F隊站在用戶體驗的角度上，對于輸入法使用場景的串聯考慮是非常貼心的，不僅能再次俘獲一大批新用戶的芳心，也能提升老用戶的使用忠誠度。
078.「支付寶」螞蟻森林/莊園-模擬現實世界的自然規律
產品體驗：
在支付寶螞蟻森林/莊園里，白天和夜晚分別使用了不同的場景，模擬現實世界中的自然規律，白天晴空萬里、且有陽光照射，夜晚滿天繁星、且有流星劃過，頗具真實感。
設計思考：
幾年前QQ牧場養殖、農場偷菜，如今演變卻變成了支付寶的螞蟻莊園養小雞、森林偷能量，將以前的純游戲思維轉變成了如今的游戲+公益的形式，不僅滿足了用戶小游戲的需求，還能促進公益事業的發展，同時用戶也會得到心理上的滿足和成就感。螞蟻森林/莊園小游戲對用戶產生的粘性除了其模式的新穎，也離不開產品團隊日夜刻苦鉆研所提升的用戶體驗。
螞蟻森林/莊園的視覺場景跟隨著白天、夜晚的環境變化，產品遵循現實世界慣例來呈現信息，更具真實感，便于用戶在使用中將現實中的體驗不經意間帶入到游戲場景，可使其更加投入，通過用戶的現有認知，以促成情感化的體驗，使產品更具親和力。
079.「躺平」趣味化的“擊掌”點贊
產品體驗：
在躺平APP對其他用戶的發表的動態推薦時，使用了擊掌圖標，且有光彩線條圍繞著掌心向四周擴散的動效樣式，趣味性十足。
設計思考：
推薦是對其事件/事務認可的一種表達行為，最早可追溯到上古時代的堯舜禹時期，那時候如果對某件事或人，高度認可時就使用鼓掌（慢速且有節奏）的方式來表達；到后面慢慢演變成了簡單的一個字“彩”；再到如今皆可用鼓掌、豎大拇指或直接言語...表達?；诨ヂ摼W的發達，為了讓更多人發現其內容資源的優質性，80%以上直接沿用了豎大拇指樣式來表達對內容的認可及贊許，即使有區別于其他產品，也是在局部或動效樣式上做出一點改變。
躺平APP的點贊樣式較為新穎，使用了擊掌的圖標，并且使用了光彩線條圍繞掌心向四周擴散的動效樣式，相比豎起大拇指則更加強烈，意味著喝彩，表達了對內容的高度認可，相較于同質化嚴重的情況下作出了創新， 在過渡的時間差中，進行了趣味化的表達，更具視覺沖擊力。
（“擊掌”的點贊方式適合用于類似躺平、動漫、B站等二次元或個性化的產品中，如果用于工具、新聞、電商等類型產品，可能會對用戶產生干擾，慎用）
080.「QQ音樂」導入外部歌單-不同的設備/賬號歌單無縫對接
產品體驗：
在QQ音樂我的頁面，使用“導入外部歌單”功能，根據提示，即可把其他音樂應用里歌曲添加到QQ音樂歌單。
設計思考：
現在聽歌早已不像以前，一張內存卡或一根數據線就可以把手機里的歌曲轉移它處?；谌藗兩钏降奶岣?，數據流量套餐相比以前更是翻了百倍不止，WiFi基本人手普及，所以大家更傾向于在線聽歌，無需下載（除非深山老林或地洞沒有信號）占用手機內存，創建一個歌單，把自己喜歡的收藏起來，即時聽歌，非常方便，如果沒有特別的情況，成為了一款音樂應用的忠實用戶后，基本不會頻繁轉移。
QQ音樂的導入外部歌單功能，可將其他音樂APP的歌單添加到QQ音樂自己的歌單里。對于導入外部歌曲，很多用戶沒有什么概念，感覺自己用不上，別忘了蝦米音樂“尸骨未寒”，很多事情不是沒有可能發生，當一旦需要時，這個功能就是“救命稻草”，可以想象，如果通過手動把以前的幾百首歌曲一首一首的添加到歌單，不知道會不會“抽筋”。除此之外，還可以將歌單在朋友之間相互分享添加，這也是一種不錯的音樂交友方式，實現不同設備、賬號的音樂歌單無縫對接。
081.「微信」簡便且高效的圖片翻譯功能
產品體驗：
在微信的聊天對話框中打開英文圖片，點擊下方的翻譯功能按鈕，即可翻譯圖片上的外文，并以中文顯示。
設計思考：
在我們的生活中，有時候多多少會遇到一些英文，比如進口食品包裝、藥物說明、護膚品等，其中就有一部分是純英文說明，無論自己多么博學多才，但不見得都能理解英文。記得之前有一次，我自己的電腦藍屏，出現的全是英文，雖然自己也是一直提倡用互聯網解決問題，且也有一些拍譯軟件，但一想著需要下載注冊，沒準兒還要先看廣告或收費，且天生對英文有一種與生俱來陌生感，還未開始便放棄了，于是成了伸手黨，去請求別人幫助。
微信的圖片翻譯功能就是專為解決這一問題而生。通過在對話框中點擊圖片直接翻譯，看到一道綠色的光由上而下掃過之后，圖片中的英文就變成了中文，著實方便，比起以前通過第三方或先提取圖片中的文字來翻譯，操作簡單且效率還提升了很多，可以說是一個非常實用的小功能。
082.「橙」不一樣的的登錄方式
產品體驗：
在橙APP的登錄頁面，區別了常見的登錄界面樣式，使用對話聊天的方式按流程提示用戶完成登錄，界面流程方式新穎，濃厚的社交行業屬性。
設計思考：
在任何應用中，要想有自己的“私密”領地，都繞不開登錄/注冊的流程，但凡手持智能手機又想玩的開的用戶，對登錄的流程是非常熟悉的，比如手機號+驗證碼、一鍵登錄、第三方登錄，無外乎這幾種常規的登錄方式，如果想來點“刺激”的，無非就是加個logo、貼個插圖、來點動效等，見怪不怪了。
橙APP的登錄方式雖然同樣是手機號+驗證碼登錄，但在流程樣式上卻非常新穎。鑒于應用本身屬于社交行業，通過對話詢問的方式讓用戶按照流程輸入了手機號和驗證碼，給用戶造成這不是對使用該APP設置門檻的錯覺，降低用戶的防備心理（很多產品用戶量的增長都被擋在了登錄之門外），讓用戶不知不覺在聊天過程中完成了登錄流程操作，其方式非常友好且登錄的過程是愉快的，同時還兼帶了濃濃的社交行業屬性，通過更直觀的登錄場景感受，拉近用戶跟產品之間的距離，使用戶的印象更加深刻。
083.「高德地圖」桌面一鍵導航-出行更高效
產品體驗：
通過高德地圖的收藏夾，點擊收藏地址右側的功能菜單，在彈窗中將該地址“添加快捷導航到桌面”，后續就不用每次輸入常用的目的地了，直接通過桌面的圖標入口即可一鍵導航。
設計思考：
對于在外的工作人員，導航算是手機必備的軟件，以前只是純粹的導航認路，而隨著汽車量的增長，各地交通逐漸開始變得緊張，那么不管我們是否知道路線，駕駛之前都會習慣性打開地圖導航，隨時觀察路線擁堵情況來思考是否有更換更優路線的需求，于是就按照慣例打開導航、錄入目的地、選擇路線......等一系列的常規操作，日復一日，似乎沒有覺得什么不妥。
高德地圖的桌面一鍵導航功能，為長期有駕駛需求的用戶提供了更為便捷的操作，將經常使用的目的地添加的收藏夾，再添加到桌面以生成目的地導航便捷入口，有需要時桌面點擊即可，系統將自動規劃最優路線，通過最便捷的方式一鍵導航，再也不用日復一日的重復之前的操作了。站在設計師的角度，在解決用戶需求時，操作越復雜、步驟越多，用戶的選擇條件、視覺負擔及時間成本就越多，出錯的情況也越多，故而用戶流失的可能性就越大。高德地圖通過一鍵導航簡化操作流程，通過合理的操作路徑，降低用戶時間成本，有效提升了使用頻率及粘性。
084.「愛奇藝閱讀」性別選擇-更明確的指引和提示
產品體驗：
首次進入愛奇藝閱讀APP，在性別選擇頁面中，男生和女生的頭像通過動畫的形式反復左右替換，用強視覺提醒的方式推動用戶進行選擇操作，以便于提供更匹配的內容資源。
設計思考：
大部分新聞或閱讀類型的APP，在用戶首次進入應用時，都有類似性別、行業、愛好之類的選擇，其主要目的是確定用戶的屬性，并提供更加匹配該屬性的內容資源來提升用戶的滿意度。其流程也是千篇一律，以建議性的提醒用戶去做選擇，如無需要直接跳過即可。
愛奇藝閱讀首次即進入APP時，以動態的性別頭像插圖反復左右切換的動效方式來提示有用戶選擇性別，相比常見的靜態按鈕直接顯示在那里會更加友好，不會過于生硬、冷冰冰，其動畫視覺樣式給予明確的指引和提示，更能引起用戶的注意，通過強烈的視覺提醒促使用戶更高效的完成當前任務。
類似這種選擇且非強制性的前置頁面，很多設計師只是按部就班當做一個流程，其實要想做好并非僅僅如此，可以通過趣味化、情感化、動效等方式增強用戶去選擇的欲望，以提高操作幾率，用戶一旦選擇，進入應用之后所看的內容定然更符合自身的需求，也能提高用戶的滿意度，其滿意度的高低能決定用戶的去留及轉化，所以應用中，用戶的前置選擇對產品的重要性可想而知。
085.「餓了么」合適的時間、合適的提醒
產品體驗：
如果在餓了么有正在進行中的訂單，再次進入應用時，右下角會提供一個查看的快捷入口，點擊可快速進入該訂單查看進度或騎手配送狀態。
設計思考：
隨著外賣行業的普及，給我們的生活帶來了很大的便利，尤其是一日三餐，我們只需花幾分鐘的時間在外賣平臺上下單，其他的事情交給商家和外賣小哥，很大程度上縮短了我們去店途中和店里的等待時間，特別是對上班族來說，真的是太便利了。不過外賣平臺不像京東淘寶-人們可以無憂無慮的逛上幾個小時，通常都是目標明確的用戶，在短時間內完成自己的需求，要么下單、要么查看配送進度。
如果在餓了么有訂單存在，再次進入首頁，右下角會提示配送信息，點擊直接進入查看詳情。從表面上看，右下角的入口雖然提供了快捷通道，但似乎不太友好，總是會遮擋部分內容。其實并非如此，是因產品根據用戶的使用場景進行行為預判而設計的快捷入口，在正常情況下，從下單到完結一般在30分鐘左右，如果用戶存在未完結訂單且在短時間內再次進入平臺，80%以上的用戶此時需求為查詢配送進度，因此，右下角的進度提示正是在合適的時間給予用戶合適的提醒，根據用戶的場景需求提供了最為便捷的解決方案，由此可見、利大于弊。
086.「搜狗輸入法」教你少打字、多開掛
產品體驗：
進入搜狗輸入法的設置中，可開啟開掛模式，里面的三連發、回聲、重要的事情說三遍分別對應不同的效果。
設計思考：
搜狗輸入法在業界雖不敢說是最牛，但一定是數一數二的存在，發展至今，不僅僅是在滿足用戶的基本需求，還提供了讓用戶感到驚喜的功能，而現在更是研發了很多“黑科技”。
從搜狗輸入法左側的logo中進入工具選項，在設置中即可選擇開掛模式（真實效果見上圖）。正如字面的意思，搜狗輸入法通過智能幫助用戶自動完成一些列的復制粘貼工作，瞬間讓打字刷屏的手速快到逆天，且操作簡單、輕松完成，方便用戶在開懟、賣萌、刷屏過程中直接碾壓對方的打字速度。開掛功能可謂是實用性與趣味性兼備，讓我們在日常中，面對不同的社交需求時帶來貼心的改變。
（凡事有一個度，刷屏如果沒有用對場景，可能會遭到對方的反感，事在人為。就像之前的“拍一拍”功能面世，卻有人在上班時間拿去拍領導、拍老板，后果就不說了，刀可切菜亦可傷人）
087.「美團」垃圾分類-解決餐后垃圾分類之憂
產品體驗：
美團我的頁面，推薦工具的“垃圾分類”功能，能幫助我們進行識別因外賣產出的垃圾類型，便于跟線下對應的垃圾桶“對號入座”，減少不必要的垃圾混合而增加清潔工人的工作量。
設計思考：
外賣平臺的興起，給我們的生活帶來了很大的便利，同時也產生了一些危害，首當其沖就是環境的污染。比如包裝盒、包裝袋、餐具等大量生活垃圾的產出，確實在外賣行業普及后，亂扔垃圾的情況跟隨著瘋速增長，雖然這些屬于個人情況，但也有部分用戶因不知垃圾如何分類，而將所有垃圾聚集在一起，然后就成清潔工的事情，最終無端增加垃圾分類的工作難度。
美團的“垃圾分類”功能對衛生環保方面增添了一份力量，當用戶不知道自己產出的生活垃圾是何種類型時，可通過查看常見垃圾類型提示或搜索來確定類型，方便用戶按類型將垃圾丟入對應的垃圾桶，解決餐后垃圾分類之憂，幫助養成良好的垃圾分類習慣，助力垃圾分類落地。還能消除用戶對“外賣垃圾分類麻煩”的顧慮，利用線上垃圾類型的普及，為綠色發展及環境保護貢獻自己的一份力量。
088.「優酷」個性化彈幕設置-看劇互動兩不誤
產品體驗：
在優酷APP開著彈幕看片時，可通過彈幕設置調整字體的不透明度、行數、大小及速度來設定最適合自己樣式。
設計思考：
彈幕，用戶非常熟悉的一個詞，很多時候在看影片時，彈幕里面的內容遠遠要比影片帶來的樂趣多很多，除了能從中獲得群眾的陪伴增加愉悅感外，還可以帶動視頻的觀看氛圍，讓活躍的用戶有了表達自我的動力和熱情。但對于“鍵盤俠”來說，僅僅在上方顯示的幾行彈幕根本無法滿足自己看影片互動及調侃的需求。
優酷的彈幕設置中，可以根據自己的實際需求對彈幕字體大小、透明度、區域等參數進行設置，針對喜好調侃互動的用戶來說，使用滿屏半透明度字體樣式的彈幕無疑是最好的選擇，互動看片兩不誤。
089.「隨便走」AR導航-“傻瓜”式操作，老少皆宜
產品體驗：
使用隨便走導航，全程利用AR實景，通過3D立體形式的方向引導，幫助我們找到周邊的任何一個地方。
設計思考：
導航是我們出行必備的工具，目前高德和百度在該領域各自獨霸一方，看似很牛叉，但并不是萬能的。比如老人操作起來有一定的難度，經常各種功能找不到還說不好用；又比如我們在陌生的重慶市，可能你從這南面1樓進去，北面就在20樓，毫不夸張，如果通過常規的地圖導航去找人，我建議你最好吃個早餐再出去，等找到人之后就可以吃夜宵了；再比如......不比了。
隨便走APP是一款便捷式輕量導航工具，主打“讓生活樂趣一目了然”。利用“AR全息實景”的展現方式，改變了必須要有地圖的模式，對于我們找周邊的美食、酒店、公交、廁所、景點等需求，進行穿透式3D立體指引，操作簡單，不管前、后、左、右、上、下都有非常明顯的視覺引導，只有你想不到，沒有它找不到，對于長期生活在大城市的用戶，交通復雜、道巷縱橫，很可能我就在你“隔壁”，你卻找不到我“老王”。此外，隨便走APP操作簡單，學習成本基本為零，對家中老人而言，也是一款不錯的導航工具。
090.「微信讀書」模擬現實的行為動作
產品體驗：
在微信讀書的書架頁面，點擊書籍以及書本翻頁，都使模擬了現實生活中較為自然且真實的從書架拿書、及各個角度翻頁的效果。
設計思考：
看書APP雖然眾多，但真正能堅持下去、養成習慣的沒有幾個人能做到，站在平臺的角度思考，畢竟書本的內容是平臺無法修改的，除了提供優質的資源并給予方向指引外，其他便是通過設計體驗來提升用戶的好感度了，
微信讀書APP從書架的拿書動作到書本的翻頁，都模擬了現實生活中用戶看書的行為動作，大家都知道，真正喜歡閱讀的人，是不會在意這些所謂的橫豎及交互效果的，但前面都說了，這種人畢竟在于少數。因為受眾的差別，模擬現實其最主要的作用就是為了吸引眼球，模擬用戶的實際行為，將其代入真實的情境中，使用戶對產品產生深刻的認同感，則看著更加舒心，待用戶提升忠誠且養成看書習慣之后，這些作用就會慢慢變得微不足道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：大漠飛鷹CYSJ 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
大家可以觀察到做交互設計或者用戶研究經常會借鑒心理學/社會學的研究方法去應用成熟的理論模型甚至建立模型、去“玩概念”，但可惜的是咱這一行大多數設計師都沒有這樣的教育背景，就算是所謂的“大廠公眾號出品”，也難免會有思慮不周的時候（對，我說的就是ISUX那篇熵減思維）。
但是從另一方面來講，現在的這個越來越卷的行業形勢，也的確在不斷地要求交互設計師提升自己的思考維度，往更系統化、更結構化的方向去走。雖然我經常說我不是一個喜歡玩概念的人，我也非常不鼓勵不推薦大家一點小破事就上綱上線去整模型做PPT，但客觀來講，學會玩概念是交互設計師的一個高階能力，是思維邏輯的技能化體現。
那么，如何能夠合理地、有理有據地玩概念？什么情況下需要我們去玩概念？本篇文章將解決你的這方面疑惑。
社會學教科書會告訴你：“理論是以一種系統化的方式，將經驗世界中某些被挑選的方面概念化，并組織起來的一組內在相關的命題?！钡蹅儾挥眠@么文縐縐，簡單來講理論就是抽象地、高度概括地解釋一些在生活中的現象。
比如說你是一個貓奴，在和你的貓朝夕相處之后，你覺得養貓好像有助于你的身心健康，于是你提出來一個概念叫“小貓可愛度”，這個“小貓可愛度”受三個因素影響：貓的毛色、貓的眼睛大小、貓的性格，并且假設小貓可愛度越高，對人的心理健康正面影響越大。那也可以說你就創建了一個理論叫“小貓可愛論”。
而什么是“模型”呢？這個問題比較難說明，咱不搞學術研究也沒有必要展開來講。這個詞匯和“理論”有一定的重疊，但一般我們在工作中講“模型”時，往往指的是構成某個概念的因素之間的關系，以及其測量方式。比如我們設計師酷愛搞的體驗度量，也可以算作是一種模型的建設。
圖片來源：https://www.xiaohongshu.com/discovery/item/6285d9360000000021034b22?share_from_user_hidden=true&xhsshare=WeixinSession&appuid=5bcbe6f0f8462700015da647&apptime=1654249488
研究一個問題時我們會用到兩種最基本的思路：歸納和演繹。前者是自下而上的、由具體現象抽象形成理論假設，后者是自上而下的、由抽象理論具像化到個例。
比如我們剛才的“小貓可愛論”，就是基于日常的觀察抽象得出的結論，使用的是歸納的方法。而假如現在已經有一個成熟理論，叫做”地球貓貓論“，它發現貓對于人類社會有方方面面的影響。而基于“地球貓貓論”的已知研究結論，我們著重去關注貓咪外觀造型對人身心的影響，猜測外觀越可愛的貓貓可能對人心理的正面影響越大。那么這就是使用了演繹的方法來推導假設。
當我們應用一個模型或理論時，就是在基于這個抽象的理論做演繹推導。我們期待這個理論能夠對我們的設計問題作出解釋、對設計方案給出指導方向，這是最最重要的。有很多剛入行的設計師容易被一些花里胡哨的文章晃了眼睛，誤以為做設計和寫八股文似的，非要在具體設計之前拽一些大詞、拉出來一些貌似很厲害很科學的高深理論才能體現自己的邏輯性，并不是這樣的。我們使用的理論在多大程度上能解釋當前面對的問題、它對于問題解決是不是不可或缺，這才是衡量設計師思維能力的標準。
另一方面，當我們面對的問題非常聚焦、非常情景化的時候，單純靠演繹推導就沒有辦法支持了。比如B端設計的領域差異都特大，有人設計倉庫貨架動線，有人設計鉆井鉆頭。這些千奇百怪的場景都有各自特性的問題，不是拿出來一個尼爾森的可用性十原則就能盡數解釋的。因此為了提煉出整個業務的運行方式、為了表現出當下設計發力點，或者為了拆解影響體驗的構成要素，就需要進行觀察和歸納，從而構建模型。
構建模型是一個很麻煩的事情，本篇不打算展開，下次一定吧。
咱們做設計對理論的要求其實很低。以下兩點是我覺得重要、最基礎的：
1.貼合設計問題
在我的其他文章里里提過，理論它有理論層次和對應的解釋范圍，只有理論貼合設計問題，才能完美地解答設計問題。不是說名氣越大的理論就越好用，也幾乎不存在從雞毛蒜皮到家國大事都能完美解釋的理論。
比如有些互聯網從業者很喜歡拿“人是貪婪的”說事，只要講個啥和促銷/轉化沾點邊的事情，就必要講“因為人性是貪婪的，所以我們這里要這樣……”，先不提這個“人性貪婪論”它能不能證偽、是不是科學，它首先是在講人類、人的本性這個層面的事情。你怎么就知道這個用戶在用你這個軟件的時候，他貪婪的人性就會占領理智的上風呢？可能他本性是貪婪，但他在使用你這款軟件的時候，更多地受軟件好不好用、折扣看起來真實不真實、像不像詐騙這些因素影響。就算他貪婪，他也不是傻子，不可能看見個金幣/紅包就去點。這就是“理論”和研究問題風馬牛不相及。
那么如何叫理論貼合問題？我今天準備拿一篇google發在USENIX Security 21年的會議文章來介紹，這篇文章叫“噓，安靜！減少在chrome瀏覽器中的非必要信息提示”（“Shhh...be quiet!” Reducing the Unwanted Interruptions of Notification Permission Prompts on Chrome），有興趣的同學可以在Google research上下載到PDF，鏈接：https://research.google/pubs/pub49767/
各位在用Chrome瀏覽器（桌面端或安卓端）的時候，應該都見過這個通知提示。當網站準備給你彈窗的時候，chrome會彈出來一個這樣的非模態小提示窗口（學名叫prompt）詢問你是否愿意被彈窗，假如你無視這個彈窗、沒做出任何表示，那么下次你進入這個頁面時還會再彈。
但這個提示窗口對體驗有沒有影響呢？是不是會很煩人？怎么樣能迭代這個窗口的樣式和生效邏輯，從而減少對用戶的打斷，提升用戶體驗呢？——這篇文章就研究這個。
這個問題顯然是一個芝麻大點的問題，恐怕在座各位做需求的時候遇到這種問題都懶得寫設計分析。也因此，如此微觀的研究問題，就應該搭配微觀的、著眼于用戶具體行為的理論。
這個項目要研究的是三個主題：權限控制、彈窗提醒和打斷、移動端和PC端差異，所以它首先引用了心理學和人機交互交叉領域的期刊上最直接相關的研究成果：之前的研究發現，在PC或移動端場景下當用戶在完成主任務時被打斷會非常焦慮、難受，此時對用戶進行觸達也沒什么效果，而當用戶在任務之間的間隙被打斷時則沒那么難受，觸達有效程度也會提升。
這些研究通過實驗的形式去探討幾個概念之間的關系：打斷、工作流、心理感受或工作表現。非常微觀、簡單，甚至可能無法形成一個我們普遍理解的、帶名字的“理論”。但它們非常貼合這個研究的主題，基于這些研究結論可以合理地推導出這篇文章的后續設計策略：針對不同場景、任務，做差異化的權限觸達體系——這不比拿著馬斯洛需求層次模型往自己的設計上生搬硬套強多了。
2.對設計有指導
咱們做設計不是做純粹研究，最終所有的研究和推理，都要落到對設計行為的指導性上。不要一通分析猛如虎，最后得不出有價值的結論，或者只能得到解釋性的結論，而無法對未來行為做出建議。
在這里我們又要請出ISUX的新文章做例子：
「互動儀式」一詞最早來源于美國社會學家戈爾曼，是指一種表達意義性的程序化活動（大到特殊節日舉行的大型慶典，小到定期的家庭聚會、公司團建等活動）。這類活動對個體在群體中的參與感及群體生活的團結性來說具有重要意義?！富觾x式」理論給出了一個分析社會活動的理論模型，幫助我們具體觀察群體活動的現象，觀察群體從聚集到產生情感符號的整體過程。那么如何將「互動儀式鏈」理論轉化為具體可執行的設計方法？
——ISUX設計，公眾號：騰訊ISUX 互動儀式鏈 | 直播情感化互動體驗設計
這篇文章用一個傳播學的經典理論“互動儀式鏈”來解釋騰訊的直播場景的產品服務鏈條。文章本身是很規范的，使用“互動儀式鏈”來解釋直播也很符合這個理論的解釋范圍。
但是，“互動儀式鏈”更偏向于解釋一個現象的成因。也就是說假如我們是一個傳播學的學者，你老板讓你去解釋為什么直播間那么火爆、里面的觀眾那么多那么活躍、他們為啥要組成家族要打榜，你用“互動儀式鏈”來解釋，這很合理。但現在我們是設計師，我們要解答的問題不僅是直播間作為社會現象為什么會火，而是騰訊直播之后直播要往哪里發展？我們要做哪些具體的設計動作來增強這個群體之間的共鳴？從這個圖里面是看不出來的，太抽象了。
當然本文是很希望讀者相信騰訊直播的產品搭建是基于理論有理有據地去構建的，比如下面這個圖就是“「互動儀式鏈」理論中引申出的設計方法”，但是話說，我覺得非常有以果推因的嫌疑，難道沒有“互動儀式鏈”，騰訊直播會不搞粉絲團/家族，會不辦主題賽事？假如這些產品動作都是我們已知的或者行業常規的，那貼上一個「互動儀式鏈」的皮，對設計的幫助和指導就很小了。
當然，ISUX為了建立自己的品牌影響力可以寫這種文章，但咱自己做作品集的時候還是要心里有數，注意你采納的、特意提到的所有理論都要和最終的設計手段有緊密的因果推導關系。
那話說回來，我們能從哪里獲得這些和人機交互直接相關的研究成果？我建議大家多關注人機交互本領域的期刊，或者和心理學相關的期刊/會議。比如google這篇文章援引的CHI，就是人機交互領域下最知名的、影響力最大的期刊。根據google scholar的統計，HCI（人機交互）領域下的前10期刊排名如下：
地址：https://scholar.google.com/citations?view_op=top_venues&hl=en&vq=eng_humancomputerinteraction
除了CHI和上述排名的期刊之外，我們還可以關注ACM（美國計算機協會）旗下的其他相關會議和期刊。比如google的這篇論文就援引了另一個會議MOBILEHCI的文章。最后，除了人機交互領域，我們也可以多去關注心理學和人機交互的交叉期刊，比如本篇引用的Computers in Human Behavior，其他和心理學相關的研究可以從美國心理學會（APA）的數據庫中檢索。
ACM協會：https://dl.acm.org/journals
APA協會：https://psycnet.apa.org/
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：白話說交互 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
首先要說明一點：模態modals和模式modes盡管都有個“模”字，但在界面設計上指的是不一樣的東西。前者是我們一般說的“帶黑色遮罩的彈窗或者頁面”，后者則指“同一個操作在不同的情況下，帶來不同的效果”，比如Photoshop提供的各種工具就是模式切換的隱喻式說法。
在photoshop中，用戶點擊一下“套索工具”然后按住鼠標左鍵，就可以在畫布上勾選一個范圍，點擊鼠標右鍵則可以對這個范圍進行操作。而點擊一下“畫筆工具”，盡管同樣是在畫布上按住鼠標左鍵，效果則變成了使用筆刷在畫布上畫出痕跡，這就是“共用同一個操作但效果不同”的模式切換。
此外，界面設計中還有一個和“模式”有點像的概念“視圖”view。通常來說，同一個界面與操作產生不同效果的稱為模式；同一套數據展示方式有差異的稱為視圖。這個就下次再聊了。
盡管在圖形化用戶界面的發展中，模式這個概念曾經被各路交互/界面設計師充分討論過，但實際上它并不是一個人機交互原生的概念，我個人推測“模式”的產生恰巧與非界面的產品設計有脫不開的關系。許多生活中的產品出于安全性、效率或者成本的考量會把屏幕設計的很小或者干脆沒有屏幕，人和機器進行交互的方式也很簡單（一般是通過按鈕），這就導致這些產品能夠展示的信息很有限。那么為了能夠區隔用戶的不同任務/意圖，用有限的按鈕實現不同功能，就采用了“模式”這種設計方式。
比如很多多功能的手表既可以展示當前時間也可以拿來當鬧鐘或者計時器，那么為了能在這么小一點的屏幕上實現這么多的功能，就需要一個“模式”按鈕來進行功能切換。切換模式后點擊調整時間按鈕，則可以達到選擇鬧鐘時間/調整計時時長/調整當前時間等不同的效果。
除了上述手表的例子以外，“模式”還廣泛存在在各種簡單或復雜的民用/商用產品中，比如汽車的速度控制，就是一種速度與檔位協同完成的模式；而飛機的駕駛艙里也有一個“模式操縱面板”，能讓飛機駕駛員在高度保持/垂直導航等模式中切換，對飛機的飛行高度/速度等作出調整?？傊诋a品設計的世界中“模式”的應用案例又多又復雜，相比之下界面交互中的“模式”就非常精簡好理解了。
02模式在界面設計的興衰
在圖形化界面發展之初“模式”這個概念就被帶入了界面設計領域。也許是沒有跳脫產品設計的影響，此時的“模式”傾向于用硬件按鈕來解決問題，而沒有完全轉向界面操作。比如我們上次講過的Xerox Star就設計了一個奇怪的“移動模式”，假如用戶想要移動一個文件到另一個文件夾，那么他需要做以下幾步：
現在來看這個“模式”設計真是既反直覺效率又低下，因當時此很多設計師也在思考界面設計是否真的需要“模式”這個東西。和屏幕有限、交互方式有限的產品設計不同，電腦有鼠標有大屏幕，一方面用戶在同一個場景下可做的事情大大增多，另一方面設計師也可以通過拆分界面、增加功能入口的方式來讓用戶聚焦當前任務而沒必要采用模式。因此蘋果在1992年發布的Macintosh人機界面指南中開始將“無模式”modelessness作為蘋果產品的一大賣點。用戶能在任何情況下完成任何行為，而不必要進入某個特殊的“模式”。比如我們上面提到的“移動”操作，在Mac中就變成了我們熟悉的按下拖動，簡單快捷。
然而“模式”是不是完全過時了、完全不適合界面設計？也不盡然。首先，在一些和實物產品相關的地方，模式還是留下了它的痕跡。比如我們現在電腦鍵盤上的大小寫鎖定按鈕也是個“模式”設計。當用戶按下這個鍵的時候，電腦進入大寫模式，鍵盤打出來的字都是大寫的；再次按下這個按鈕則退出此模式。另外在界面設計領域也有設計師對模式持不同態度，比如寫可用性十原則的那個尼爾森，就在1996年寫了一篇文章談到他對“模式”這個東西不一樣的觀點。在他看來，“模式”這個東西的本意是“聚焦用戶的注意力、減少用戶可以做的操作，以便于用戶能更快捷地找到在當下具體場景中所需的操作與信息”，并且模式思維其實天然存在在人的日常生活中，比如一個人在廚房里做的事肯定和在游泳池里做的事不一樣。
這篇文章有興趣可見：https://www.nngroup.com/articles/anti-mac-interface/
盡管如此，尼爾森也承認當時的“模式”具有一個很討人厭的問題：模式的切換很麻煩，用戶也總是忘記自己身處某個模式下，因此可能會做出此模式無效的錯誤操作。所以為了解決這個問題，尼爾森覺得采用彈簧模式（ spring-loaded modes ）作為普通模式的替代品更好。這種模式最廣泛的應用就是鍵盤上的shift鍵：按下shift時多選模式生效，此時可以點選多個文件，一旦松開shift則馬上退出多選模式，這樣一來用戶就不會忘記自己身處某個模式下了。
03作為模式的批量操作
盡管模式在界面設計中存在感越來越弱，但除了PS“工具”之外，仍然有兩個非常廣泛存在的模式設計：查看/編輯模式、批量操作模式。今天咱們會主要聊批量操作模式。嚴格來講“批量操作”即同時對多個對象進行操作，它可用多種方式實現而并不局限于“模式”，但是現在市面上比較通行的處理辦法或多或少還是采用了模式的思路，因此我把這兩個東西放在一起說。
我這里舉個例子：比如說你是一個賣海鮮的小店主，為了讓自己店里的海鮮賣的好點，你決定上抖音給你的海鮮打廣告。但打廣告這個東西得多試，哪條廣告語、哪個產品能火很難說，所以你在抖音的廣告系統上新建了60條廣告，每條用的廣告視頻和標題都有些差異，這樣最后哪條廣告火你就繼續投哪條，不火的就下掉不燒錢了。
但是這么多的廣告管理起來很不方便。比如經過你的一番研究，發現抖音的受眾好像都比較喜歡大蝦的廣告，對螃蟹圖片不怎么感冒，轉化數據很難看。所以你打算把所有帶了螃蟹圖片的20條廣告都關閉投放。那我們能怎么做呢？
1.隱式模式
按照傳統的模式思維，我們可以像Xerox Star一樣，通過某種辦法讓用戶進入多選模式，在這個模式下用戶可以進行一些特定的操作，比如批量刪除。然后在批量模式打開的狀態下，出現多選模式需要用到的組件：多選框與多選操作欄。此時其他和多選模式無關的操作，比如“新建廣告”則被置灰，除非用戶退出模式，否則不可點擊。
這樣設計相信很多同學能馬上看出問題：操作效率太低了。打開模式按鈕以后，還需要進行多選操作，然后選擇對應批量操作。其實假如用戶選擇了多個項，我們就可以預判這個用戶是想要對這多個項進行操作，沒必要要求用戶先打開一個批量模式開關
因此，為了解決這個問題，在保持表格復雜性可以容忍的條件下，大多數平臺會將模式的進入方式設計得比較含蓄：只要用戶選中了多選框，就進入多選模式——我把這種設計叫做隱式模式。比如最近比較火的產品cubox，就采用了這樣的模式設計。除去進入模式的方式不同，其他的設計點和60年前的Xerox Star差異不大。
同樣的隱式模式，google mail就做得更加精簡一些。用戶仍然通過點擊多選框進入多選模式，但是只禁用了“刷新”這個會清除所有多選狀態的操作，其他的大部分操作仍然可用。同時也不再提供退出模式的選擇。
那是不是隱式模式相比起來就更好，模式按鈕就不能再用了呢？也不是。咱們之前提過，“批量操作模式”之所以可以做成隱式的，是因為當用戶選擇多個項時，其意圖就已經很明確了。但某些時候，我們無法清晰捕捉到用戶的意圖，所以還得用戶自己手動把模式打開。比如假如這個廣告投放的列表是有優先級排序的，在頁面中排序越高的廣告就能得到越多的用戶預算（這句話我瞎說的，知道什么意思就行）。但之前的廣告表格已經非常復雜了，再插入一套排序組件會讓整個頁面的復雜程度再上一個臺階，那此時應該怎么辦？
此時我們的“排序功能”仍然是用模式實現的，但要求用戶先點擊一下排序觸發模式。這樣做雖然操作效率上不如隱式模式，但有效降低了頁面復雜度，并且也能讓新用戶意識到這個功能的存在，保證功能的可見性。
2.彈簧模式
我們上面介紹過了，電腦的設計本身自帶了一個彈簧模式設計：shift鍵。按下shift鍵之后用戶可以選中列表中的一個范圍，而不需要一個個地去點選。因此我們在做表格批量操作的時候也可以考慮支持這個鍵控，方便有批量操作訴求的用戶批量進行選中。
3.不使用模式
雖然我們全篇都在講模式，但實際上批量操作不用模式也能做。不用模式的時候一般有兩種情況：第一，盡管使用模式區隔使用場景、隱藏一部分功能的設計方式保證了頁面的簡潔，但也帶來了另一個問題：可見性低。在沒有進入批量操作模式之前，用戶不清楚自己能做什么多選操作。在咱們抖音投廣告的案例中只有“刪除”、“下線”兩個操作，所以這個問題體現的不太明顯。但有些場景下，列表中的項有非常多的屬性，所以可能可做的批量操作很多。比如用戶可能會需要批量改廣告標題、改出價、改投放時段等等。因此用戶思考的順序是：我需要做某批量操作->我觀察到系統提供了這個操作功能->我開始進行這個操作。
因此，對于一些注重操作效率、用戶專業程度高的系統來說，為了能夠讓用戶能夠在進入本頁面時就能進行所有操作，愿意犧牲一部分頁面簡潔性去換取更高的操作效率。這樣的系統往往選擇直接將批量相關的操作直接暴露在頁面中，因此對于設計師的排版技能有更高的要求。
在上面兩種樣式中，多選/批量操作都直接放在頁面中，不再使用模式呈現。因此當頁面上按鈕比較多的時候，一般會將所有批量操作收起來做成下拉菜單。
第二，注意到我們上面所有說的批量操作都比較簡單，比如“刪除”、“下線”一步即可完成，因此用戶主要的心理成本和操作成本都壓在多選操作上，也就是操作本身不難，只是操作的對象很多。但有些批量操作本身非常復雜、需要花費很多時間，那么再通過為一個管理列表添加模式來解決問題，就不太合理。比如假如我們的“抖音廣告”新出了一個功能，允許用戶自己創作新的圖片，然后把創作出來的圖片批量應用在已經有的廣告上。此時顯然我們再要求用戶先從廣告列表中選擇廣告，就不現實了。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：白話說交互 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：謝普·?？希⊿hep Hyken）
推薦理由：該書以當今客戶服務同質化嚴重、客戶對價格敏感等經濟環境為背景，深度解析為何客戶體驗是企業想脫穎而出的最佳工具。提出7步創造卓越客戶服務體驗的戰略。任何企業都可以運用這些戰略來提高客戶和員工的忠誠度，從而提供超越預期的服務。這樣可以幫助企業塑造優質形象，迅速形成優質口碑；創造獨特競爭優勢，超越簡單價格競爭；提高客戶忠誠，讓客戶購買得更多；讓員工和客戶都引以為傲。
作者：[澳] 羅伯特·杜（Robert·Dew）
推薦理由：本書出發點在于幫助企業如何實施、落地以及長期維持，如何獲取長久的市場競爭優勢，帶領讀者思考何為客戶體驗、客戶體驗為何重要，以及企業六大競爭優勢的基礎上從如何評估你的客戶體驗、如何打造遞增性客戶體驗升級、如何養成或改變你的客戶體驗三大方面進行詳實具體的介紹和分析，結合諸多案例，圍繞客戶體驗痛點解決的成功的和不太成功的案例，為讀者提供了一個豐富而實用的案例庫、工具包。
作者：李瀟
推薦理由：該書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI設計，也有更進一步的HC X（知識型UGC和信息型UGC）、HH X（人與人的交互體驗）、HB X（人與品牌的交互體驗），具有追求深度、追求卓越、展望未來、兼顧大小的特色，用戶即人，談用戶體驗，自然離不開對人的關注， 作為人的互聯網從業者，在打造產品時，如何在兼顧商業化的同時，用更溫暖的方式去打動人？用戶利益與企業利益的權衡，是一些產品正在面臨的問題，也是所有產品都難以回避的問題，作者選擇聚焦于“人”，這本書的文字能為身處困境的你帶來有溫度的思考。
作者：[美]肯·布蘭佳(Ken Blanchard)、[美]凱西·卡夫(Kathy Cuff)、[美]維基·哈爾西(Vick Halseyi)
推薦理由：該書作者肯·布蘭佳博士被譽為當今商界洞察力和思想深度的人之一，而他的著作非常貼近商業現實，往往是通過真實的商業故事呈現現實情景，闡述其深邃的商業理念和獨到的管理見解，令讀者在閱讀過程中不知不覺領悟到其中精髓。此次肯·布蘭佳博士在其新作《極致服務——如何創造不可思議的客戶體驗》中依然采用嫻熟的商業故事敘述手法，讓讀者在故事閱讀中領悟極致服務的理念價值。 極致服務是指要始終如一地提供理想服務留住顧客，從而提高企業的競爭力。簡單來說，就是企業通過一系列舉措令顧客感覺到備受關注，以此實現極致服務。
現如今隨著設備尺寸的多種多樣，產品在設計過程中需要適配到更多尺寸，布局方案與柵格系統的搭配使用，可以很好的做到跨平臺跨尺寸適配，極大的提升設計效率。之前有小伙伴分享過適配選型的文章中也提到過柵格，大家可以回顧一下【Web產品的適配設計選型】。
其實，絕大多數的設計師都知道柵格很重要，市面上很多企業級系統也都在用柵格系統去規范化信息內容的排版布局，但很多設計師直接面對結論大多是一知半解，自己做設計時有些無從下手。
作者瀏覽了大量文章結合工作中的經驗總結分享給大家，希望能幫助理解柵格系統的本質，并能舉一反三應用在產品設計中，首先從基礎的柵格系統解析開始吧。
最早的柵格概念，來源于平面設計中的“網格”，早在1692年，新登基的法國國王路易十四不滿于法國當時印刷水平，命人成立了管理印刷的皇家特別委員會。旨在設計出科學的，合理的，重視功能性的新字體。委員會由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，以羅馬體為基礎，采用方格為設計依據，每個字體方格分為64個基本方格單位，每個方格單位再分成36個小格，這樣，一個印刷版面就有2304個小格組成，在這個嚴謹的幾何網格網絡中設計字體的形狀，版面的排版，試驗傳達功能的效能，這是世界上最早對字體和版面進行科學實驗的活動，也是柵格系統最早的雛形。再后來，20世紀初，平面設計師們發現通過維持視覺秩序，能使版面更加清晰有效地傳遞信息，由此便逐漸演變出一種平面設計的方法，直到20世紀40年代后期，第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師Josef Müller-Brockmann(約瑟夫·米勒-布羅克曼)所著的《平面設計中的網格系統》一書，自1961年出版以來暢銷至今，對設計界有著深遠的影響。史稱Swiss Typography Movement (瑞士新浪潮平面設計運動)，后來成為全球風靡的International Typographic Style (國際主義設計風格) 。
簡單來說：柵格是通過規則的網格陣列，形成穩定的基礎框架，來規范界面中模塊的布局與信息元素的分布，輔助設計師組織信息的工具。前面講到UI設計中常用的柵格系統是從平面網格系統中發展而來，柵格與網格的本質其實是相通的。那么有同學會問，兩者區別在哪呢？平面設計中【網格】應用的媒介一般為固定的紙張規格，寬度和高度都是固定的，網格的劃分方式是一個個等分的方格。UI設計中【柵格】寬度受設備寬度變化而變化，高度由內容多少來決定。因此設計時只需制定縱向的分割規則，以規范縱軸方向內容的對齊、間隔等元素的排布，這也是我們看到柵格往往都是一列一列呈現的原因。
市面上各系統對于柵格的名詞描述各有不同，新手往往會看的越多，越迷惑，其實大可不必糾結具體叫法上的細微差異，萬變不離其宗，理解其本質表達的意思和柵格的結構原則即可，下面會對這些基礎名詞進行一些解釋。
網格（Gird）的基本構成就是單元格，由格子組成網，形成網格。最小單元格是界面的單位基礎，所有界面元素都按照這個基礎單位布局分布，它對于創造性的決策具有重要的指導意義。
通常，我們利用 8 作為最小單元格建立網格。
使用 8 的倍數來定義模塊的間距與元素的尺寸。
那么為什么是8，而不是別的數字？原因如下：
a.偶數思維：8作為偶數，能適應市面上絕大多數設備屏幕，更為普適。在輸出各種倍圖時也能保證尺寸不出現奇數以及0.5、0.75等次像素的出現（iOS導出1、2、3倍圖，Android導出1、1.5、2、3、4倍圖均為偶數）。
b.規律性：所有元素以8像素為步進單位，利用8或8的倍數規范元素和間距大小，（例如使用4、8、16、24、32等和8具有規律關系的數字）有規可循。
c.節奏感：相比于6、10 等數字，以8為單位，在視覺感受上既不顯得過于瑣碎，也不會因為間隔太大而顯得內容分散，更容易保證頁面效果的協調性。
d.目前市面上眾多開源代碼也都以8的倍數作為默認設計大小，可行性已經得到多輪過驗證，設計師在與開發對接過程中對頁面有較為統一的理解，有效降低合作成本，在設計還原度上也更有保障。
劃重點：注意這里給的是建議尺寸，最小單位的制定還需要結合具體的使用場景來決定，我們以解決問題為最終目的。
列（Column）的作用通常是用來對齊內容，列也是柵格的數量單位，大家可以理解設置柵格數量就是設置列的數量，如 12 柵格就有 12 列、24 柵格就有 24 個列，通過控制列數，可控制界面排版的呼吸節奏，列數越多，內容排布可以越精細，也容易分割的太細碎，反之列數越少，內容排布也越容易稀疏松散。
理解了列，再來說水槽（Gutter），水槽就是列于列之間的分隔間距，這里水槽的作用是幫助區塊內容做分隔，需要注意，水槽內不可放置任何板塊內容。
水槽寬度在一定程度也會對界面的風格有影響，水槽越大，留白越多呼吸感越好，適合一些輕松的內容瀏覽類頁面展示，相反水槽越小，留白小內容緊湊，適合一些嚴謹的工具型面板類內容展示，各有利弊，大家可根據設計目標權衡設計策略。
邊距（Margin）有時候也會被叫安全邊距，是指設計內容距離屏幕邊緣的距離，顧名思義，安全邊距內是禁止放內容的，可以類比為平面設計里的出血概念，主要用來控制屏幕核心內容的展示邊界。
邊距值越小，界面核心內容的有效利用空間越大，布局相對來說會比較寬松，相反，邊距值越大，兩邊留白大呼吸感強，但有效利用區域相對小，內容排布相對更緊湊，也可能會容易擁擠。這里建議界面的邊距可以根據屏幕尺寸做適配，通過斷點響應變化，這樣可以更好的保證在不同屏幕上界面呼吸節奏都相對舒適。
柵格總寬（Container）就是指頁面柵格系統的總寬度，即所有列寬加水槽寬度加安全邊距的總和。
建立好基礎柵格之后，我們可以根據內容去定義一塊內容占用幾個列的寬度，我們把這個區域理解為容器盒子，容器用來集合下級組件，也可以是對文字、圖片、按鈕等多個復雜元素的集合，按照頁面結構可以由小到大依次從組件 – 容器 – 模塊 – 頁面 – 場景進行組合拼裝最終形成設計方案。
定義柵格系統之前，我們先了解熟悉下計算公式
如果你已經理解了前面的柵格要素的作用和用法，那么接下來就可以按照以下步驟在自己的畫板上創建柵格系統。
注意柵格區域不一定是畫布的全部區域，我們可以先將頁面按照功能模塊劃分為全局控制層、內容層、背景層、臨時層。通常我們大多是對內容層進行柵格化。
通常web端常用的三種布局如下圖所示，建議按照實際使用場景靈活的選擇布局形式后，再確定需要柵格化的區域。
當我們遇到一個wed端的內容瀏覽類網站，一般會采用上下布局，通常會基于 1920 或 1440 尺寸作為設計稿寬度，但由于需要適配主流尺寸中的最小尺寸，核心內容展示會控制在 1024（這里不是絕對值，不同產品根據實際情況數字會有上下浮動），其他空白區域即為安全邊距，這是web網頁中常見的一種適配方案。
12柵格和24柵格是目前比較常見的列數結構。選擇使用哪種柵格結構，取決于產品對設計的要求。
12柵格：當產品涉及到多平臺發布，內容較為簡單，單個容器盒子內信息面積較大時，可以考慮采用12柵格來兼容。
24柵格：如果當前產品發布于pc，內容較多，且功能繁雜時，則需要更靈活的柵格系統去規范信息內容的布局，這時我們可以考慮采用24柵格，國內較為主流的企業級設計系統 Ant Design采用的就是24 柵格。
前面講到過在產品 UI 中邊距（Margin）的值對視覺的呈現的影響，這里就不做過多贅述。這里科普一個叫做“Rem”的計算單位，(Rem 是開發常用的計算方式，設計和開發基于同一套原理進行設計，在協作過程中能夠極大提高協作效率，并且減少維護成本），通常制定柵格系統時，我們可以用1Rem的值來定義水槽（Gutter），它的靈活最強，可作為柵格系統的基準值。而邊距（Margin）的值通常就是1.5Rem 或者 2Rem?；诔Ｓ玫?倍或者8倍間距系統規范，一般最為常用的基礎間距為 4，8，16，24，32，48，我們可以在這些基礎值里去選擇匹配產品的柵格系統基準值。
通過Rem基準值，我們還可以輕松得到一套匹配的間距系統，以1Rem=16為例，可以得到以下間距系統：
掌握以上要點，即可get一套匹配產品設計要求的柵格系統。
簡單來講，在固定柵格中，頁面拉伸時，元素的尺寸和間距都是固定的，頁面每到一個斷點尺寸，就會減少或增加最邊緣的內容元素。體現到柵格上，頁面寬度變化過程中未達到預設臨界值時，柵格系統本身的列與水槽寬度不變，頁面所有元素布局也不會有變化，直到到達臨界值，柵格列數會隨著瀏覽器寬度，增加或減少，邊緣內容進行換行顯示
典型案例：Dibbble、Behance
優點：
適配規則簡單，實現成本低
缺點：
適用范圍小，拉伸過程邊距不是固定的，大多只適用于內容居中的上下布局類型產品
一個頁面盡量只有一種卡片尺寸，否則邊距不統一
卡片尺寸固定，在過大或者過小的屏幕尺寸上，比列容易顯得不協調
流動柵格中頁面邊距和內容間距固定不變的，頁面內容隨著頁面尺寸變化而變化，可以是增刪邊緣元素展示個數，可以是調整元素展示比例，最終效果是始終保持內容卡片橫向充滿屏幕可用空間，這種彈性布局能更好的適應不同分辨率體現到柵格上，頁面邊距和水槽寬度是固定不變的，列數在適配過程中也是固定不變的，拉伸過程中的實際列寬是通過柵格區域的百分比縮放而來，這時列的寬度就不一定最小單位的倍數了。
典型案例：百度圖片、花瓣
優點：
可以兼容不同尺寸的卡片混排
頁面邊距也能保持一致，拉伸過程中拉伸過程中過渡平滑，不顯得突兀
缺點：
頁面伸縮時，不可避免的會出現卡片尺寸忽大忽小
在實際項目中，流動柵格和固定柵格的組合使用也是比較常見的做法，一些后臺系統設計、工具型的界面設計會較經常使混合柵格的形式, 混合布局既有固定的內容寬度，也有流動的寬度，靈活性更高，對與內容復雜的產品十分友好
典型案例：Ant Design Pro
優點：
容器承載內容靈活性高，不同分辨率下都能達到較為理想的視覺效果
缺點：
規則復雜，實現成本高
最后再來總結下柵格系統在使用過程中一些使用要點：
1.內容區塊的定義要從列開始到列結束，可以任意分割，比如 6×2、3×4、4×3。
2.水槽內禁止放置任何內容元素
3.安全邊距內禁止放置任何內容元素
4.除非特意設計，否則不要在列之外區域放置元素
5.只要框架（父級）元素對齊柵格，原子組件（子級）可以不完全對齊列
6.對于柵格的區域選擇，可以根據實際業務場景靈活應用，不一定非要整個畫布區域
7.可以使用嵌套柵格，我們通常會用一套柵格標準來全局控制整個界面，但不乏有些產品中會出現一些典型模塊的內容密度和全局柵格的匹配度不高，這種情況我們可將特定區域單獨定義柵格值，嵌入到總的柵格系統中結合使用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：沙拉 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
對于我們設計師來說，尤其是現在 B 端設計如此流行的情況下，表單設計細節尤其需要各位設計師注意。今天會分享表單設計中那些你不注意的細節點，必須先點贊收藏了，這些干貨知識相信你一定用的上。
比如以登錄為例，當你把密碼輸錯后，網站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數據對用戶來說很煩人，這會讓你必須重新輸入用戶名和密碼，即便只是拼錯了密碼而已。
因此，任何專業的用戶體驗設計師不僅應該考慮順利的流程情況，還應該考慮失敗時應該怎么辦。
錯誤提示
錯誤提示應該讓用戶容易找到原因并方便理解。否則，他們可能沒辦法解決這些錯誤。所以對于設計師來說，一個非常重要的目標是要設計出一個易于解決錯誤的流程。一個錯誤信息應該能清晰的解釋到底發生了什么，如果可能的話，最好也提供解決方案。
左邊的錯誤信息很清晰的解釋了發生的問題，右邊的錯誤信息對用戶來說非常困惑。
1. 什么時候告知用戶發生了錯誤比較好？
當用戶出錯后，首先要考慮的事情就是應該在用戶填表時提醒還是最后通知用戶。錯誤預警中有三種常見模式：
內聯/實時：在輸入時或移開焦點后立即提供反饋；
提交后/客戶端：當用戶點擊提交按鈕之后；
服務器端：當請求發送到服務器后再返回反饋給用戶。
這些方法中的每一種都有其優點和缺點。
2. 內聯驗證
一般來說，當表單非常短小時用內聯驗證，因為它允許在內存中的數據仍然最新時更正錯誤。
你可以用內聯驗證立即告訴用戶哪里錯了。
3. 提交后驗證
另一方面，當表單很大且需要保持關注時，你希望幫助用戶保持專注，而不是通過不斷顯示錯誤來打斷他們。
4. 服務器端驗證
服務器端驗證是最不友好的方式，但卻為網站提供了很高的穩定性。當需要二次檢查用戶的數據時，這種方法最有效。
5. 如何提示用戶錯誤？
錯誤提示告訴用戶他們做錯了，但是他們究竟做錯了什么，要如何修復它？很顯然，清楚地說明錯誤，而不僅僅是顯示 Error:90803，對用戶有很大幫助。
6. 使用積極語言而不是消極語言
錯誤提示措辭要使用積極語言而不是消極語言。例如，如果用戶遺漏了一個字段，與其說”該字段不應該是空的“，不如說”請填寫此字段“。當使用積極語言時，用戶不會因為一個錯誤而受到責備，這能減少用戶的焦慮感，減少流失。
7. 必要時提供幫助
在某些情況下，用戶無法自己修復錯誤，他需要額外的幫助。例如，當用戶無法登錄時，大多數應用只提供找回密碼，而沒有找回用戶名。但事實上，用戶名和密碼都可能會忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來幫助用戶解決問題。
標簽是表單可用性最關鍵的組成部分。如果標簽不清晰，那么其他元素就算把可用性做得再好也沒意義。所以，不要讓用戶來猜測這里面到底要填什么內容。
用不要用一些模棱兩可的詞，比如‘數字’可能會讓人感到困惑，一定要明確意思。
1. 將標簽放在輸入字段的頂部
許多研究表明，將標簽放置在輸入字段的頂部可以幫助用戶更快地填寫表單，因為它允許用戶遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動標簽。因此，如果你希望用戶更快地填充表單，請將他們放置在字段的頂部。
將標簽放置在字段的頂部和使用浮動標簽，這兩種方式都很有效
2. 將標簽放在輸入字段的左側
另一方面，當你詢問用戶比較復雜的問題，用戶需要更多時間思考問題答案的時候，研究表明將標簽放在輸入框的左側會比較好。
3. 標簽應該是可見的，無論什么輸入狀態
無論你用什么方式，確保當用戶填完內容后，標簽是可見的。因為，當用戶需要再次確認表單內容的時候，他們不用刪除填好的數據來查看系統需要他們填什么。
4. 減少不必要的輸入項
要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項。如果實在做不到，可以將必填和非必填的字段區分開，減少用戶的負擔。
5. 可見性
不管狀態如何，字段都應該是清晰可辨的。此外，活動字段和非活動字段之間的區別應該要明顯。
用輸入字段應該有高對比度，在所有狀態下都是可見的
6. 自動激活 PC 端表單的第一個字段
自動激活表單的第一個字段，這可以提高處理效率，避免用戶額外點擊。
7. 幫用戶預先填好
在某些情況下，你可以幫用戶預先填好字段。例如，可以很容易地檢測到郵政編碼，或者某些數值可能是頻繁的。在這些情況下，為用戶填充字段。
8. 格式
含有大量小數的數字很難讀懂。因此，當要求較大的數字時，需要考慮添加格式以支持可讀性。例如，在詢問卡號時，使用自動格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。
此外，當請求需要特定格式化數據時，要包含一個實例，讓用戶準確理解要填什么。
輸入字段的大小應該與他預期的數據大小相對應
10. 為桌面系統設計靈活的表單
在鍵盤和鼠標之間切換很煩人。在理想的情況下，用戶應該只使用一種媒介來填寫表單，但有時，這是不可能實現的。因此，如果用戶需要多種媒介來填寫表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。
另外，當創建一個網頁表單時，要確保用戶可以只使用鍵盤來瀏覽表單——使用TAB和方向鍵。
11. 為移動端系統設計靈活的表單
當在移動設備上時，將你顯示的鍵盤與用戶必須輸入的數據相匹配。我們經?？吹叫枰獢底宙I盤的輸入可以很好地實現這一點，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤。
輸支持通過顯示正確的鍵盤輸入電子郵件
下拉框的使用比單選按鈕更有挑戰性，因為它需要額外的點擊來打開它們。此外，用戶無法提前看到選項，這可能會讓他們感到困惑。因此，如果你只有少量的選項，使用單選按鈕。如果選項的數量超過 4 個，下拉菜單的效果會更好。
1. 復選框
通過勾選復選框，用戶應該是同意某些內容。我的意思是，他們應該說，“是的，我想要這個”，而不是，“是的，我不想要這個”。不幸的是，我經?？吹接姓`導性的復選框試圖在創建賬戶時欺騙人們訂閱他們的產品。當你不想訂閱他們的通訊時，你又必須勾選復選框，像這樣的伎倆對信譽是不合適的，所以不要動心使用它們。
通過勾選復選框，用戶應該同意某些內容，而不是確認他們不同意。
一個結構充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規劃結構。
1. 從簡單的問題開始
從簡單的問題開始，從用戶已經很清楚知道答案的問題開始，像名字、郵件這類。然后再循序漸進問稍微復雜的問題，像賬戶信息之類的。
首先，一個很自然的順序，當你第一次見某些人的時候，你會找一些比較好切入的問題，比如叫什么名字啊之類的。其次，當用戶已經填了一些字段之后，那么之后會增加他填完表單的機會。
2. 創建邏輯信息塊
將不相關的信息按邏輯分組。例如，你可以將結帳表單分為“個人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個主題。
通過對相關信息進行分組，使表單可被快速掃描
3. 單步 VS 多步表單
當你有很多問題要問的時候，你可能想知道哪一個最有效：單步流程還是多步流程。一般來說，單步表單的轉化率更高，因為它看起來更小，而且不會勸退用戶。如果你詢問基本信息并希望用戶快速填寫表單，單步表單就非常不錯。
當用戶被要求必須填寫更多復雜信息時，多步表單會更好。為了幫助用戶在進行多步驟填寫時不至于失去耐心，可以給到進度條，提示還剩多少步。
4. 單列 vs 多列布局
一般來說，用單列布局會更好，因為可以幫助用戶更好地掃描，也可以盡量減少用戶遺漏填寫。
但當用戶多次填寫同一個表單時，他們更喜歡多列表單，因為這樣不會浪費時間滾動。一般來說，在 B 端應用中這種多列表單會比較合適。
設計可用的按鈕對提高轉化率至關重要。如果按鈕上的文字內容比較模糊，會容易勸退新手用戶。
根據用戶按下按鈕會發生什么來命名按鈕
1. 提高用戶的容錯率
對于更復雜的表單來說，按鈕最重要的一點是，應該有提交和取消表單的單一方法。用戶應該至少有補救的機會。舉個例子，如果用戶點了在線幫助時，他已經填好的數據不應該被丟失?；蛘?，如果用戶由于意外點擊了按鈕，請求不應該被提交。
2. 主要按鈕和次要按鈕應該很容易區分
為了避免點擊錯誤的按鈕，用戶應該能比較容易地區分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。
讓主要和次要的按鈕樣式上有比較大的區分度
3. 正確的標簽按鈕
按功能明確地標注按鈕。例如，如果按一個按鈕可以創建一個賬戶，在按鈕上的文案叫”創建賬戶”要好過“提交”。
當用戶打開表單時，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設計給他們設置障礙。
不幸的是，這里面提到的許多錯誤，并不需要多么高級的技巧，而是因為設計沒有同理心。仔細思考你的設計流程，檢查是否能讓所有內容對不同背景和專業知識的人都是清晰的。
通常來說，一般要達到以下目的，大多數指導原則都來自這些規則：
用戶應該只輸入一次數據
用戶應該填盡可能少的信息
用戶應該只需要記住少量的信息
用戶檢查和恢復錯誤內容應該要很容易
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：nanaOMO 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
譯者推薦 | 著名的諾貝爾獎獲得者赫伯特·西蒙在對當今經濟發展趨勢進行預測時也指出：“隨著信息的發展，有價值的不是信息，而是注意力?！?/span>
在互聯網中，設計師多是處在執行層。通常我們會去追尋做這個項目的原因和目標，那對于整個互聯網時代，設計師如何通過設計手段緊緊抓牢人類最有限卻最有價值的注意力呢？這篇文章就是一個向導，幫助你找到方向。
摘要：電子產品正在爭奪用戶有限的注意力?，F代經濟學越來越關注人類的注意力以及產品如何吸引用戶的關注。
注意力是數字時代最有價值的資源之一。在人類主要歷史進程中，獲得的信息是有限的。幾個世紀以前很多人不識字，教育是一種奢侈。如今我們可以大規模獲取信息。任何有互聯網連接的人都可以獲取事實、文學和藝術（通常是免費的）。我們面對的是豐富的信息，但我們的大腦處理信息能力和以前一樣。每天仍然只有24小時。今天，注意力成為了限制因素，而不再是信息。
在深入討論注意力經濟之前，我們首先需要把注意力的定義闡明清楚。注意力的正式心理學定義和大多數人對注意力概念的看法是重疊的。
注意力：選擇性地專注于我們目前正在感知的一些刺激，而忽略來自環境的其他刺激。
在平常的話中，我們經常說“請注意”。這個表達意味著注意力的兩個重要特征：有限的注意力和有價值的注意力。當我們“關注”一件事，我們會消耗精神資源的預算，相應的我們會減少消耗在其他地方的注意力。關于人類注意力的理論都認為注意力的能力是有限的。心理學家兼經濟學家 Herbert A. Simon 將注意力描述為人類思想中的“瓶頸”。他也提到“豐富的信息造成了注意力不能集中”。一心多用的自負是一種謠言：人們不能同時一心多用。比如，人們可能會在看電視時拿出手機，但是如果他們將注意力轉移到手機上，他們就會錯過電視節目中發生的一些情節。
注意力是我們個人的寶貴資源。這個資源同樣受到商業、政治運動、非營利組織、還有無數其他組織的重視，他們都在試圖吸引我們去花錢或者花費時間。在1997年，Michael H. Goldhaber 寫道，全球經濟正在從物質經濟轉為基于人類注意力的經濟。例如很多在線服務是免費提供的，但在注意力經濟中，注意力經濟是資源更是一種貨幣：用戶用他們的注意力為服務付費。今天，注意力經濟的動力促使企業吸引用戶在應用程序和網站上花越來越多的時間。創建網站和應用程序的設計師明白，他們的產品是在競爭激烈的市場中爭奪有限的用戶注意力資源。吸引注意力的目標導致了很多不同設計趨勢的普及，例如：
在我們最新的語音助手研究中，我們發現當用戶在開車，亦或是他們的手或眼鏡很忙碌的時候，經常用到手機語音助手的功能。一個常見的抱怨是，Siri 或者谷歌助手在手機屏幕上顯示結果而不是大聲讀出內容。比如，即使是簡單而常見的問路任務，也可能要求司機將注意力分散在屏幕信息和道路之間。
配文：在 iPhone 上問 Siri 得到的查詢結果是展示在屏幕上的，用戶需要將注意力分散到任務和屏幕的信息上。
同樣，智能手機用戶的注意力也經常被當前使用的應用程序、網站、電視節目或其他外部刺激所分散。這就是為什么手機上的會話往往比在臺式機上的會話短：中斷的可能性很高。
為了理解一個設計是否超出了用戶的注意能力，需要在上下文中進行研究。實地研究、日記研究和訪談都可以用來了解人們在現實生活中是如何使用該系統的。
許多用戶都知道網站和應用程序在努力吸引他們的注意力。在最近的可用性測試中，一個用戶在 AllRecipes 網站上看一個關于“如何做煎餅”的視頻，當這個視頻播完后，網站會在自動播放列表中加入相關視頻，我們的測試者沒有發現暫停該視頻的選項。在視頻上出現的唯一選項是重新播放，或開始觀看播放列表中下一個視頻。
配文：AllRecipe 網站設計了自動播放視頻列表，旨在保持用戶對網站的關注
當播放列表在排隊時，用戶評論到“這似乎讓我看電腦的時間比我實際需要的時間更長了”。播放列表在每一個食譜視頻播放之前展示一個廣告——該網站有明確的經濟激勵措施，可以將訪問者的注意力集中在連續的視頻上。一些用戶對于無法控制花費在設備上的時間感到無助。數字產品的設計越來越吸引人，經常讓用戶上癮。對父母來說，花太多時間在科技上的影響尤其令人擔憂。吸引人眼球的設計可能會讓年輕人養成習慣，當設備被拿走時，他們可能會經歷“戒斷”。有些用戶會調整自身的行為。其中一些調整是有意識并采取了行動的，以限制在線時間。經過深思熟慮的調整包括設置上網時間限制、卸載某些應用程序或使用家長控制。用戶還學會以微妙的方式保護他們的注意力。條幅盲目性（Banner blindness）是對大量信息做出反應而產生適應性反應的一個例子。條幅盲目性指的是當廣告放在右邊欄或頁面頂部時，用戶往往會忽略廣告。這點就很好的說明了用戶是如何適應大量信息的。用戶也已經適應了移動設備上常見的通知轟炸：他們已經學會忽略其中的許多通知。在最近的一次可用性測試中，我看到一位女士在她的 iPhone 上瀏覽新的博客。當會話的第一個通知消失時，她向我道歉并問道：“你還用這個錄音進行研究嗎？”在我向她確保這不是個問題之后，她繼續了這個測試任務。在整個會話期間，還有幾個通知從這個用戶的手機上發出，但沒有一個通知打斷她的思路。
我們根據目前觀察到的未來預測，為注意力而設計的趨勢將會繼續演變。很多企業將會選擇創造更多抓住用戶注意力的廣告。自動播放視頻和不可跳過的廣告幾乎普遍不受用戶歡迎，但它們將繼續作為設計特色。在搶奪用戶注意力的軍備競賽中，廣告將會變得越來越身臨其境。主流的社交媒體平臺，如 Facebook、Instagram 和 Snap 都在測試增強現實廣告。
一些企業將會持續研究形成習慣的設計，來吸引用戶越來越多的關注他們。注意力經濟擁有一個樂觀的未來也是可能的：最近的發展為更公平的注意力經濟帶來了希望。越來越多的廣告采用了分成收入模式，這使得用戶可以用他們的注意力（觀看廣告）或金錢（保持他們的注意力）來支付。
配文：Spotify 允許用戶在其廣告贊助的服務上免費聽音樂，如果用戶希望避免令人分心的廣告，他們可以直接為這項服務付費
一些企業已經回應了用戶關于分散注意力設計的抱怨。Apple 最近更改了通知的設計，可以在 iPhone 上快速連續刪除多條通知，還引入了屏幕時間統計功能，允許用戶監控他們對點子設備的使用情況。
結論
數字經濟的某些事實可能不會改變。在可預見的未來，廣告將為一些免費內容提供資金，應用程序將爭奪新用戶的注意力，而人們的注意力仍然有限。但是，設計師在注意力經濟中有一個選擇：他們可以平衡業務需求——— 比如對新用戶、廣告收入和利潤的需求——同時尊重用戶的最大利益。
原文標題：The Attention Economy
原創作者：Lexie Kane
原文鏈接：https://www.nngroup.com/articles/attention-economy/
翻譯作者：櫻桃小丸子
授權獲取：張聿彤
文章審核：王翎旭
文章編輯：王鴻飛
該譯文并非完整原文，內容已做部分調整。如在閱讀過程中發現錯誤與疏漏之處，歡迎不吝指出。如需轉載，請注明來自 三分設
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：三分設 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“仰望星空，腳踏實地” ，做設計需要想象空間，也要有反思和總結的能力。
讓我們來看兩個毫無關聯的產品的界面。
BI產品
團隊協作產品
這兩個案例展現了如何選用不同的模式以實現不同的目的。
對于BI產品來說，目的是讓數據分析更徹底，提高數據分析效率；更好的整合數據，為企業提供報表，做為企業決策的依據；更好的幫助企業管理者管理企業，提高企業實力。
對于teambition來說，目的是輕松記錄要做的事，并與伙伴實時同步進展。讓彼此清楚地了解項目整體情況及事項優先級，從而完成目標。
基于產品目的我們可以看出BI產品重效率；teambition 更看重清晰以及使用是否輕松愉悅。
而產品的目的決定了它所采用的設計模式也會不同，下面我們再對照界面看下基于目的在界面設計上有什么不同。
BI產品
團隊協作產品
BI數據分析類產品的布局多是小部件組成，這樣做會方便用戶進行多任務處理。界面設計也會相對比較密集，整個界面承載了很多信息。它使用了緊密的間距、緊湊的控件、靈活的布局和排版方式。
設計模式的概念最早是建筑師克里斯托弗 ? 亞歷山大（Christopher Alexander）在他的開創性著作《建筑的永恒之道》和《建筑模式語言》中提出的。
《建筑模式語言》里面包含了253個建筑設計模式，大的如城市和道路系統的布局，小的如家庭住宅中的照明和家具。
類似地，我們在創建界面時，也在使用設計模式（組件）來解決常見的問題：使用標簽頁將內容分成幾個部分，并表明哪一個選項對應于當前的頁面；使用下拉菜單展示可供用戶選擇相關選項。
標簽頁
下拉組件
設計模式分為2類：
第一類：功能性模式（組件庫）表現為界面上的具體模塊，如按鈕、標題、表單元素、菜單等。
第二類：感知性模式（視覺規范）則是描述性的樣式，以可視化方式表達和呈現產品的個性，如配色、排版、圖標、形狀、動畫等。
功能性模式有點像名詞和動詞，它們是界面中那些具體的、可操作的部分；而感知性模式則類似于形容詞，它們是描述性的。
例如，按鈕是具有明確功能的模塊，它讓用戶能夠提交某項操作。但按鈕上的文字的樣式，以及按鈕本身的形狀、背景色、填充、交互狀態和過渡動畫不是模塊，而是樣式，這些樣式描述了按鈕是什么樣的。
唐·諾曼在《設計心理學》一書中說過：系統映像（界面）和用戶模型（用戶通過與界面交互而形成的感知）之間存在著一道鴻溝。
在設計團隊內部也是如此，比如“范圍輸入框”組件，你能想象它是一個什么樣的組件嗎？相信不同的人肯定有不同的心智模型，因為這個組件不是常用組件，在ant design、arco.design組件庫中也找不到這個名稱組件，因為它是TDesign的產物。
而每個公司都會根據自己的產品特性創造一些非常規類組件名稱，這個時候就需要在所有參與產品創建的人之間共享。只有產品內部設計語言一致，才能去培養用戶的心智模型，這樣才能去除系統映像與用戶模型之間的這道鴻溝。
例如上面這個組件，每個人都需要知道這個組件叫“范圍輸入框”，而不是“輸入框”或者“數字輸入框”。
例如，teambition的目的是“輕松記錄要做的事，并與伙伴實時同步進展”。
于是，我們可以去看產品，設計體系在實現這一目標的過程中發揮了多大作用，以及這些設計實踐的效果如何。如果視覺、交互混亂，導致無法實現上述目標，那么可以認為這套設計體系是無效的。
上面介紹了設計體系包含的內容，下面我們針對這些內容進行具體的介紹：
做B端的小伙伴應該都知道ant design，但不知道有多少小伙伴有認真的看過ant design的設計原則。 可能有小伙伴會問這個設計原則有什么用，我最開始也覺得沒什么用，后來在參與設計體系優化過程中發現這個原則就是金字塔尖。
例如：用戶沒有填寫完表單，那么表單的提交按鈕能不能點？是置灰好，還是按了以后再給彈窗提示。
例如：可編輯表格，是放一個筆狀icon來提示可編輯，還是采用鼠標觸發時出現輸入框以及指針變為文本狀態。
日常工作中總會在這些細節問題上爭論很久，美其名曰“打磨設計”，其實很多時候就是設計原則在團隊內部沒有達成共識。
為了避免出現上述問題，我們要建立一套基本的價值觀和原則。在一些公司里，尤其是在處于初創期的公司里，嘗試建立一套共同的準則是很難的。設計原則是無法量化的，因此定義這些原則可能需要多次迭代。
對于原則到底是什么，可能存在一些爭議。有些公司的設計原則偏重于品牌，有的偏重于團隊文化，有的則偏重于設計流程。
例如，Pinterest的設計原則便偏重于品牌。
Atlassian公司沒有分團隊或者產品單獨制定原則。
他們的目標是在客戶可觸及的每一點上都體現一些核心的價值觀。比如“大膽”“樂觀”“實用但不乏味”作為價值觀的體現。
不過，盡管各處的價值觀是相同的，但體現程度并不一樣。
例如，官網就會較多的提現“”大膽”，但產品里面就不會，正如Atlassian公司的設計經理Kevin Coffey所說的，“沒有人想要一個‘大膽的’服務支持頁面”。
Atlassian 官網截圖 https://www.atlassian.com/zh
Atlassian 設計體系 https://atlassian.design/
我們以TED為例。TED的一條設計原則是“追求永恒，而不是追求潮流”。永恒這個詞不光體現在TED的界面上，還體現在TED的整個品牌和設計方法上。
這意味著他們不會為了追逐潮流而采用一項新的技術或引入一個新的設計元素。
例如：定義了原則為“簡化”（讓產品盡可能簡單，簡單到幾乎感覺不到它的存在）。這種原則就是不實用也不可操作的。
怎么能讓團隊所有人都能理解？
消除無用的部分。每一個設計元素，無論大小，都必須有一個目的，并遵循它所屬元素的目的。如果你無法解釋一個元素為什么要在那里，那么它便很可能不應該在那里。這樣的定義就清晰很多。
再例如：定義了設計原則為“有用”，什么是“有用”？
從需求開始。如果你不知道用戶需要什么， 就無法做出正確的事情。去做調研，去分析數據，去與用戶交流，而不是做假設。
好的設計原則也能幫我們確定優先級和平衡點。
Salesforce公司的Lightning設計體系的原則是“清晰、高效、一致、美觀”。
這些原則的優先級必須遵從以上順序?！懊烙^”不應該高于“高效”和“一致”，而“清晰”應該始終放在第一位。按照這種方式對原則進行排序，可以讓團隊在做設計決策時明確哪些東西應該優先考慮。
Atlassian和Airbnb的團隊成員被問及他們的設計原則時，他們都能脫口而出，沒有片刻猶豫，沒有人表現出遲疑，沒有人想要去翻看品牌手冊里的原則內容。他們為什么能把原則記得這么牢固呢？因為他們的原則足夠簡單、實用、易于讓人產生共鳴。
Airbnb公司的四條設計原則（“統一”“通用”“風格化的”“對話式的”）便深深地扎根于其設計過程之中。
每當設計一個新的組件時，我們都會確保它完全滿足四條原則。如果我們沒有這一套原則，便很難就各種問題達成一致意見。----Airbnb 首席交互設計師
每個團隊建立其設計原則的方法都不盡相同：有的會召開幾輪研討會，有的可能會征求CEO或創意總監的意見。不過，無論采取哪種方式，都離不開下面幾點：
從目的開始
TED網站的主要目的可以用一句話來表述：“盡可能廣泛地傳播演講?！币虼?，TED網站的精神和價值觀便是觸及盡可能多的人群，降低使用門檻，讓產品具有很高的兼容性和可訪問性。這意味著優化性能和提升可訪問性比添加華而不實的功能更重要，清晰的文案比大膽的設計更重要。
尋找共識
如果你仍處在定義設計原則的階段，那么一個有效的方法便是讓團隊的一些人或所有人（取決于團隊規模）各自回答關于設計原則的問題。例如，在他們眼里，什么樣的設計對你們產品來說是好的設計？他們將如何用既實用又易于理解的五句話向團隊的新成員解釋設計原則？
面向正確的受眾
如果搞不清楚設計原則是為誰寫的，就一定會寫出含糊不清的原則。有的小伙伴說我們領導就喜歡“美觀”，那我們是不是把“美觀”放在第一位？一定要搞清楚為誰而寫。原則到模式
作為一個設計師，定義設計原則可能對你來說也許并不難， 但怎么把原則、品牌價值、組件相結合，怎么體現在設計模型中，這個我覺得是個挑戰。
對于 TED 來說，信息的清晰比美觀更重要。試圖將每個演講都 提煉成一個短句可能很難，所以有時候標題可能很長。對標題 進行截斷是很容易的，但對他們來說，演講信息的優先級是最 高的。
因此，他們沒有選擇相對容易的標題截斷方案，而是確保他們的設計模式可以容納長的標題。
功能性模式是界面中有形的構件（表單）。它們的目的是讓用戶能夠完成某種行為（填寫表單），或者激勵用戶完成某種行為。
功能性模式可以很簡單（標簽?字、輸?框、按鈕 ），也可以組合成更復雜的模式（搜索組件）。
標簽?字、輸?框、和按鈕
搜索組件由標簽?字、輸?框和按鈕組成
隨著產品的發展，模式也在不斷發展。包括風格，甚至功能和交互方式，都有變化。然而，它們的目的基本保持不變。
我們用頂部導航舉例：
頂部導航是由logo、搜索定位框、文字下拉框、圖標功能按鈕、通知按鈕構成。導航條里的每一個模塊都有自身的目的：搜索定位框告訴我們怎么快速找到想要的東西，導航帶領我們瀏覽全局，指引我們到想去的地方，而后面的的圖標按鈕讓我快速觸達。
總的來看，這些模塊都有一個共同的目的：引導用戶快速瀏覽使用。隨著產品的發展，模式也在不斷發展。
例如，隨著產品功能越來越多，可能會在導航上面新增設置功能，讓用戶自己去排布常用功能。又如，我們可能會對導航進行重新布局，把導航按模塊分類，采用標簽按頁展示。把模塊下面更多功能放到子頁面左側。雖然我們不斷的對模式進行迭代，希望它更好的實現各自的目的或者說更有效地激勵用戶使用。
在設計開始階段就闡明模式的目的，能避免在產品發展過程中做重復性的工作。
目的決定了其他的一切：模式的結構、內容及呈現。了解模式的目的，可以幫助我們設計和構建更加穩健的模塊。
如果說功能性模式是界面中的組件，那么感知性模式則更像是樣式——描述組件是什么類型的，給人的感受是什么樣的。下面，我們將探討感知性模式。
設想我們每個人各有一套房子，且每套房子都有以下這些家具：一張桌子、幾把椅子、一張床和一個衣柜。
不過，雖然都有這些家具，但每套房子給人的感覺截然不同：可能是因為家具的樣式、材料、顏色、紋理不同，或者是床罩的布料、裝飾品的樣式、房間的布局和燈光，甚至是房間里播放的音樂不 同。
上述這些屬性便稱作感知性模式。正是因為它們，可能你的房子就像是一個地中海風格的小窩，而我的房子就像是一個倉庫。
而數字產品感知性模式的例子包括語氣、排版、配色、布局、插圖與圖標樣式、形狀與紋理、間距、意象、交互或動畫，以及這些要素在界面中的組合和使用的具體方式。
有時，人們將這樣的特性視為產品的樣式，或稱作皮膚，也就是最外面的一層。但要想取得成效，它們必須不僅存在于表面，還必須存在于品牌的核心，并隨著產品的發展而發展。
只有這樣，感知性模式才會成為讓產品脫穎而出的強大力量。
同一領域的產品，哪怕具有相似的模塊，它們給人的感覺也是不一樣的。感知性模式通過界面傳遞品牌，并讓品牌被人記住。
看下面的圖片，你能認出它們是什么產品嗎？
這兩張圖里面并沒有太多的信息，你只能看到排版的樣式、一些圖形和顏色，以及一些圖標。然而那些視覺上的線索極具辨識度，所以你仍然很有可能看出它們分別屬于什么產品（即釘釘和飛書）。
這些視覺元素通過有意識地反復使用，便形成了模式，這就是為什么我們可以在沒有上下文的情況下認出它們。
在模塊化的系統中，想要做到視覺上的連貫統一可能是一件很棘手的事情。模塊是由不同的人根據不同的目的創建的。而由于感知性模式是滲透到系統中各個部分的，因此它們可以將系統的不同部分連接起來。如果這種連接是有效的，那么用戶就會感受到模塊之間的統一性。
例如：飛書和騰訊的相同功能的組件感知模式是不一樣的，所以兩個公司設計體系不能混用。
如果說功能性模塊反映的是用戶需要且想要的內容，那么感知性模式關注的則是他們直觀的感受或行為。
在《網站情感化設計》一書中，作者提出了一 個簡單的方法，通過創建“設計角色”捕捉產品關鍵的個性 品質。以下是一些有助于探索感知性模式的一些技巧。
情緒板是探索不同視覺主題的絕佳工具?？梢允褂脭底只姆绞絼摻ㄇ榫w版（Pinterest或花瓣都是一種用于創建數字化情緒板的常用工具）。
如果你目前做的產品是需要體現：科技、質感、智能，那上圖應該可以滿足這些條件，你可以通過這張圖與領導進行溝通達成一致，然后從中提煉出一些顏色、元素、材質，這樣大方向就不會有太大問題，只需在細節上進行打磨。
定義好了大致的方向之后，便可以使用樣式疊片來更加細致地探究多種可能性。樣式疊片的概念由Samantha Warren提出，他將其定義為“由字體、顏色等界面元素組成的能傳遞Web視覺品牌精髓的設計交付物。”
和情緒板一樣，樣式疊片可以為用戶和產品團隊提供有價值的討論點，并呈現他們對特定設計方向的初始反應。
arco.design 首頁這張圖可以理解為就是樣式疊片，把不同的組件樣式疊片放在一起比較，有助于準確地找到設計方向。
當功能模式和感知模式建立完成后，我們將它們集成到產品的過程，它們還將進行演變。
因為在真實的界面中，模塊、交互、樣式之間相互影響下會產生新的問題，這都是很正常的，是典型的迭代過程，這個過程會一直持續，直到設計語言最終形成。
像ant design、arco.design應該都經歷過這個過程，只是我們不知道而已，要不然也不需要花費幾年的時間打磨后才發布出來。
平衡品牌性與一致性：
過分關注一致性也會扼殺品牌性。矛盾在于，讓設計達到完美的一致性無法確保它依然具有很強的品牌性。有時，這樣做反而會削弱品牌性——在一致性和統一性之間存在著細微的差別。
《英國公開大學》的創意總監曾說過：“當你專注于產品一致性的時候，打造產品質感的一些重要的細微之處就有可能會丟失。
發展感知性模式需要為設計師賦予打破常規的權力，鼓勵設計師積極地探索更多的可能性。好的設計體系能在品牌的一致性和創造性表達之間取得平衡。
小規模試驗：
后期如果發現樣式無法滿足，我們如何將新的樣式引入設計體系呢？
可以先進行一些小規模的試驗是一種相當有效的做法。如果某些元素的效果很好，我們就逐漸將它們集成到其他界面中去。
例如，在學習者完成一個步驟時，純功能性的切換按鈕缺乏慶祝和成就的感覺。于是，我們用帶有圓形樣式、彈跳 動畫以及勾號圖標的按鈕取代了先前的按鈕。
雖然新的按鈕樣式受到了學習者們的好評，但它與設計體系的其他元素格格不入。后來，我們開始在網站的其他地方應用圓形圖案、彈跳動畫和勾號圖標。如果不這樣做，那么整個設計 體系給人的感覺就是割裂的。
數字產品都是由團隊打造的。團隊里的每個人都有各自的具體目標，都有各自的截止日期。這就意味著難免會出現草率加入的模式、重復或錯誤的模塊。
我們能確保一個產品即便有多人協作，卻仍能連貫、統一嗎？ 只要我們團隊對自己的設計體系及其運轉方式有共同的理解，我們就能做到這一點。
這意味著我們遵循相同的指導原則，我們對品牌愿景的理解是一致的，我們在設計和前端架構方面有共享的方法，我們知道什么樣的模式是最有效的，也知道它們的工作原理。換句話說，創建統一的設計體系需要共享設計語言。
許多偉大的建筑物（如圣家族大教堂、沙特爾大教堂、阿爾罕布拉宮）并不是由一位主建筑師在繪圖板上費力地創造出來的，而是由一群人構建出來的，這群人對能將這些建筑物變為現實的設計模式有著深刻的共識。
“幾組人可以通過遵循一個共同的模式語言，當場構思出他 們的大型公共建筑，就好像他們共有一個心靈?！?
——克里斯托弗 ? 亞歷山大，《建筑的永恒之道》
我們可以用類似的想法構建數字產品。設計語言可以讓人們創建出具有整體感的產品，哪怕不同的人負責不同的部分也是如此。
如果一個界面上的元素沒有恰當的名稱、團隊里人盡皆知的名。那么該元素就沒有在你的設計體系中成為有效的單元。一旦你給一個物件命了名，你就塑造了它的未來。
例如，如果你給的是一個表現型的名稱，那么它將來就會受到樣式的限制：“藍色按鈕”只能是藍色。
例如，如果你給的是一個狀態屬性的名稱：“幽靈按鈕”，它的特點是：按鈕形狀的透明按鈕，但有細實線的邊框，常用在有色背景上。
僅僅完成命名還不足以建立共享的設計語言。整個團隊都應該 沉浸到設計語言中去，讓它無所不在。
讓設計模式變得可見：
如果有條件，可以在墻上開辟一塊專門展示設計體系的空間，將它稱作“模 式墻”
讓你的設計體系更加開放，人們會感覺你歡迎他們的加入，歡迎他們提出問題甚至做出貢獻。
引用事物的名稱：
所有語言的共同特點是，只有不停地使用才能讓它保持活力。
它需要成為日常對話的一部分：
這就是為什么需要有意識地使用約定好的名稱去引用這些模式很重要——無論這個名稱聽起來有多奇怪。將設計體系作為入職培訓的一部分將設計體系的內容作為入職培訓的一部分，新員工了解設計體系就會更加容易。當新員工入職時，他們將了解到設計指南是如何創建出來的，這樣他們就可以理解為什么以及如何做出決策。在 《英國公開大學》 內部，他們創建了一個入門性質的線上課程，其中有一章專門對模式庫進行了介紹，并包含了 一些小測驗和小課程，這樣可以幫助新員工更好的理解設計體系。
定期組織設計體系會議：
每個人都討厭開會。但是，如果你希望每個人都跟得上設計體系的發展，那么組織召開設計體系的會議就是必要的。這是所有設計師和開發人員共同專注于設計體系的時間。一開始，可 以每周舉行一次，當團隊找到節奏之后，可以每兩周舉行一 次。團隊可以利用例會時間就產品的總體模式（如圖標、排版）得出一致意見。同時，這也是分享新模塊并討論其目的、 用途及可能遇到的問題的好機會。
設計體系不是一夜之間構建出來的，而是通過日常的實踐逐漸形成的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
作者：夜鷹YEAH 來源：站酷
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
對于B端來說，可能很多UI和前端喜歡直接套用Ant Design或Element ui組件規范；因為之前企業要求并不高，但是隨著市場和環境的發展，企業對B端越來越重視，這些模版太類同，顯然就太爛大街了。隨后字節推出Arco Design、騰訊推出企業級設計體系TDesign、有贊推出Zan Design，很多大廠都推出了適合自己產品的模版和規范，給了我們許多借鑒，能讓我們快速作出一個不出錯的方案。不過企業、市場的要求顯然不止于此，我們的設計追求也不止于此。那么我們如何才能擺脫套模版，提高界面的精致度，提升界面的交互體驗呢？
為啥要搭建設計系統？設計系統對我們開發團隊中誰有指導作用？
◆ 設計系統可以保證我們產品風格的統一性，降低用戶對新產品適應時間和學習成本；對UI設計輸出效率有很大的提高，在團隊協同中可以大大的減少無效溝通，節約時間成本
◆ 在開發團隊中，設計系統對UI、交互、前端、測試等崗位的工作都有一定的指導作用
設計原則是傳統智慧的沉淀與未來趨勢的結合體，能夠幫助我們更好的進行設計活動時代在進步，設計原則也必然需要不斷的更新以適應發展新的設計原則要求界面更友好，操作更加人性化。
這里我歸納了8條原則僅供大家借鑒學習:
◆ 可用性：有助于檢查用戶是否能夠輕松地完成任務、產品是否正常運行以及是否完成工作
◆ 易用性：易用是首要考慮的因素，能一步解決的事情絕不兩步
◆ 統一性：頁面風格、色彩、布局等要保持全局統一，不可為了某一功能的美觀而去破壞整體
◆ 親密性：信息的關聯性強，距離就要相應的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大，要讓用戶對信息的區域劃分一目了然
◆ 對齊性：在界面中，將元素進行對齊，符合用戶的認知，引導視覺流向，讓用戶更加流暢的閱讀信息
◆ 對比性：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結構，讓用戶快速識別關鍵信息。
◆ 重復性：相同的元素在整個界面中不斷重復，不僅可以有效降低用戶的學習成本，也可以幫助用戶識別出這些元素之間的關聯性。
◆ 穩定性：沒有任何東西比產品的穩定重要，down機再好的產品也是徒勞。會影響到系統穩定的事情不能做
響應式布局，能夠適應各種屏幕尺寸及分辨率，確保整體布局的一致性簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。一般采用柵格系統布局，常用柵格一般是16列或24列。
◆ 柵格：是對界面當中元素橫向排布的一種模式，主要用于大型區塊間距的排列，不適用于圖標與文字間隔的小型元素。
◆ 模度：為界面布局的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗，我們網格基數設為8，卡片寬度及間距為8n。常用模度：4 8 16 24 32 40 48 56 64 … 1920
◆ 布局：常用左右布局或上下布局
左右布局以1920頁面布局為案例：通常B端產品左側會有一個導航菜單，假設240px,右側核心工作區域總寬1632px, 右偏移240px ,列數16列，列寬86px, 間隙16px， 左右邊距24px; 左邊導航和邊距固定不變。
上下布局以1920頁面布局為案例：通常左右會有一個留白區域，假設144px,中間核心區域總寬1632px, 右偏移144px ,列數16列，列寬86px, 間隙16px。
設計風格說白了就是用戶最直觀的感受，“商務、時尚、簡約、科技感、沉穩、年輕、高端...”?
決定設計風格的因素有這些：
色彩是UI設計的基石，人腦對于色彩的記憶度要高于形態；除了美學之外，色彩還是是情感和聯想的創造者。通過對自然的感知和行為，我們通常對色彩定義品牌色板、功能色板、中性色板，以及衍生色。
◆ 品牌色：是體現產品特性和傳播理念最直觀的視覺元素之一（例如：我們熟悉的政府藍/黨政紅/淘寶橙，他們都能直觀或間接的傳達產品特征屬性）
◆ 功能色：遵守用戶對色彩的基本認知，保持一致性，不過多的自定義干擾用戶的認知體驗，提高用戶的閱讀理解力，功能色代表了明確的信息以及狀態，比如正常、成功、失敗、警告、鏈接等
◆ 中性色：主要應用在界面的文字部分、背景、邊框、分割線等場景，根據使用場景，通常將中性色被定義為 3 類：文字、線條、背景
◆ 衍生色：B端產品中顏色的應用場景可能很廣泛，要考慮它的延展性，按照一定規則定義完畢主色，便可以自動獲得一系列完整的衍生色
設定統一的字體規范，無襯線黑體中宮更為開放，布白更為勻稱，顯示效果更為舒適，醒目利于閱讀，更利于視覺信息的傳達，在互聯網時代后期在界面設計中字體樣式還是會以無襯線體為主。
◆ 字體家族：根據系統區分Mac or Windows，如果用戶使用的是Mac系統可以優先使用Mac默認字體渲染 ；如果使用的是Win，字體兼容性選擇順序（有購買版權字體的可優先考慮），例：
◆ 字號：為了提升用戶的閱讀體驗，滿足用戶的可讀性，更為舒適、清晰，也能保證界面的層次感（結合WCAG 2.0標準），將 PC/Web 端主字體從以前的12px改為 14px。
◆ 行高：為上下文之間提供了呼吸的空間，規范的行高，可以使得界面層次清晰、重點突出
◆ 字體顏色：WCAG 2.0 中將顏色對比等級分為 3 種，A級，AA級，AAA級，等級越高意味著顏色的對比度越高，呈現出來的視覺壓力越大。字體顏色數量不建議太多，根據文字主次關系定義3-4個為宜（例：主文字、輔助性文字、提示文字、輕提示/禁用文字）
◆ 字重：字重不建議太多種，2-3種為宜（例：Regular、Medium、Light）
圖形中有圖片、圖標、圖表，都對整體風格有一定影響，設定統一的圖形使用規范，可以使視覺效果更加和諧
交互，即交流互動，也就是說我們自己通過我們的五覺：視覺、聽覺、觸覺、嗅覺、味覺來感受其他事物并和他們之間產生信息溝通的過程。在互聯網中交互對象個體主要是人和機器，所謂人機互動，相互配合，共同達成某種目的。
◆ 交互方式：保持產品的統一性，同類別的交互不可有不同的操作感受。要符合大眾的認知習慣，可創新但不可違背潛意識，例：wab端頁面鼠標交互操作一般有下拉、上滑、按壓、懸停，移動端一般左右上下滑動、下拉、上拉、雙指縮放...
◆ 交互狀態：按鈕狀態變化，頁面狀態變化，組件狀態變化...交互內容確實太大了，我個人也只接觸到的也只是冰山一角，只能拋磚引玉，勾起大家思維，相互探討學習
◆ 引導：引導一般常見5 種：新手引導）、步驟引導、幫助/操作引導、新功能引導、空白頁引導
什么是組件？組件是抽象概念,對面向過程而言是對數據和方法的簡單封裝。對面向對象而言是一些符合某種規范的類組合在一起就構成了組件。它可以提供某些特定的功能。組件出現的原因軟件工程中重復、反復出現、普遍的、有相似的問題的出現,導致開發過程中有大量的代碼需要不斷的重新設計,開發周期延長,開發復雜度增加。需要岀現一種模型通過剝離掉各個問題的特性,抽取各個問題之間的共性。從而在保證代碼的靈活性下極大的增加代碼的可重用性。組件的岀現就是為了解決這些實際問題的。
在前端眼里，組件通常是指頁面上的視圖單元，可以說，UI組件是組件的子集。組件庫大致可以分為這幾大類：
◆ 導航：固釘、面包屑、下拉菜單、下拉導航、電梯、菜單、分頁器、步驟條
◆ 數據錄入：自動完成、級聯選擇、多選框、日期選擇框、表單、輸入框、數字輸入框、提及、步進器、評分、下拉選擇、滑動條、穿梭框、文件上傳
◆ 數據展示: 頭像、標題、卡片、輪播、折疊面板、表格、拖拽排序、高亮關鍵詞、時間軸、走馬燈、空狀態、徽標數、樹、標簽、標簽頁、圖片、氣泡...
◆ 反饋: 警告提示、抽屜、全局提示、對話框、通知提醒框、氣泡確認框、進度條、結果、加載中..
◆ 其他: 錨點、回到頂部、圖標...
設計規范是為了更高效的做設計，但不是一成不變的，它在落地使用的時或多或少都會有問題，需要我們慢慢的去反復檢驗它的合理性，發現不合理的及時更正，不斷迭代，不斷沉淀，不斷優化，這樣才能不斷提高產品的用戶體驗。此次分享借鑒一些前輩的經驗，主要是整理歸納學習，如有需要補充或糾正的，歡迎大家相互探討！
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：小魚ID 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
用戶體驗（用戶使用產品，系統或服務過程中的主觀感受）
用戶在使用產品過程中建立起來的一種純主觀感受。用戶體驗這個詞最早被廣泛認知是在上世紀90年代中期，由用戶體驗設計師唐納德.諾曼（Donald Norman）所提出和推廣。對于一個界定明確的用戶群體來講，用戶體驗的共性是能夠經由良好設計實驗來認識到。用戶體驗并不是指一件產品本身如何工作的，更明確的是指“產品如何與外界發生聯系并發生作用”，也就是人們如何‘接觸’和‘使用’。無論什么產品，用戶體驗總是在細微之處，往往細節最能打動人心。用戶體驗通常要解決的是用戶具體的使用場景，要兼顧視覺和功能兩方面的因素，同時解決產品所面臨的其他問題。
產品的邏輯簡易程度對于用戶體驗是一個反向指標，產品越復雜用戶體驗會越發困難。往往產品后期更新迭代中，每新增一個特性，功能或者步驟，都會增加導致用戶體驗不順暢或者失敗的機會。用戶體驗的每一個流程，對開發者而言都要經過慎重的考慮和驗證。實際上設計出一個最優的解決方案需要更多的時間和精力，往往不得不在各個方面作出妥協。但是一個以用戶為中心的設計流程保證來這些妥協不是隨機決定的。
為什么每個產品都在強調‘站在用戶的角度，提升產品的用戶體驗’，因為優秀的用戶體驗就是商機，良好順暢的用戶體驗會極大的提升用戶轉化率，增加用戶的留存率。好的的用戶體驗主要體現在兩種形式：“幫助人們工作更快”和“減少他們犯錯幾率”。牢記“以用戶為中心的設計”在開發產品的每個流程都要把用戶列入考慮的范圍，每一個流程步驟都要代入用戶的使用場景中體驗，想用戶所想。提供優質的用戶體驗是一個重要的，可持續，良性的競爭優勢，用戶體驗形成用戶對企業的整體形象，并以此來界定來與競品的差異。
在產品的整個開發流程中都要考慮用戶有可能采取每個步驟的可能性，并且理解整個流程中每一個步驟用戶的期望值。
表現層：視覺設計，我們使用無論任何設備的產品最先看到的就是表現層，內容、功能和美學匯集到一起來產生一個最終設計呈現；
框架層：界面設計、導航設計和信息設計，框架層用于優化設計布局，以達到界面中元素的最大效果和效率；
結構層：交互設計和信息架構，相對于框架層更加抽象，框架是結構的具體表達方式，明確來元素應該出現在哪里；
范圍層：功能規格和內容需求，結構層明確了產品的各種特性和功能最優的展示組合方式，這些內容構成了產品的范圍層；
戰略層：產品目標和用戶需求，成功的用戶體驗，其基礎是一個被明確表達的“戰略”。知道企業與用戶雙方對產品期許和目標，有助于確立用戶體驗各方面戰略的制定；
在五個層面應該是自下而上的建設，戰略 — 范圍 — 結構 — 框架 — 表現；不同的層面位置考慮的方向和側重點是不一樣的，隨著層面的上升我們考慮的決策變得更加具體，并且涉及越來越精細的細節表現。每一個層面都是根據下面層面來決定的，每一個層面的決定都會影響上層的可用選擇，表現層由框架層決定，框架層是建立在結構層的基礎上，結構層是具有范圍層，范圍層是根據戰略層制定的。
按照產品不同屬性分為兩大類：功能性產品/信息型產品；針對不同的類型將五要素細分展示，功能型產品更加關注的是任務，去思考用戶如何完成這個過程，用戶使用該產品完成一個或多個任務的工具；信息型產品關注的則為信息，產品應該提供哪些信息，并且方便用戶快速尋找，理解，創建一個富信息的用戶體驗；這種把用戶體驗劃分為各個模塊和層面的模式，更有利于我們去考慮用戶體驗中可能出現的麻煩。所有處在同一層面的要素都會決定最終的用戶體驗效果。
優秀的用戶體驗基礎是要有明確的“戰略”立意，知道企業和用戶對產品的期許和目標，才能更好的促進用戶體驗各方面的完善和優化。我們要用過產品獲得什么？用戶通過產品可用得到什么？回答這兩個問題有助于我們更好的明確產品目標和用戶需求，結合兩者我們組成戰略層。
產品目標：目標的制定切記不要太過具體或太寬泛我們需要在這之間找出一個平衡點，為了更好的用戶體驗我們需要保證所作出的決策都不是頭腦發熱拍腦門定出來的，每一個決策，都應該建立在我們確切了解他所帶來的聯動影響效果。明確的定義出成功的條件而不是定義成功的路徑，有時候跑的慢一定不一定就是落后者。既然是賽跑肯定會有終點有結果的產出，我們要明確“成功的標準”制定可追蹤的指標，成功的標準不僅僅影響各階段的決策，也是衡量用戶體驗工作的具體依據，埋點數據采集，上線后的客戶流存率，轉化率，新用戶的增長率，老客戶的使用反饋等等。對驅動用戶體驗的決策而言有意義的成功標準，一定是可用明確與用戶行為綁定的標準，而這些用戶行為一定是可以通過設計來影響的。
用戶需求：明確正確的用戶需求是復雜不易的，因為用戶群體存在很大差異性，確定大致目標用戶后我們還需要精細化的區分，將用戶分成較小的，有共同特性的以此來助力我們更好的明確用戶需求，通過不同的角色群體使用產品來分析他們的需求。在針對用戶需求研究時我們還可以使用一些市場調研（將你想要的信息通過具體，有效的公式化問題，讓用戶提交你正確的答案）；現場調查（完整的，有效且全面的方法，了解與產品使用生活場景最匹配的用戶行為）；創建人物角色（模擬真實用戶使用場景更加貼近用戶，再產品思考中和用戶更感同身受）。戰略應該是用戶體驗中的起點，但并不意味著項目開始之前戰略就完全確定下來，它是可以在整個工作中演變和改進的。
當我們明確了解戰略層后，我們就知道產品應該為用戶提供什么功能和服務，這些也就逐步演變為范圍層。我們要做兩個事情來定義范圍層 —過程和產品。過程的意義在于當產品還在一個雛形時，可以帶動我們去思考流程中可能存在的問題，功能實現的優先級；產品的意義在于明確最終產出的結果，團隊有明確的目標。在這其中文檔的輸出是必不可少的，有計劃性說明性的文檔輸出可以讓我們的工作更加有條不紊的推進下去。我們可以從戰略層抽象出來 — “我們為什么要開發這個產品？”轉而到范圍層變為 — “我們要開發的是什么？”在軟件開發過程中，范圍層確定的是全部功能需求和功能規格。
功能規格：功能規格說明不需要包含產品的每個細節，只需要包含在設計或開發過程中可能出現混淆的功能定義。同時功能規格說明也不需要展望產品未來理想狀態，只需要記錄在創建產品時確定下來的決議。換句話說，文檔不能解決問題，但是定義可以，我們需要不是文檔多么詳細厚重，而是要足夠的清晰和準確。功能說明要明確具體避免主觀語氣，避免出現歧義，盡可能用量化的可檢驗的標準來定義功能有助于我們的驗收。
內容需求：很多時候我們說到的內容指的是文本。但是圖像，音頻和視頻有時候比文字還要重要。這些不同類型的內容結合到一起，相互協作去滿足某一個需求。內容特性想要達到的規模，將對你所做的用戶體驗產生極大的影響，內容需求應該提供每一種特性規模的大致預估，以便在設計過程中作出最為明智的決策。盡可能早的確定某個人來負責每一個內容元素也是非常重要的，避免后期開發實現達不到我們預期的效果。內容清單的輸出也是重要的，究其原因這樣團隊中的每個人都會清楚知道自己負責的哪些部分，明確責任，提高協同效率。
學會確定需求優先級，了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”，把那些需求點梳理出來，找到一種適宜的方式，讓它們符合你長期的規劃，這才是真正的價值所在。確定具體，系統的發展要求，并將任何不符合這些要求的想法作為潛在未來功能的囤積，只有通過這種更慎重的途徑，才可以真正的管理起整個項目過程。
在羅列出項目需求優先級，梳理出大致的流程，我們對于產品將會包括什么主要內容已經有了清晰的構想。然而，這些需求沒有進行全面的整合還是碎片化的存在。而結構層要做的就是整合這些創建一個概念性的結構。結構層適當的將我們關注點從抽象的決策和范圍問題，轉移到更能影響最后的用戶體驗具體因素。但是這里的交互設計和信息架構所產出的東西大部分還是概念性的內容。這兩項內容并不完全是技術，它要求開發者要有共情能力去理解用戶，理解用戶行為操作習慣，使用場景，思考方式等。將了解的這些知識代入我們開發過程中，這樣會使那些不得不使用我們產品的用戶帶來更好的用戶體驗。
交互設計：關注于影響用戶執行和完成任務的元素，即關注用戶所有操作，同時定義“系統如何配合與響應”這些用戶行為。任何一個交互設計的項目都有很大部分牽涉處理“用戶錯誤”當用戶發生錯誤時產品要給出什么提示，并且對于錯誤發生時，如何防止用戶再次發生錯誤？第一個也是最好的防止錯誤的方法，就是將產品設計為不可能犯錯的。第二個避免錯誤的方法就是使錯誤難以發生，即使一些錯誤發生，產品也應該幫助用戶改正錯誤。有效的錯誤信息和容易自我解釋的界面可以在錯誤發生之后幫用戶糾正。當用戶完成一些操作后無法糾正的錯誤，產品就該提供從錯誤中恢復的方式。對于那些不可恢復撤銷的錯誤，提供大量警告就是產品唯一可以預防的方法。
信息框架：研究人們如何認知信息的過程，對于產品而言信息架構關注的就是呈現給用戶信息是否合理并卻具有意義。在以內容為主的網站上，信息架構主要工作就是設計組織分類和導航的結構，讓用戶可以高效率，有效的瀏覽網站的內容。信息框架與信息檢索和分類體系密布可分，針對分類體系我們可以從上到下或從下到上這兩種方法來建立。
從上到下的信息架構從戰略層考慮，先從最廣泛的，有可能滿足決策目標的內容與功能開始進行分類，然后再依據邏輯細分出次級分類；從下到上根據對“內容和功能需求分析”而來，從已有的資料開始，先把他們分為最低級別的分類，然后再歸納到高一級分類，從而逐步構建出反應我們產品目標和用戶需求的結構。這兩種方法各有弊端，從下而上容易將內容的重要細節忽略，從下而上使架構過于精準的反應內容，對于后期的維護變動不是很靈活。因此我們要盡可能的從兩種方式中尋找一個平衡點。一個高效結構的優點就是具備“容納成長和適用變動”的能力。一個適應性強的信息架構體系，既可以把新內容作為現有結構的一部分容納進來也可以當成一個新的部分加入。
在充滿概念型的結構層牽引出大量需求后，這些需求都是來自我們戰略目標的需求。在框架層我們要更進一步的提煉這些需求結構，確定詳細的界面外觀，導航和信息設計，這樣才能使結構變得更加豐滿。框架層需要處理更為細節問題，在結構層我們建立了一個框架和交互設計。在框架層我們關注點就是界面的元素以及它們之間的關系。當我們提供用戶做某些事情的能力是，屬于界面設計；當我們提供用戶去某個地方能力，則屬于導航設計；當我們要傳達想法給用戶時，那就是信息設計。
界面設計：成功的界面設計就是要讓用戶一眼就看到“最重要的東西”，而另一方面，不重要的東西，不應該被注意有時候則它們根本就沒有出現在那。設計界面，平面最大的挑戰之一就是弄清楚用戶不關注的東西并減少他們的比重。將第一要表達的要素快速傳遞到用戶。
導航設計：任何一個網站的導航設計必須同時完成三個目標：1.它必須要提供用戶在網站的跳轉方式；2.導航設計必須傳達出這些元素和它們所包含內容的關系；3.導航設計必須傳達出它的內容和用戶當前瀏覽頁之間的關系；這三個目標就是必須要納入考慮的范圍，清晰的告知用戶“他們在哪里”以及“他們能去哪里”把用戶當成是“傻瓜上帝”。
習慣和反射作用是我們與這個世界交互時的基礎，我們在使用互聯網產品這么多年的時間中，絕大部分的操作效果和下意識的操作方式已經被養成，所以要讓你的界面與用戶早養成的習慣保持一致是很重要的，界面要與它自身保持一致。這并不是說，每一個界面問題的解決方式都必須毫無條件的死守這些習慣。當某種不同的方式有明顯的益處時，你反而應該嘗試謹慎的違背一些習慣，到那時需要我們做的每一個決定都要有充分的，明確的理由。有效的使用比喻，就是減少用戶在“理解和使用你的產品功能”是的猜忌，讓用戶第一眼就知道你的圖標表達的是什么意思，要有強指示性質。
內容，功能和美學匯集的地方，完成其他四個層面的所有目標并同時滿足用戶的感官感受。在框架層，我們主要解決放置的事情；在界面設計考慮可交互的元素布局；導航設計考慮在產品引導用戶移動元素安排；而信息設計考慮傳達給用戶的信息要素的排布；在向上就是表現層，我們這里要解決的就是彌補“產品框架層邏輯排布”的感知呈現問題。我們每一次經歷最終都是由我們的感覺器官來進行的。在設計的過程中這是用戶體驗的最后一站：決定我們設計最后被哪些（視覺/聽覺/嗅覺/觸覺/味覺）感受器官受到呢？
嗅覺和味覺對于用戶體驗設計師是很少考慮的范圍；觸覺更多的用于工業設計領域，關注用戶和產品之間的物理接觸；聽覺可以應用到不同類的產品中，如開機/新消息提示等；視覺：這是用戶體驗師最得心應手餓領域，幾乎所有的產品都會涉及視覺設計。代替用“什么具有美感”來評估一個視覺設計方案，應該吧注意力集中在他們能否“良好運作”，對于那些上層決定的目標，設計能否賦能幫助企業更好的變現，設計的本質就是用合適的方式幫助用戶/企業完成需求目標；
忠于眼睛評估一個產品視覺設計最簡單的方式，就是你的視覺首先落在什么地方？哪個設計要素第一時間吸引注意力？它們對于戰略目標是最需要表現的東西嗎？用戶第一時間接受的信息是你想要表達的嗎？設計還是要把握4大基本原則：對比；重復；對齊；親密性；
不管你的產品多復雜，用戶體驗都是一樣的，創建良好的用戶體驗最重要的工作內容就是大量收集解決細微的問題。“成功的方法”和“注定失敗的方法”歸根究底就是：1.了解你正在試著去解決的問題；2.了解這些解決辦法所造成的后果；必須要同時考慮五個層面的全部因素，這對于創建成功的用戶體驗至關重要。
提成正確的問題，面對那些用戶體驗需要解決的糾纏不清的問題，要抱有一種正確心態，不要以“節約項目時間或金錢”名義對用戶體驗問題敷衍了事。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系
作者：許小鵬 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn