源起
由于之前曾經在后臺系統開發公司工作過的緣故，所以有些后臺管理系統界面的產出。后來雖然從那家公司離職，但也接到過一些后臺界面設計和優化的項目，前前后后也快十來個了。
這里想分享下一些關于后臺界面設計的觀點（tucao）。
一，定義好表格規范強于為每個表格出設計稿
表格是構成后臺使用界面的重要組成之一，聚合了眾多信息并提供操作入口。并且后臺系統中一般會需要數量眾多的表格。
這種情況下如果每張表格都出設計稿，是一件很費時費力的事情，更關鍵的是對開發落地不一定有什么實際意義。
所以這種情況下，定義好表格規范要遠遠強于為每個列表出設計稿。
下圖是在某系統設計中定義的表格規范，定義了不同信息之間的間距，信息塊內部的浮動間距等。
二，考慮未來頁面信息密度增高的情形，避免使用過大的組件。
2019年在某系統設計中，由于初期頁面內容比較少，為了讓用戶擁有更大的點擊操作區域，利用頁面空間，所以讓下拉菜單，輸入框等控件略微大了一點點。
后來頁面內容逐步增多，特別是篩選功能越來越多時，就尷尬了。使用原有的控件，篩選區域就會臃腫不堪，擠占信息展示區域的空間。新設計控件又會與其他頁面不統一，修改工作量會很大。
所以即便頁面信息少，也要考慮頁面信息密度增高的情形，避免是使用過大的組件。
三，根據用戶常用的顯示器分辨率設計后臺
一般情況下我們會按1920px的寬度出設計稿，然后再交付給開發做自適應。
但是后來發現頁面信息密度很高時，簡單粗暴的自適應難免會不盡人意。
并且實際工作環境中，很多后臺的使用者幾乎全部情形都是用筆記本，這種情形下使用筆記本的尺寸設計更為合適，或者使用1440px的寬度出設計稿，平衡對大小屏幕的設計考慮。
最好的方式當然是與需求方充分溝通，商定設計稿寬度。很多需求部門的電腦都是統一采購的，顯示器分辨率是全部統一的。
2020年某ERP設計項目，一張表單以1920px寬度出了設計稿，后來應甲方需要，另外單獨出了一版1200px版本。
四，與開發討論使用何種組件庫，基于組件庫提供界面優化方案
在實際的后臺項目開發過程中，很多項目并不使用自己定制的組件庫，而是使用第三方框架。
這種情形下最合適的方式是與開發討論使用何種組件庫，基于組件庫提供界面優化方案，基于組件庫提供高密度復雜頁面的編排，重難點頁面的設計。
設計的產出應該以實際實現效果為導向，而不是止步于設計稿。
幾個常用的組件庫
https://www.iviewui.com/
https://element.eleme.cn/#/zh-CN/resource
https://ant.design/docs/spec/introduce-cn
五，嘗試考慮使用卡片展示列表信息
后臺頁面中經常會存在大量列表的情形，如果某個列表字段不多并不會隨便增加，可以嘗試一排信息放在一張卡片上，使用卡片展示列表信息，改變頁面單調的版式。
不過字段，操作按鈕一旦增加，就比較麻煩了。
六，導航區不要過大，盡量給工作區留出空間。
如果使用固定寬度的導航區，過寬的導航區會擠占工作區的空間，在筆記本等小屏幕電腦上會更加明顯。所以需要合理控制大小。
七，靈活使用不同板塊樣式，分隔方式區分高密度頁面中的信息
后臺設計中經常會遇到一個頁面需要顯示很多不同類型信息的需求，可以使用不同底色，卡片，不同層級的分隔線來分割版面，實現不同類型信息的區別顯示。
應客戶需要，這張客戶詳情頁面只能以彈窗形式出現。反復使用底色分割，在盡可能簡潔的同時將不同信息區分開來。
結語
以上的觀點僅代表個人的看法，可能有一些無法令人接受，歡迎各位一起探討，或者給出更好的解決方案。
感覺有幫助的話點個贊喲~
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要。卡片式設計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在UI設計中，很多設計師都苦惱于自己的界面設計“沒有設計感”，感覺看起來“不高級”，到底是為什么呢？其實就是在一些細節的處理上略缺火候，掌握下面這15個小技巧，能讓你的UI界面質感翻倍！
1、雙重陰影，突出立體感
設計師在設計時，為了突出里按鈕的立體感，往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框，可以讓陰影效果顯得更清晰，而不會與原本的按鈕混為一體。
2、只用一種字體，保持視覺一致性
為了讓設計更美觀，許多設計師會在一個界面使用多種字體，但實際上，一個界面里只使用一種字體更為美觀，可以幫助界面產生統一的設計效果。
3、一種字體，不同字重
如果選擇一種字體進行設計會稍顯單調，那可以根據內容的輕重優先級，來選擇不同的字重來做以區分。
4、適當留白
當內容豐富時，更需要適當的留白，才能讓設計具有呼吸感，更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本，總會讓人閱讀有困難，可以采取加粗、添加漸變等方式來處理文本，讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性，應該使用顏色對比、尺寸或標簽，來確保該按鈕突出。
7、字號越小，行距應該越寬
字號越小，閱讀起來障礙更明顯，增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間，建議給出進度提示，讓用戶可以隨時了解下載進度，不會中途取消下載。
9、同個界面，文本長度盡量一致
基于人的閱讀習慣，研究總結出，單列頁面里，45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度，可以明確突出所選元素。
12、標題的行高不要太高
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍。
13、大寫標題，提高字間距
當標題全部為大寫字母時，增加字母間距可以提高可讀性，同時又增強了一絲設計感。
14、增添頁面動態
可以在加載中添加一些提醒讓用戶理解當前運行狀態，例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作（例如，注冊或登錄），應該直接放在醒目位置，而非隱藏在菜單欄中。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
時我們傾向于將我們的設計視為藝術品。但如果我們用這種方式來思考它們，就意味著它們不會準備好面對“現實世界”的不確定條件。但是，設計一個可以隨時改變的界面也很美 - 而且，讓我們承認它，接口確實一直在變化。我最喜歡設計移動應用程序的一個方面是，從最初的概念到你對所有界面細節進行微調和拋光的時候，這是一個包含許多步驟的過程。
我們是視覺思考者，擁有訓練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設計階段的原因，這也是我們可能對其他任務感到厭倦的原因之一。
這也意味著我們經常推遲工作流程的其他重要部分：定義用戶需求和目標，草擬任務流程，處理信息的所有細節和交互設計等。這些是同樣重要的是，它們更抽象，更難以讓人想象它們將如何成為最終產品的有形部分。
當我們正在進行視覺設計時，所謂的像素完美哲學可能是一個陷阱，使我們花費更多的時間來制作細節，直到最小的細節處于界面的“完美”位置。這導致一代設計師使用Dribbble和Behance主要顯示應用程序和網站的精美屏幕，并且更關注外觀而不是設計實際工作方式。在現實世界中，事情往往不如我們期望的那樣好。
就個人而言，我認為最好的設計（當談到用戶界面設計時）不僅外觀和感覺良好，而且還可以優雅地響應變化的條件甚至不可預測的情況。
在構建產品的漫長道路上，設計師需要更多的協作，而不是專注于視覺設計。這正是我為了這篇文章專注的地方。在接下來的幾段中，我將向你提供一些提示和技巧，說明如何將你正在進行的應用程序設計用于測試，并了解它是否已準備好發布到市場。
在不完美中尋找美
當我在大學學習平面設計時，他們教會了我們平衡，對齊，比例和張力的美感，以及如何在空間中定位元素，使它們和諧悅目。憑借這些知識，我的生活發生了變化，我開始以不同的眼光看世界。后來，我開始設計界面，我試圖將相同的原則付諸實踐，屏幕上的所有信息都應該形成一個非常令人滿意的視覺構圖。
如果你將這些原則應用于移動應用程序設計，那么我們發現必須顯示適量的信息。例如，如果一個屏幕必須列出人們的姓名，設計師通常會選擇一些短而普通的名字，并將它們完美地排列在一起，沒有留下任何可能破壞設計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設：在混亂和不完美中沒有美，盡管這兩個方面在現實世界中經常出現。但是視覺界面并不是一件值得欣賞的靜態藝術品; 它們是動態的，功能性的空間，可以改變和適應每個人使用它們。我們不應該屈服于純粹為美學設計的誘惑，因為我們永遠無法控制界面必須呈現給人們的一切。
相反，我們必須設計變革！這就是日本人所說的wabi-sabi，一個“以接受短暫和不完美為中心的世界觀”。
因此，以不同的方式思考和設計是很重要的：
● 嘗試以多種方式在你的設計中呈現數據;
● 盡可能使用真實數據。
當你嘗試以幾種方式呈現數據時，包括一些不可預測的數據，你將能夠測試界面是否已準備好處理超出設計“舒適區”的這些情況。此外，為極端情況做好準備。
如果你已經推出了該產品，這將更容易，因為你可以關注實際數據并將其用于你正在進行的設計過程中作為參考。但是如果你正在研究一些新的東西，那么你將不得不深入挖掘，做一些研究，并嘗試了解以后如何信息。你還可以與后端團隊的開發人員討論此問題，他們將能夠更好地向你解釋將存儲和呈現的數據類型。
我給你一個更具圖形的例子，我的開發者朋友稱之為“漂亮的朋友綜合癥”。當我們設計一個包含人物圖片的屏幕時，如用戶檔案，我們傾向于使用在設計中看起來很好并且很漂亮的人的照片。然而，當他看到這樣的設計時，我的朋友說：“我希望我有朋友這么帥。”
因此，“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣，你就可以測試重疊元素在不同背景下的外觀，讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應用程序的工作方式，我們天生就是樂觀主義者。我們認為一切都會快速順利地進行，而且不會中斷，因為......為什么不呢？這就是為什么我們有時會忘記如何設計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例，如果突然互聯網連接中斷，會發生什么？或者，如果瀏覽器在執行任務時嘗試連接到API時出錯？如果連接速度太慢，是否會有加載指示器（例如微調器或進度條），或者在加載實際數據時是否會有一些占位符填充顯示塊？那么刷新應用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談論用戶所犯的錯誤（例如，在填寫表單時犯了錯誤），而是關于不受其控制但仍然發生的錯誤。在這種情況下，與開發人員交談，并了解不同屏幕上可能出現的問題，然后設計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執行不同的操作。
無論如何，確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應用程序的整個布局。然而，當我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目，那么請向前看并考慮下一步：在執行操作時是否會顯示加載狀態？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態一樣，同樣也適用于單個元素。
此外，請考慮產品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執行動作。如果這對你來說太具有挑戰性，因為你之前可能已經多次這樣做了，現在它變成了一種自動化的任務，并問同事，朋友或活躍用戶看看設計或原型?？吹狡渌耸褂貌⑴c你的設計進行互動可能很有啟發性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時，我通常會將手機放在我旁邊，以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在Android平臺上）; 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設備。
在為各種屏幕尺寸和方向準備設計時，不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況，以及如何進行必要的調整，即使它意味著偏離原始設計。
在這些情況下，我們之前討論過的相同原則仍然適用：不可預測的情況，不同類型的內容，可變數量的信息，缺少數據等等。你必須針對各種可能的場景進行設計。不要陷入將屏幕設計為產品的單獨部分的陷阱，它們都是相互連接的。
這不僅對你有用，而且對開發人員也有幫助，他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么，明天你可能需要
你可能已經注意到，本文中許多要點的目標是減少意外情況。即便如此，在很多情況下你也無法得到明確的答案。開發人員經常會問，“那么，如果我這樣做會發生什么呢？”指出你以前沒有考慮過的潛在結果。
如果發生這種情況，那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考，并考慮如何將該特定問題的答案設計為以靈活的方式工作，以便你以后可以重用它。
畢竟，這就是我們UI設計師所做的 - 我們設計和定義適應未預料到的狀態，條件和流程的靈活系統。將你的界面視為移動，更換智能部件的生動生態系統，而不是單個像素塊的集合。
在此過程的這一部分中，你需要與團隊中的開發人員密切合作，主要是為許多不同情況定義一組行為規則。但保持良好的平衡 - 盡量不要過度設計。用一點常識來設定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住，良好的設計系統是靈活的，并且在某些情況下為規則的某些例外做好準備。
另一方面，想一想你已經設計過的元素如何調整以適應新的情況。如果你創建一個設計組件庫，你將會看到更好的結果，因此，只需快速瀏覽一下庫，你就會知道是否需要從頭開始設計某些東西，或者你可以使用現成的東西。
結論
基于設計系統的優雅解決方案具有明確定義的問題將使我們工作中的視覺設計更加有趣，因為我們可以專注于界面的改進，拋光和愉悅，而無需無休止地迭代。當我們過早地跳到視覺效果時，我們必須同時解決問題并制作界面，這通常會導致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰性，但過了一段時間你會喜歡在限制范圍內工作。這也將改變你的思維方式，并希望幫助你擺脫對視覺細節的關注。你將成為一個更加完善和有能力的用戶體驗設計師，使用適當的可交付成果，而不僅僅是生成無窮無盡的視覺模型和組合。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
直播是2020年到2021年移動互聯網的重要賽道，在以百度APP為核心的移動生態之下，缺少一個獨立的直播APP去承載整個百度直播體系和被直播所吸引的用戶。為了讓用戶“有出有進”，促成了這次的產品設計。
在這樣的產品孵化階段，我們希望產品在具有直播特性的同時，能夠與其他泛娛樂類的直播產品打開差異化，并且有足夠的記憶點讓它在眾多直播產品中被人們所記住并喜歡，那么品牌的塑造和品牌的融合就尤為重要。
所以，產品的設計圍繞著泛娛樂直播進行，進行功能的設計和梳理，其中視覺設計便以品牌為中心。
上述的內容，準備以上下兩篇文章來做闡述和展示。
這篇文章，主要以市場上的界面案例，來粗淺地聊聊品牌元素如何融入到界面設計中。
下一篇正在準備中，將以我剛來到百度時設計的一個獨立直播產品為例，盡可能完整地呈現以強化品牌、IP應用為核心的產品設計過程。
百度網盤
在網盤團隊去年的改版中，將積木的品牌概念，融入到icon的設計中，取得了巨大的成功和市場反響，蘇大牙的那篇復盤文章，一直在產品設計上影響著我的思路。
2.谷歌系APP圖標
谷歌如今統一了谷歌系產品的圖標風格，充分地在顏色和風格上體現了谷歌的品牌意識，如今我們一見到此類的圖標，第一反應便是，這是不是谷歌的APP？
3.映客直播
映客直播在啟動頁、tabbar，都把貓頭鷹的元素融入進來，在運營設計中，也更多的使用貓頭鷹剪影作為主體畫面的承載。
4.最右
最右在登錄相關的頁面，使用IP+品牌色的方式，強化品牌意識，在下拉刷新中，融入IP進行趣味性的設計，很好地詮釋了娛樂性、年輕化的產品應如何做情感化設計。
5.快手電丸
快手電丸在個人主頁默認圖、頭像默認圖、加載、頁面中的功能引導，都加入了IP形象強化品牌。
5.躺平
躺平是在我最近的產品體驗中，IP運用和品牌塑造最完整的產品，它成功的把“躺平”這個概念，應用到了IP形象上，再由IP形象對界面中的各處進行應用，延伸這個品牌概念。而且應用范圍并不僅僅局限于彈窗、啟動頁、刷新等常規IP應用點，更是在界面之中做到了自然合理的應用。
小結：
在界面設計中，對于品牌的強化，除了將品牌理念抽象化進行icon等圖形的設計，更多地產品喜歡采用具象的IP形象進行合理植入來進行品牌概念的傳達。
在IP的應用中，啟動頁、加載動畫、下拉刷新、彈窗裝飾、默認圖片等是常規的應用場景，除此之外，在卡片標題、功能入口、內容頁裝飾等地方出現IP的應用，更加能給用戶帶來驚喜感。
品牌在界面中的植入，在于小而有趣，而不在于多少，在合適和驚喜的地方出現，才能向用戶傳遞出情感。同時可以看出，在界面中應用的IP形象，基本不會出現3D化的情況，在年輕化、娛樂向的產品中，IP本身也沒有明顯的性別傾向。
總結下，無描邊、扁平、2D、無性別等特征，更加適合在界面中應用。少配色、輕漸變、結構簡單、應用場景尺寸越小，IP使用比例越小，這些原則也更有利于IP應用的合理性。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Color是眼睛從光中感知到的感官印象，它以各種形式的概念和情感進行翻譯。對于藝術家來說，正確的操作非常重要，因此在整個歷史中，它已經以多種方式和不同的方法得到了理論化。
繪畫，印刷，攝影，圖形設計和界面設計使用色彩理論來喚起特定的思想和觀念，并利用色彩的非語言能力，而不是其他較慢的交流形式。
在界面設計中，從增強品牌知名度到在購買按鈕上產生更多點擊，色彩心理被用來影響用戶可能擁有的感知。其他重要結果，例如改進的可用性，也可以是良好的顏色掌握能力的結果。
在本文中，我將介紹設計界面時經常用于顏色選擇的六個注意事項。
特定的顏色與某些情感相關，但并非總是如此。自從我們出生以來，我們的眼睛就了解現實世界的色彩，隨著時間的流逝，記憶會將這些色彩與某些體驗和元素相關聯。這種熟悉程度可以為用戶提供有關界面目標的一些上下文。
當然，這不是絕對的，因為人類對現實的理解是非常不同的，并且不能以其所有形式進行概括。德國藝術家約瑟夫·阿爾伯斯在他有條不紊的書，彩色的互動，指出色的主強的特點就是相對論。西方國家的紅色可能代表著危險和邪惡，但在中國，紅色代表著幸福，歡樂和慶祝。盡管如此，他還指出，許多人以相同的方式感知某些顏色，例如與生態相關的綠色或粉紅色代表著女性氣質。
和諧的色彩使元素具有邏輯感。有很多方法可以創建色彩和聲。其中之一是通過使用類似的顏色，即在色輪中彼此接近的顏色。
為什么類似的顏色具有吸引力？因為這是自然產生的色彩行為。日落使天空從橙色變成紫色，海洋從藍色變成綠松石，彩虹將所有七種顏色融合在一起。我們可以得出結論，視線會以類似的顏色找到自然的愉悅感。
由于溫度也會產生相當大的協調性，因此建議僅在暖色或冷色之間保持此顏色范圍。還可以利用這些顏色的飽和度和亮度來創建類似物的使用深度。這完全取決于您要創建的效果以及界面顯示的內容。
色彩對比使界面更具動感。色彩補充的另一種形式是通過使用補色來實現的，補色是在色輪中彼此面對的補色。通過使用互補色元素，可以在設計中產生對比和動態效果。
對比顏色的好處包括，可以賦予界面能量和運動效果，以及增強一些我們希望用戶注意的相關點。要使這些顏色和諧相處并不容易，因為它們的濫用會造成視覺混亂，并使眼睛不適。比例是關鍵。
要了解有關色彩對比的更多信息，我推薦瑞士人Johannes Itten撰寫的《色彩的藝術》一書，其中介紹了七種對比類型的理論：色調，溫度，明暗，互補，飽和度，同時和定量。無論我們選擇哪種顏色對比，都應在整個Web /應用頁面中進行維護，以確保設計的一致性。
色階可減輕認知負擔。保持色調，但將閃電修改為不同的水平有助于分離元素，而不會使組合物過載。
UI設計中的色階也受自然影響，不僅受樹木葉子，天空或海洋等元素的影響，而且受物體和陰影的影響。人眼會感覺到相同顏色的許多變化，具體取決于照明，深度甚至紋理。人們期望UI顏色像他們在現實世界中一樣就不足為奇了。
可以說，使用色標的目的是避免添加大腦必須處理和不必要理解的新顏色或色調。界面設計越容易理解和越快，它將為用戶帶來更多的樂趣。
定義顏色比例可平衡組成。越來越多地使用顏色可以使樣式更清晰，并避免不必要的顏色沖突。
顏色層次結構對于定義一種氛圍非常重要，同時，它也是構成網絡中所有元素的主要色彩。在當前的UI設計趨勢中，白色是最受歡迎的顏色，因為白色可以保持界面干凈，突出顯示交互顏色并提高可讀性。但是，如果要在特定頁面上創建更具沉浸感和藝術感的效果，則選擇更飽和的顏色確實會很好。
交互顏色在執行過程中必須清晰且在界面中保持一致。號召性用語必須相對于背景具有足夠的對比度，并且相對于其他組件必須具有足夠的視覺重量，以便用戶可以輕松識別它們。
但是，交互色并不總是以最飽和或最亮為特征，而是以其色調，形狀，大小或對比度在屏幕上與其他元素脫穎而出。因此，交互顏色的有效性將通過用戶識別交互區域并以較少的思想執行任務的速度來衡量。
另一方面，次要行動號召力更輕，并且在視覺上更接近信息元素。在我們的耐克應用示例中，配置和聲音按鈕指示這些是交互作用，原因是形狀而不是顏色。按鈕的這種層次結構很重要，因此用戶可以對元素進行自然排序，并避免在每個屏幕上使用多個主要的號召性用語的不良做法。
總之，顏色是事物的重要影響者，它影響事物對環境的感知，并直接影響其他顏色甚至自身。盡管對其理論的深入研究可以改善我們對設計的掌握，但是創建專業配色方案的過程很大程度上取決于我們的視覺體驗和對現實世界的感知。讓我們開始訓練我們的眼睛。
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
情感化設計在我們的決策過程中起著至關重要的作用，因為加入情感化的設計可以改變與產品交互的人的整體現實。
人類是一種情緒驅動的物種，我們選擇某些產品并不是因為它們有意義，而是因為我們認為它們會讓我們感受到不一樣的感覺。也正因如此，在未來的界面將在產品設計的基礎上使用情感的概念，人們使用的經驗將基于智商（IQ）和情商（EQ）。
本文試圖展望未來，看看我們將在未來十年內設計哪些接口。我們將仔細研究三種情感化界面設計的互動：
語音
增強現實（AR）
虛擬現實（VR）
未來情感化界面的實際例子
界面如何？即使我們還沒有回答這個問題，我們也可以討論接口可能具有哪些特性。在我看來，我確信我們最終將擺脫充滿菜單，面板，按鈕的接口，并轉向更“自然的界面”，也就是情感化的界面。未來的界面不會被鎖定在物理屏幕上，而是會集合五種感官的力量。因此，他們需要較少的學習曲線，理想情況下，根本沒有學習曲線。
情商情緒在商業中的重要性
除了使體驗更自然并減少學習曲線之外，為情感設計還為產品創造者帶來了另一個好處：它提高了用戶對產品的采用率?？梢岳萌祟悓η榫w的行動能力來創造更好的用戶參與度。
真實的語音界面
使用語音作為主要界面的產品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進行日?；顒?，例如設置鬧鐘或預約。但是，目前市場上可用的大多數語音交互系統仍然具有自然的局限性：它們不會考慮用戶的情緒。因此，當用戶與Google Now等產品進行互動時，他們對與機器進行通信具有強烈的溝通感 - 而不是真正的人。系統可預測地響應，并且他們的響應是腳本化的，與這樣的系統進行有意義的對話是不可能的。
但是目前市場上有一些完全不同的系統，其中一個是Xiaoice，一個社交聊天機器人應用程序。這個應用程序的核心是情感計算框架，該應用程序的基礎是，首先與用戶建立情感聯系。Xiaoice可以動態識別情緒，并在與相關響應的長時間對話中吸引用戶。結果，當用戶與Xiaoice交互時，就像是與真人交談一樣。
Xiaoice的局限在于它是一個基于文本的聊天應用程序。很明顯，你可以通過基于語音的交互來實現更強大的效果（人聲具有不同的特征，例如可以傳達強大的情感譜的音調）。
我們中的許多人已經在電影“她”（2013）中看到了基于語音的互動的力量。Theodore愛上了Samantha（一個復雜的操作系統）。這也使我們相信，未來基于語音的系統的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象，他只有她的聲音。要建立這種親密關系，必須產生反映一致性格的回應。這將使系統既可預測又值得信賴。
技術離Samantha這樣的系統還有很長的路要走，但我相信語音優先的多模式接口將是語音接口發展的下一章。這樣的接口將使用語音作為主要交互方式，并在創建和建立連接感的上下文中提供附加信息。
為Brain.ai設計的語音界面示例（圖片來源：Gleb Kuznetsov）
AR體驗的演變
增強現實（AR）被定義為現實世界之上的數字覆蓋，并將我們周圍的對象轉換為交互式數字體驗。我們的環境變得更加“智能”，用戶對手指尖上的“有形”物體產生幻覺，從而在用戶和產品（或內容）之間建立了更深層次的聯系。
使用AR重新構想現有概念
AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西，這有助于我們更多地了解我們周圍的環境。此AR屬性可幫助設計人員使用熟悉的概念創建新的關卡體驗。
例如，通過使用移動AR，可以創建新級別的飛行體驗，允許乘客查看有關其班級或當前航班進度的詳細信息：
AR在空中客車A380的飛行體驗中。（圖片來源：Gleb Kuznetsov）
AR幫助我們找到通過空間的方式，并一目了然地獲得所需的信息。例如，AR可用于為您當前的位置創建豐富的上下文提示。被稱為技術SLAM（小號 imultaneous 大號 ocalization 甲 ND 中號 apping）非常適合此。SLAM允許實時映射環境，并且還可以將多媒體內容放入環境中。
為用戶提供價值的機會很多。例如，用戶可以將他們的設備指向建筑物，并在其屏幕上了解更多信息。它可以顯著減少工作量，并通過允許導航和訪問實現輕松的情感體驗。
在上下文中提供其他信息（圖片來源：Gleb Kuznetsov）
我們周圍的環境（例如墻壁或地板）可以成為交互場景，過去僅限于我們的智能手機和計算機。
你在下面看到的概念正是如此; 它使用物理對象（白墻）作為通常使用數字設備傳送的內容的畫布：
交互式墻的概念 - 在現實世界之上的數字覆蓋。（圖片來源：Gleb Kuznetsov）
避免信息過載
我們中的許多人都看到了名為“超現實”的視頻。在這段視頻中，物理和數字世界已合并，用戶被大量信息所淹沒。
技術允許我們同時顯示幾個不同的對象。當它被誤用時，很容易造成過載。
信息過載是一個嚴重的問題，對用戶體驗產生負面影響，避免它將成為AR設計的目標之一。精心設計的應用程序將使用AI的強大功能過濾掉與用戶無關的元素。
高級個性化
當系統實時地根據用戶的需求和期望來管理內容或功能時，就會發生數字體驗的個性化。許多現代移動應用程序和網站使用個性化概念來提供相關內容。例如，當您訪問Netflix時，您看到的電影列表會根據您的興趣進行個性化。
AR眼鏡允許創建新的個性化水平，即“高級”個性化水平。由于系統“看到”用戶看到的內容，因此可以利用此信息提出相關建議或在上下文中提供其他信息。想象一下，你很快就會戴上AR眼鏡，轉移到你視網膜的信息將根據你的需要量身定制。
從增強現實走向虛擬現實，創造沉浸式體驗
AR體驗具有自然的局限性。作為用戶，我們在內容和內容之間有明確的界限; 這條線將一個世界（AR）與另一個世界（現實世界）分開。這條線引起了AR世界顯然不真實的感覺。
您當然可能知道如何解決這個限制，即使用虛擬現實（VR）。VR并不是一種新的媒介，但只是在過去的幾年里，技術已經達到了允許設計師創造身臨其境體驗的程度。
沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時，你的大腦很難處理你收到的信息是否真實。關于VR體驗如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋：
以下是設計人員在創建沉浸式虛擬環境時需要記住的內容：
1.寫一個故事
有意義的VR有一個強大的故事的核心。這就是為什么在你開始設計VR環境之前，你需要為用戶旅程寫一個敘述。一個稱為“故事板”的強大工具可以幫助您。使用故事板，可以創建故事并檢查所有可能的結果。當您檢查故事時，您將看到何時以及如何使用視覺和音頻提示來創建身臨其境的體驗。
2.與角色建立更深層次的連接
為了讓用戶相信VR中的所有內容都是真實的，我們需要創建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應該是實際的手 - 而不僅僅是一個操縱的復制品?？紤]不同的因素（如性別或膚色）至關重要，因為它會使交互更加真實。
用戶可以看到他或她的手，看他們看起來像一個角色。（來源：leapmotion）
也可以將現實生活中的一些對象帶到VR環境中以創建此連接。例如，一面鏡子。當用戶查看鏡像并在反射中看到他們的角色時，它可以在用戶和虛擬角色之間實現更真實的交互。
虛擬現實用戶會查看虛擬鏡像，并將自己視為VR環境中的角色。致謝：businesswire。
3.使用手勢代替菜單
在設計沉浸式VR體驗時，我們不能依賴傳統的菜單和按鈕。為什么？因為通過顯示菜單來打破沉浸感相對容易。用戶會知道他們周圍的一切都不真實。設計師不需要使用傳統菜單，而是需要依賴手勢。設計界仍然在定義使用手勢的通用語言，參與這項活動是有趣和令人興奮的運動。棘手的部分是讓用戶熟悉并可預測手勢。
Hovercast VR菜單試圖將現有的交互概念重用于VR體驗。不幸的是，這個概念可以打破沉浸感。新媒體需要新的互動模式。
4.與VR環境中的元素交互
要創建一個感覺真實的環境，我們需要讓用戶能夠與該現實中的對象進行交互。理想情況下，環境中的所有對象都可以以允許用戶觸摸和檢查它們的方式進行設計。這些物體將充當刺激，并將幫助您創造更加身臨其境的體驗。觸摸對于探索環境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。
5.VR
VR中分享情感有一個真正的機會，成為一個新的社會體驗水平。但為了實現它，我們需要解決一個重要問題，即將非語言線索帶入交互中。
當我們與其他人互動時，我們獲得的信息的重要部分來自肢體語言。驚喜，厭惡，憤怒 - 所有這些情緒都在我們的面部表情中，在面對面的互動中，我們從眼睛區域推斷信息。當人們在VR環境中進行交互以創建更真實的交互時，提供此信息非常重要。
好消息是頭戴式設備（HMD）將很快涵蓋情感識別。幾乎任何人與人之間的互動都將受益于VR中的面部表情。
在VR空間分享情感（來源：MITReview的 Rachel Metz ）
6.為VR環境設計聲音和音樂適合
音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音，就不可能創造出真正身臨其境的體驗。聲音既可以用作背景元素（即風的環境聲音），也可以用作方向性的。在后一種情況下，聲音可以用作提示 - 通過播放方向性（聲音來自哪里）和距離（可以將用戶的注意力集中在特定元素上）。
在為VR設計音頻時，制作聲音3D至關重要。2D聲音不能很好地用于VR，因為它使一切都太平。3D聲音是您可以在周圍的各個方向聽到的聲音 - 前方，后方，上方和下方 - 遍布整個地方。您不需要專門的耳機來體驗3D聲音; 可以使用HMD的標準立體聲揚聲器來創建它。
頭部跟蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現至關重要。這就是為什么當用戶移動他的頭部時，聲音應該根據頭部運動而改變。
7.預防暈車
動是VR的主要痛點之一，這是一種在視覺感知運動和前庭系統的運動感之間存在分歧的情況，而讓用戶在體驗VR時保持舒適至關重要。
有兩種流行的理論導致VR中的暈動?。?
“感覺沖突”理論：根據這一理論，暈動病的發生是由于預期的運動和實際經歷的運動之間的感覺上的不一致。
“眼動”理論：在“ VR書：虛擬現實的以人為本設計 ”一書中，杰森杰拉德提到暈動病的發生是因為保持場景圖像在視網膜上穩定所需的不自然的眼球運動。
以下是一些提示，可以幫助您防止用戶接觸到病箱：
身體運動應與視覺運動相匹配。有時即使是小的視覺抖動也會對體驗產生巨大的負面影響。
讓用戶在移動場景之間休息（這在VR體驗非常動態時尤為重要）。
減少虛擬旋轉。
結論
當我們考慮產品設計的現代狀態時，很明顯我們只是處于冰山一角，因為我們僅限于平面屏幕。
我們正在目睹人機交互（HCI）的根本轉變 - 重新思考數字體驗的整體概念。在接下來的十年中，設計師將打破玻璃（我們今天所知的移動設備時代）并轉向未來的接口 - 復雜的語音接口，先進的AR和真正的沉浸式VR。當談到創造一種新的體驗時，必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。
如果您想了解更多的前瞻信息和權威專家普修的專業性建議，就留言聯系我們吧！
來源：Gleb：Designing Emotional Interfaces Of The Future
https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/
<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
<img src="https://img.zcool.cn/community/0186295d26b093a801214837432998.jpg" style="margin:22px auto 0px;padding:0px;outline:none;box-sizing:inherit;display:inline-block;vertical-align:top;max-width:100%;" />
</p>
<p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
用戶調研 丨 HMI設計 丨 UE/UI設計 丨 HMI培訓 丨 HMI評測 丨 體驗咨詢
</p>轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
項目可以簡單得理解為是氣象災害等級地圖展示系統，主要展示了圖表、表格、災害等級五色圖分布地圖
設計需求
1、逐步確認
項目的需求分析是通過客觀的業務數據逐步展開，逐步確定的。首先根據常用的業務邏輯來把需要展示的內容做一個排序，比如：餅狀圖、柱狀圖、趨勢圖等，決定可視化圖表與數據的結合。
2、從表格到一整張圖
由于產品經理角色空缺，項目并沒有原型線框圖。所以為了項目有效開展，首先將數據展示的維度列出一個表格（內容標題、橫縱坐標、有效信息等等），進行合理化的分析， 其次將現有的數據內容，結合表格中的橫縱坐標，套在一個可視化的板式中，做出一個初步的原型設計。
設計過程
1、設計風格
按照傳統大屏的設計配色，深藍色體現了豐富的科技感，倉儲式儀表盤的布局模式，體現了數據可視化的大氣。由于業務對象的原因，摒棄了太過花俏、復雜的邊框跟元素。
2、設計交互
交互的要點承接了業務需求的關系，整個大屏界面除了數據展示，還多了控制地圖展示的下拉界面、查看災情發生時間維度的控制軸以及播放動畫的按鈕等，是一個組合可交互的大屏展示，并不是只刷新數據那么簡單。
3、投入產品思維
由于沒有產品經理的空缺，設計承擔了大部分產品思路，主要體現在重點內容布局，頁面合理性邏輯性的一些考量。好在頁面只有幾張，不然整體的業務邏輯分析起來也增加了不少的思考時間。
4、改稿的心理素質
數據展示的內容與客戶期望存在一定的差異，當客戶沒有需求提出時，就要出不同的方案來驗證客戶的需求，從最初的版本到開發，中間經歷了7-8次改稿，很虐吧……
總結：
1、視覺與原型
從追求完美的角度出發，設計流程上應該有產品原型的體現，但是往往業務對接人員僅提供需求文字本身的情況下，設計師也要具備一定的產品能力，把視覺稿當成原型稿來做。
2、同質化與調研
大屏展示可視化一直都是層出不窮，怎樣做到既能滿足業務需求又要有獨特感以及設計感，可以歸結到項目開始的設計定位上，風格定位得越仔細，調研得越多，那么對設計亮點的融入會起到很大幫助！
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
-提供一個啟動頁
-考慮屏幕方向
-不要提前詢問設置信息
-不要顯示授權協議和免責聲明
-重啟時恢復先前狀態
-盡量不要讓用戶重啟
-不要頻繁地讓用戶給你的App評分
-設計一個與您的應用的首頁幾乎相同的啟動頁
-避免在啟動頁上包含文本
-弱化啟動頁
-不要做品牌展示
(原指南將“啟動頁”放到視覺設計中, 因與本節關聯較大, 因此譯者整合到在此處)
-------------------------------------
啟動體驗很大程度影響用戶對APP的感受。 無論使用什么設備，無論自從上次打開APP過了多久，啟動體驗都應該是快速，無縫銜接的。
應用啟動時, 顯示啟動頁，然后迅速變為應用的首頁。 啟動頁的作用是在加載時給用戶一種印象——該APP響應迅速. 為確保從啟動頁無縫過渡，請將啟動頁設計成與首頁相似的、不會吸引關注的簡單頁面。
如果您的應用同時支持縱向和橫向模式，則應使用設備的當前方向啟動。 如果您的應用僅以一種方向運行，則應始終以該方向啟動，并在必要時讓人們旋轉設備。 除非有令人信服的理由，否則無論設備向左還是向右旋轉，處于橫向模式的應用程序都應正確定位自己的方向。
人們期望應用程序能夠正常運行。 為大多數用戶設計您的應用程序，讓少數需要不同配置的用戶調整設置以滿足他們的需求。 盡可能從設備設置和默認設置，或通過同步服務（例如iCloud）獲取設置信息。 如果您必須詢問設置信息，請提示人們在首次打開應用程序時提供該信息，并讓他們稍后在應用程序設置中對其進行修改。
在App Store顯示授權協議和免責聲明，以便人們可以在下載應用之前閱讀它們。 如果您必須在應用程序中包含這些內容，請注意不要破壞用戶體驗.
避免讓用戶手動返回之前的位置。保存和恢復APP的狀態，讓用戶可以從他們上次的地方繼續。
重啟需要花費時間，并且會讓你的APP顯得不可靠且難用。如果你的APP有內存或其他問題使其難以運行，你需要解決這些技術問題。除非是手機系統原因.
安裝后或在用戶使用你的APP時過于頻繁地彈出評分提示是很煩人的，你收到的有用反饋可能會反而因此減少。為了鼓勵用戶給出合理的反饋，你應該給用戶一些時間讓他們對你的應用形成自己的看法。并始終提供一種選擇退出評分提示的方法，永遠不要強迫用戶對你的應用進行評分。
-------------------------------------
當你的APP啟動時，啟動頁會立即出現，并很快被應用程序的首頁取代，給人一種APP響應迅速的印象。啟動頁不是一個藝術表達的機會。它只是為了增強你的APP快速啟動和立即準備使用的感覺。每個APP必須提供一個啟動頁。
不要在啟動頁面上使用靜態圖像。 如果您需要了解各種屏幕尺寸的尺寸以幫助您進行設計布局，請參見設備屏幕尺寸和方向。在iOS 14及更高版本中，啟動屏幕限制為25 MB。
如果您添加的元素在應用程序完成啟動時看起來有所不同，則人們可能會在應用程序的啟動屏幕和第一個屏幕之間遇到不愉快的閃爍。 還要確保您的啟動屏幕與設備的當前外觀模式(淺色/深色)匹配.
由于啟動頁中的內容不會更改，因此任何顯示的文本都不會本地化。
人們重視是否讓他們快速訪問內容并執行任務。 設計類似于應用程序界面的啟動頁會給用戶帶來“應用程序立即啟動了”的錯覺。 快速的啟動時間，結合這種設計方法, 會使您的應用程序響應迅速。對于游戲，啟動頁應正常過渡到游戲顯示的首頁。
啟動頁不是品牌機會。不要設計得看起來像品牌刊登頁或“關于”窗口。 除非品牌標志或其他品牌元素在應用首頁也固定出現，否則請勿包含徽標或其他品牌元素。 如果您的游戲或其他沉浸式應用在過渡到第一個屏幕之前顯示純色，則可以創建僅顯示該純色的啟動屏幕。
//然而事實是, 幾乎所有應用都會在啟動頁展示品牌logo. 只有apple官方的應用將“快速響應”的思路堅持到底. 我的看法是, 可以適當融入一些品牌元素, 但依然要考慮與首頁過渡, 避免閃爍感和等待焦慮, 盡量簡單、不引起注意, 從而帶來“快速響應”的啟動體驗.
----------------------------------------
3.2 新手教程 (Onboarding) & 加載(Loading)
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
原文鏈接：https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn