有些人可能會說，我要是這么排版，客戶肯定不會覺得太簡約了、重做，我只能說有這個可能，畢竟每個人的喜好和具體的需求是不一樣的，所以，你要用在合適的產品和客戶上，不要千篇一律;其次也不能直接照搬日本設計的排版，比如大量的豎排在中文設計里不合適，還是要以橫排為主；另外，很多時候客戶不是不喜歡簡約一點，而是不喜歡你做的簡約，如果你把客戶的需求都表達出來了，還簡約好看，客戶沒理由不喜歡。
作者：蔥爺
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
案例 1 使用“多多買菜”加購一款蔬菜，平臺會自動為你提供更多規格做選擇。比如你將 500 克的西紅柿加入購物車，平臺會告訴你可以買“兩盒裝“，價格更優惠：
案例 2 脈脈上，如果對于自己所在的公司的內容進行評價，系統會直接采用隨機命名的方式，給你起一個有趣的新名字，起到了保護你隱私的作用，讓你放心大膽地講實話：
案例 3 bilibili 上的很多主播會給觀眾做與內容相關聯的進度條，你可以很清楚的看到視頻每一段的具體內容和播放進度，跳播更方便：
案例 4 用搜狗輸入法輸入“今天天氣”的這幾個字時，會自動推薦當天的天氣情況。你可以提醒你在乎的人注意天氣變化：
案例 5 產品也可以阻止你做壞事。Adobe Photoshop 軟件中內置了一個鈔票防偽系統，用來防止你利用其制圖功能非法制作假鈔：
案例 1 高德地圖會給用戶很多條可選路線，對于每條路線都會給出詳細建議，比如：擁堵少、紅綠燈少，還會給出明顯提示：“窄路多，需要小心駕駛” 或者 “路上有一個新增電子眼” —— 它知道很多你不知道或記不住的內容：
案例 2 在百度瀏覽器上查找不同單位之間的換算時，百度會呈現出與你搜索的內容相關的所有單位名稱，便于你進一步做查找和換算：
案例 3 夸克 App 上搜索熱點話題，會出現與事件相關“大事項”，以時間倒序的方式還原事件始末，為群眾們吃瓜提供了便利。下圖是我在 2021 年 12 月 20 日那天搜索王力宏事件時看到的信息內容：
案例 4 在微信中搜索文章時，如果有虛假謠言類的文章，微信不會讓文章不可見，而是會鄭重其事地做官方辟謠，幫助你矯正觀念，粉碎謠言：
案例 1 在新的網絡環境中使用蘋果設備連接 Wi-Fi，具備同樣 Apple ID 的設備可以進行 Wi-Fi 的密碼共享，不需要你再重新輸入密碼：
案例 2 釘釘和阿里的出差系統打通，當你提交了出差申請，到了出差的那一天，釘釘上狀態會自動切換成 「??出差中」，方便其他同事了解你的工作狀態：
案例 3 如果你晚上臨睡前將蘋果手機連上充電器充電，iOS 手機系統的「計劃充電」功能會根據你的使用習慣，在電量達到 80% 時就會停止充電。然后在你第二天早上使用前再繼續充電直到充滿，以此延長電池的使用壽命。這意味著 iOS 系統要準確判斷出你每天開始使用手機的時間。你也不用因為擔心整夜充電對電池有損害而選擇不在晚上充電或是半夜爬起拔掉電源：
案例 4 在屏幕很暗的情況下，打開微信或支付寶的支付二維碼，屏幕會瞬間亮起，便于商家掃碼付款，不需要你手動調亮屏幕，掃碼后又會回到之前的屏幕亮度：
案例 1 用飛豬 App 查找酒店時，可以在地圖上用手指畫圈，不需要輸入街道名稱就可以滿足你自定義范圍來找酒店的需求：
案例 2 微信的圖片搜索的功能，可以通過圖片里的文字和內容來檢索圖片，比如你只需要輸入“食物” 二字，就可以看到與食物相關的所有圖片。你再也不需要在一堆圖片中找到眼花了：
案例 3 NN/g 網站移動端的支付流程中，“銀行卡可用時間”的輸入框使用了特定的格式輸入效果，你不需要糾結輸入內容的格式問題，可以很輕松地完成填寫：
案例 4 蘋果的 Airdrop 箭頭是一種方向性的指示，將你的 iPhone 對準對方的 iPhone，就能很快速地在周邊一群設備中找到對方。同時 Airdrop 自己也有記憶，你經常發送的用戶和綁有你自己 ID 的設備，都會靠前顯示：
作者：元堯
轉載請注明：學UI網》案例錦囊｜有哪些小交互讓你瞬間覺得產品很「智能」？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
奇數法則意思是說，在設計作品中奇數元素比偶數元素更有趣。偶數元素在圖像中產生了對稱，這可能會顯得過于正式和不自然。比如，在一行中排列三個或五個卡片會比2個或4個效果更好，作品會更加讓用戶感到舒服和自然。
Iskos Design 就是用的奇數原則做的網頁設計
三分法構圖（也被稱之為黃金網格規則），在畫面中以水平和豎直方向分成3×3的網格和4個交叉點。這個規則能很好的協助設計師將最重要的元素放在網格的交叉點上，這樣可以很容易的設計出滿意的構圖。
為什么會這樣？因為三分法構圖創造了類似斐波那契數列(黃金比例)那種不對稱的美，產生了更有吸引力的構圖。
你希望用戶關注哪些地方？高級設計師非常擅長引導用戶的視覺焦點，這種引導可以通過可見和不可見的引導線來完成。這些線條在構圖中也可以打造一種動感，也能為畫面增添視覺沖擊力。
達到這種效果通常用特定的形狀和線條，或者是它們的組合形成難以察覺的引導線來實現。利用透視、顏色、對比度和正負空間同樣可以幫助達到這種想要的效果。
從左到右的不易察覺的曲線將用戶的視線引導到頁面文字上
大?。╯cale）是設計中一個元素與另一個元素的相對大小。元素通過大小不同創建視覺層次，其中最大的元素首先會吸引用戶的注意力，因此看起來是最重要的。常規的設計策略就是將最重要的元素做成最大的，然后逐級遞減。
比例(Proportion)不同于大小，類似但有區別。比例原則是指一個整體設計中各部分的尺寸關系。設計中的元素可以有各種大小，但它們之間的大小差異，整體來看就是比例。
熟練地使用大小和比例是實現設計統一的關鍵。當一些元素的大小過大或過小，或者比例失調時，設計組合就會失去統一性。這種錯誤可能發生在排版和其他元素上。例如，標題與子標題和正文相比顯得過大。當設計元素失衡時，設計就會“感覺不平衡”。
大小和比例都沒做好時(左圖)，看起來處理的比較細致了，但依然沒有做到很好，在大小上正文和標題分不清(右圖)。
強調原則用于使設計的某些元素突出(使用對比、接近、比例、留白等)或不突出，即弱化強調(例如在頁面底部有一個幾乎看不見的“小字”)。強調是層級之母，因為沒有強調就沒有層級。
與其他一些設計原則一樣，“強調”是用來引導人們關注設計，并強調需要重點關注的第一、第二和第三點。首頁面和電商轉化頁面在99%的情況下都使用這種原則。
使用這個原則，在購物網站上強調了標語和產品，轉化效果非常好
統一是指設計元素如何很好地結合在一起，形成“視覺凝聚力”。它指的是設計中的連貫性，讓人們覺得所有部分都是一起的。每個元素都應該具有清晰的視覺關系，以幫助傳達清晰、簡潔的信息。整體性好的設計比整體性差的設計更有條理，質量也更高。
運用統一的配色，重復、平衡和對稱之類的原則將有助于在設計中形成一種和諧感，也就是一致性。設計中良好的一致性就好比歌曲中一首歌被和諧地唱出來，形成一個完美的整體。
一致的顏色、重復的圖案、平衡和對稱在蒂芙尼的網站上創造了一種統一的感覺。
格式塔的接近原則讓設計師將同類型的相關元素進行分組。把它們分開得更遠，元素就顯得越不相關，它們之間的關系就會減弱。一般來說，人們會認為遠離的元素是不相關的。
不應該讓用戶在設計中分辨哪些元素是相互關聯的，正如美國郵政服務的例子所顯示的那樣，缺乏對鄰近性的關注會導致直接的認知緊張，損害用戶體驗。
接近原則沒做好的案例。由于字段標簽離它們下面的字段更近，人們可能會搞混
下面是一個鄰近性原則做的好的案例，我們可以看到相關元素是如何通過鄰近性關聯起來的(分組的元素用紫色表示)。
一個把接近原則用好的網頁設計案例
一致性原則使數字產品的使用更加可預測，符合用戶的期望。設計中的一致性可以培養熟悉度，它可以提高用戶體驗、可用性和用戶使用效率。另一方面，不一致的設計將產生更多的認知負荷/腦力勞動，并導致困惑和挫折。這就相當于在用戶的路徑上設置障礙。讓用戶的心流嘎然而止!
做好一致性可以增強“審美凝聚力”?！拔覀兌贾溃斘覀兪褂脩脮r，應用的導航位置如果經常變化，或者像“加入購物車”這樣的主按鈕在不同屏幕上從紅色變成綠色，這是多么令人沮喪。
除了視覺一致性和易用性，品牌一致性在產品設計中也發揮著重要作用。如果沒有一致的元素呈現，如排版、配色和圖案，高質量的品牌體驗將無法傳遞。
在用戶體驗方面，一致性意味著在設計中使用相似的UI元素來完成相似的任務，即在整個產品中擁有相似的功能和行為。因為可用性是一種評估用戶界面易用性的質量屬性，所以一致性對用戶體驗的可用性有很大的貢獻。
一致性是通過使用相同的配色、排版、間距、模式和交互來實現的。
顏色在設計中是非常重要，幾乎是設計中最具影響力的創意元素。一個深思熟慮的配色可以讓一個設計從普通到驚艷，而一個平庸的配色會降低用戶的體驗，甚至阻礙他們使用產品的能力。
明亮、豐富的顏色比柔和的顏色更引人注目，因此有更大的視覺沖擊。柔和的顏色可以提供一個令人愉快的，微妙的配色方案，但適當的對比必須要有，特別是文字，必須保證可讀性。
顏色甚至可以用于呈現UI中的結構感并指向可用的交互，但為設計制作一個配色方案并不是一項簡單的任務。除了品牌化，還必須非常小心地創造顏色的和諧和耐用性，使得它能在各個場景下都能正常使用。
色彩心理學也不容忽視。色彩承載著意義和情感，可以向人的潛意識傳遞信息。在品牌方面，人們對顏色做了大量的心理學研究，因為在人們與品牌進行任何互動之前，顏色會讓他們產生一種本能的反應。例如，藍色通常被認為是可靠的、安全的和平靜的，想想銀行；而紅色是刺激的，被認為是增加人們的心率，想想飲料包裝。
一個極簡主義的暗色主題設計傳達了一個特定的品牌氣質，并使用了少量的顏色。
排版在設計中扮演著非常重要的角色，它的重要性再怎么強調都不為過。在構圖中，字體樣式對人們感知設計的影響比任何其他元素都大，可能除了顏色。
因為我們的大腦以閃電般的速度運轉，一個字體會對一個設計產生影響，以至于它可能在不到一眨眼的時間內改變用戶的印象。與顏色一樣，字體甚至會影響我們的情緒，資深設計師可以通過字體傳達情緒和風格。通過選擇合適的字體，我們可以傳達出穩定、優雅、舒適、可靠、有力等信息。
排版層次結構可以快速建立視覺層次結構，并且通常在其中扮演重要角色。因此，在設計中經常使用不同的字體和字體大小來表示層次結構，例如標題、副標題、正文和引用。
“除了確保文本清晰易讀，排版可以幫助你理清信息層次，傳達重要內容，并表達你的品牌?！?——蘋果的人機界面指南
蘭博基尼的網站巧妙地使用了排版風格和比例來賦予其設計力量。
Claude Debussy 曾說過，“音樂是音符之間的空間“。同樣的觀點也適用于設計，元素之間的負空間給予設計強調、平衡和統一。
元素周圍適當的負空間將焦點集中在元素本身。它強調了內容，并提供了必要的喘息空間，以確保布局不顯得雜亂。沒有了呼吸空間，人腦就不太可能掃描興趣點，更容易感到困惑。
蘋果官網提供了一個利用負空間創造強烈焦點的杰出例子。
人們已經開始期待所有平臺和設備上的優化、無阻礙的用戶體驗。理解設計原則及其交互方式對所有設計師來說都是至關重要的。使用專業技能設計它們是創造具有視覺吸引力的功能性設計的關鍵。我們不要忘記，美學的完整性會嚴重影響用戶體驗。
基于原則的設計是設計師在感覺有點迷失或用盡創意時可以依賴的黃金標準方法。在沒有理解和實現設計原則的情況下，也可能實現可接受的設計。然而，這可能需要大量的嘗試和錯誤才能創造出看起來不錯的內容，并創造出最佳的用戶體驗。
產品的美學質量與它的實用性密不可分，因為我們每天使用的產品影響著我們和我們的幸福?！钡挥芯闹谱鞯奈锲凡艜利悺！?Dieter Rams(迪特爾·拉姆斯)
當我們不關注由設計原則驅動的設計質量時，我們可能會忽視品牌質量及其所代表的一切。當某些東西設計不好時，品牌就會受到傷害，產品也會受到影響。這就是為什么偉大的設計師在他們的工作中極其嚴謹， 他們知道“你永遠不會有第二次機會給人留下良好的第一印象?！?/strong>
設計的細節成就了設計本身?！?查爾斯 伊姆斯（Charles Eames）
原文：https://uxdesign.cc/design-principles-why-a-design-works-a572c5d2d92d
作者：Miklos Philip
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
轉載請注明：學UI網》超全面的設計底層理論，優秀設計背后離不開這些（下）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
TIPS：
· 全文共計2643字，閱讀需5分鐘左右
· 文章源自于日常設計工作的沉淀與總結，不排除個人觀點的局限性
1、人格特征下的設計原則指引
完成人格畫像是塑造生命感的第一步，更重要的是如何將這樣的人格特質系統性的體現在IP形象中，為此我們有必要將人格中的核心特質轉譯為設計語言，定義IP在場景、情緒、行為、語言4個方面的設計指引原則。下文我們繼續以“犀寶”在工作臺的設計應用為例，基于人格特質歸納設計原則。
1.1 “犀寶”的核心人格特質
1.2 場景原則
經過多輪線上線下調研，我們對客服崗位建立了基于職業特征的用戶畫像：高強度、高疲勞、高負壓。面對即時溝通、多會員切換、服務考核等壓力，客服往往需要一個高效、專注的工作環境。因此基于人格特質的場景原則首先要保證“不打擾”，除功能性需要，應避免在客服服務過程中過度設計。結合“犀寶”利他主義、強共情等的人格特征，更適合應用在非上班狀態的場景中，如：引導教學、頁面加載、為空狀態、結果反饋等。
1.3 情緒原則
經過對IP形象在工作臺中的典型應用案例的編碼梳理，我們基于情緒二維模型對“犀寶”的情緒進行了管理統計。情緒象限中所定義的觸發條件即為應用原則，高頻出現的情緒即為典型情緒。
我們將“犀寶”的典型情緒統計如下：
高興、冷靜、興奮、放松、慌張、欣喜、疑惑
將“犀寶”的情緒原則進行如下歸納：
① 面對客服或客服的正向行為，建議使用帶有正向情感反饋的情緒（如高興、欣喜、興奮等）；
② 面對客服的負向行為，避免使用帶有負向情感反饋的情緒（如緊張、慌張、沮喪、尷尬、疑惑等）；
③ 處于工作狀態時，建議使用中性的情緒（如冷靜、嚴肅）；
④ 面對工作臺/系統的狀態，不受常態的正負向情緒拘束；
⑤ 任何狀態下，避免使用帶有攻擊性的情緒（如憤怒、厭惡、鄙夷、怨恨等）。
1.4 行為原則
行為原則是在IP人格特質與典型場景的基礎上，對IP行為特點的建議與約束。按照以上思路，我們對“犀寶”的行為原則歸納如下：
① 建議使用具有引導/指向性的動作（如舉手引導）；
② 建議使用具有社交禮儀的動作（如揮手問候/告別、雙手呈遞）；
③ 建議使用呈現工作狀態的動作（如佩戴耳機坐在電腦前）；
④ 建議使用操作智能設備的動作（如操作虛擬現實工作臺、使用可穿戴設備等）；
⑤ 建議使用帶有正向情感反饋的動作（如擁抱、點贊、鼓掌、加油等）；
⑥ 避免使用帶有劇烈運動的動作；（如奔跑、跳躍、健身等）
⑦ 避免使用帶有情感攻擊性的動作（如指責、揮拳等）。
1.5 語言原則
語言原則是在IP人格特質的基礎上，對IP聲音、話術等特點的建議與約束。按照以上思路，我們對“犀寶”的語言原則歸納如下：
2、擬人化的形態設計
在明晰人格特質和設計應用原則后，我們可以進一步思考IP形象在產品中的擬人化表現。在這里，簡要的分享一下思路方向。
上文提到，擬人化是把物擬作人，使其具有人的形態、情緒、行為、語言等特征，轉譯為設計語言即為IP形象的形態結構、面部表情、體態動作、聲音文案幾個部分。其中IP形象的結構決定了表情和動作的可塑性、豐富性。從上文JOY的形象設計案例中不難看出，人體化結構是IP形象設計的主流手段之一。
對于擬人化的表現個人建議優先從結構人體化著手，結構滿足后，具有人格特質的擬人化表現自然水到渠成。在這里，我們可以將結構人體化的方式總結為：
2.1 模仿人類的五官結構
使IP形象具有眉、眼、鼻、嘴、耳的基本結構關系，幫助IP進行生動、豐富的情緒表現。
2.2 模仿人類的形體結構
使IP形象具有頭、手（手指）、軀、腳的基本結構關系，幫助IP進行生動、豐富的動作體態表現。
3、仿真化的動態設計
在完成人格化、擬人化的設計思考后，相當于為IP繪制了一幅角色設定草圖。接下來我們可以結合品牌/產品氣質，豐富感官表現，精細化的同時進一步有增強其生命感知。在這里，簡要的分享一下思路方向。
上文提到，仿真化是對形象進行物理及生物特點的感官還原，表現在造型、空間、色彩、質感、動態、聲音等多方面。然而，不同類型的品牌、產品、應用場景，對仿真化的程度需求有所區別，如：主機/電腦游戲類產品，娛樂屬性更強，為了追求沉浸式的感官體驗，在各方面的仿真表現都相對較高；品牌/產品宣發場景，展示性更強，仿真表現的權重也相對較高；在APP/網頁界面中，更注重功能體驗和產研效率，風格以扁平為主，因此對于仿真表現的訴求也相對較低，在這種情況下，對比造型、空間、色彩、質感等元素，IP形象的動態表現最能直觀的表現生命感。
那么，如何通過動態表現增強產品IP形象的生命感？
3.1 模仿真實的生物規律
① 呼吸感：
呼吸是生物的生物學功能，有節奏的呼吸起伏是生命體的直觀體現；
② 眨眼：
眨眼動作屬于生物體基本的生理反射，間隔性的眨眼動作可以增加形象的生命感知；
③ 模仿生物習性：
以“犀寶”為例，犀牛生活在蚊蟲多發的非洲，靈活直立的大耳朵不僅可以洞察環境，還可以幫助他們軀干蚊蟲，抖動耳朵是一個非常具有生物習性的行為反射。在呼吸、眨眼的基礎動態上增加間隔性的抖耳，可以讓整體形象更加真實生動。
3.2 模仿真實的動態規律
現實世界中存在著許多物理運動規律，如運動慣性、速度曲線、落地緩沖等等，想要表現出IP形象真實生動的動態特征，需要了解并掌握其中的動態規律。從動畫的視角來看，迪士尼黃金12定律具有很好的專業參考性，相對全面的總結了20世紀30年代以來迪士尼動畫的制作方式，是動畫專業必修的知識點。
小結：如何基于IP人格特質進行設計應用？我們的方式是結合產品特點、IP人格特質擬定設計原則；通過擬人化的結構增強IP形象在動作表情方面的可塑性；最后通過合理的仿真化手段完成設計應用。以下是“犀寶”在產品應用中的部分設計案例。
案例一：培訓機器人對客服模擬練習的狀態反饋
案例二：客服工作臺啟動頁加載插圖
案例三：客服應用頁面加載插圖
案例四：瀏覽器升級提示
案例五：靜態插圖合集
結合設計和心理學理念來看，具有生命感的IP形象能夠帶來更有力的功能及情感價值。通過對IP生命感的分析，我們認為IP形象的生命感由表及里表現出“仿真化、擬人化、人格化”三個層次。其中人格是決定IP形象如何表現的核心，因此對于形象的設定邏輯建議由里至表的進行思考統籌。從設計力度上看，對于各層次的程度把控與配合，建議根據產品屬性、傳播媒介、表現形式、技術條件、預期效果、預算成本等具體情況進行評估。
引用及參考文獻：
[1] 魯道夫.阿恩海姆. 視覺思維. 四川人民出版社. 2001(3)
[2] 姚浩然.人格化加劇形態設計研究[D].南京：南京林業大學木材科學與技術,2012：12.
[3] 吳龍華.個性心理結構問題的研究[J].人力資源管理,2012(12)
作者：AlibabaDesign
轉載請注明：學UI網》靈魂注入指南-打造富有生命感的產品IP（下）
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
經過前期的調研和分析，以及結合相關的業務訴求，確定了我們的項目目標，那就是要做出一款為新房營銷賦能的設計工具，同時也總結出好的電子沙盤要同時具有這四個方面的特性：
1、效果真實自然
電子沙盤要傳達的是真實的地形地貌等信息，使用戶在觀看時要有身臨其境之感，因此在最終效果上要力求最真實自然的視覺體驗，為用戶呈現最好的效果。
2、覆蓋類型廣泛
在模型的品類方面力求多樣化，這樣整個場景才會更接近真實的效果，在項目中我們使用模塊化的方式，創建了項目資源庫，達到了建筑、植被、健身器材、公共設施等全品類覆蓋、共產出植物模型17種，建筑模型36種，器材設施類模型22種、UE4引擎材質260多種，為最終效果的實現起到了決定性的作用。
3、模型細節精細
除了周邊環境要真實自然，小區內每棟樓的建筑細節也非常的豐富，以真實的建筑結構信息來進行模型制作，用戶在使用時能夠查看到樓盤內每一棟建筑的外觀和結構細節。
4、生成策略豐富
區別于傳統的手動建模方式，我們在實施階段采用了模塊化資源+智能化生成的方式，首先在數據層級對整個項目區域根據功能進行劃分，針對每一類區塊都進行了相應的生成策略的設計。共產出擺放規則36種，精細到每一處細節都有相應的生成規則。
接下來的部分我們就選取幾種比較典型的區域擺放規則看一下。
根據當前項目特點，在具體實施階段我們采用了數據輸入和智能化生成的整體策略。
1、本案小區樓棟：
樓棟的建模使用了模塊化的方式，使用預制的窗戶，外墻等模型部件按照規則將不同的組合部件結合在一起生成整體的樓棟。
2、小區入口：
入口處大門的生成，首先需要在初始數據中輸入入口的信息，然后根據設計規則使用模型庫中預制的模塊生成入口大門。
3、道路生成：
根據道路結構進行數據的分層拆分，然后再將各部分模型組合起來形成道路，這樣就方便了后期添加沿路的樹木，以及根據車道信息添加車輛等等。
4、配電房，設備用房：
小區內的配電房，設備房等首先劃定區域數據，然后選擇合適尺寸的模型進行擺放，最后做頂點拉伸處理。
5、底商商鋪：
底商的生成與設備房等類似，但是也有一些區別，由于每個樓盤的底商區域尺度不同，所以要對模型進行相應的拉伸去適應相應的區域大小，底商部分我們采用了整體拉伸的方式，這樣不會破壞模型上的一些結構細節。
6、小區廣場：
小區廣場的效果相對來說比較豐富，模型種類比較多，不適合使用拉伸的方式去生成，這部分采用了對不同功能的設備進行分塊的方式，比如兒童游樂設施，成人健身器材等，通過不同的組合可以生成多種方案。
7、地形生成：
地形的創建要依據真實的地理信息數據來制作，以保證電子沙盤真實的參考性，這部分我們使用了當下比較先進的智能化解決方案，根據數據將地面，道路，水系，植被，建筑等分層創建，最終在虛幻引擎中進行整合渲染。
這部分看下電子沙盤現階段的最終效果：（點擊圖片前往原文觀看視頻）
經過大家的努力，最終我們的電子沙盤獲得了各方的認可，在制作過程中也收獲了不少寶貴的經驗，總結如下：
重視排期和做好階段性任務的拆分：由于項目周期比較長，所以整個項目必須有統一的階段性規劃和排期，按照統籌好的計劃來一步一步實現目標。
項目參與人員之間的溝通很重要：每個成員之間對于進度和過程中遇到的問題必須及時同步和提出，尤其對于跨部門合作的項目來說，這一點尤為重要。
項目的完成離不開大家的共同努力，在此對所有人表示感謝。
作者：環鐵藝術家
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Illustration by Jan Marin
我是果粉，在過去的10年里一直在用蘋果產品，很欣賞喬布斯早在那時就倡導的優秀設計理念。在那些年里，我迷上了蘋果的生態系統，因為對我來說，“它太好用了”。
其中一個便是iTunes。我會花大量的時間仔細整理我的音樂庫，并將它同步到我的iPod上。
在中間，我發現了Spotify，幾年后，我曾經喜歡的iTunes樂庫已經積灰了。
在大量的猜測和謠言之后，蘋果最終加入了流媒體競爭——完全放棄iTunes，并推出他們的新音樂產品，帶有付費訂閱流媒體服務的可選功能，名為“Apple Music”。
Source: Apple
在用了Spotify多年后，我決定給蘋果一個機會，重新嘗試用蘋果的音樂產品，到現在用了蘋果音樂大概一年。
不多廢話了，以下是我作為一個產品設計師和一個想聽音樂的普通用戶整理的一些想法，分析下Apple music存在哪些體驗問題。
音樂APP的一個關鍵功能就是搜索，在APP中它的使用頻率很容易排到前三。那么，Apple music的搜索功能我覺得做的還不夠好。
假設我們想要搜索一個知名的搖滾樂隊Weezer，他們是一個很酷的樂隊。
我們正確輸入了Weezer，自動提示似乎已經出現了。但是等等——這是自動提示嗎?
讓我們試著輸入“Wezer”，假裝我們拼錯了樂隊的名字，以再次確認這確實是一個自動提示，幫助我們確認它與蘋果庫中的Weezer匹配。
看到這個結果，我猜這應該不是一個很好的自動提示。為了確定是否真的做了自動提示功能，我們換一個關鍵詞，這次選另一個非常受歡迎的搖滾樂隊-Queen。
這次好像終于是有自動提示了，但為什么Queen能快速出關聯結果而Weezer沒有？
好吧，讓我們繼續尋找線索。點擊那個下拉列表，看看它將帶我們去哪里。
結果出現了一個全新的“結果頁面”。如果能夠完全跳過這一頁就好了(就像我們搜索Queen的時候)，因為我真正想做的是直接進入Weezer的音樂。
此時想想我們下一步要做什么。我不記得我最后去了哪里，但我知道我想回到最初的位置。我們該怎么做呢?可能像我們在瀏覽器一樣有一個后退按鈕，對吧？但沒有找到。
事實證明，沒有后退按鈕。至少，它沒有通用的后退按鈕來撤消你所做的任何導航操作。你能猜到為什么嗎?
我不知道你怎么想，但我發現Apple Music的導航是它最令人困惑的方面之一。優秀應用不會讓你思考你在哪里，每一個頁面都會是清晰的且可以很容易撤消和回到你之前的地方。
蘋果iOS的人機界面指南為應用提供了三種類型的導航，蘋果似乎也在macOS中使用了這些概念，蘋果音樂就使用了平行導航。
（彩云注：這里我跟大家解釋下iOS的三種類型導航模式
層級導航（Hierarchical navigation）。這個導航模式只能在每個屏幕做一個選擇到達一個目的地。為了到達另外的目的地，你必須重新開始你的步驟或者從起點重新開始，做出不同的選擇。設置和郵箱就使用這種導航樣式。
平行導航（Flat navigation）。這個導航模式允許在多個內容目錄之間轉換。Music和AppStore使用這種導航樣式。
內容驅動或者體驗驅動導航（Content-driven or experience-driven navigation）。這個導航模式在內容間自由移動，或者依據內容本身定義導航。游戲，圖書和其他沉浸式app基本使用這種導航方式。）
Apple music有一個側邊欄，但我覺得這樣意義不大。平行導航在移動端體驗中非常好用，因為屏幕面積很小。如果你經常使用導航欄，你可以知道你在哪個標簽頁上，還可以獨立于其他選項卡更深入地探索一個選項卡。
這是一個自iPhone發布以來一直保持的慣例，人們不會輕易混淆自己在哪里。那么這在桌面上是如何工作的呢?
簡而言之，這也意味著側邊欄中的每一項都有自己獨立的導航。現在讓我們看看Spotify是如何處理桌面導航的。
注意到了嗎?Spotify似乎結合了側邊欄的優點，無論你點擊應用的哪個位置，它都允許你輕松地回溯你的步驟。
為什么在我看來這比蘋果的設計更好?
它可以減少認知負荷。人們沒有時間去記住他們上次在應用中的位置。人們習慣于使用他們的瀏覽器的后退鍵。Spotify利用了這一點，使新用戶的行為符合心理預期。
它還降低了用戶焦慮感，允許用戶自由探索，而不用擔心搞砸或無法解決問題。
點擊是任何應用的一個重要部分，因為你需要點擊來操作。但Apple music的點擊體驗有點糟糕。
就拿這個正在播放的狀態來說吧。
自從iTunes誕生以來，這在很大程度上保持著相同的功能一致性，一種查看當前正在播放的歌曲的方式。
當你聽著Weezer的一首新歌，然后想，“嗯，這支樂隊太棒了，讓我看看他們其他的目錄!”讓我們從這里點擊Weezer !
當我們點擊了標題和專輯，但毫無效果。你能猜到這里具體要怎么操作才能達到我們想要的效果嗎？
你猜不到的是居然要點擊“更多”菜單，瀏覽列表，然后在列表底部看到“在Apple music中顯示”。
但在應用的其他地方呢?你可以點擊歌曲、專輯或藝術家嗎?好像也不行。
在這一點上，你可能會想，我為什么要在這個問題上做文章?因為我認為音樂應用的全部意義，尤其是在一個巨大的流媒體庫中尋找新音樂的意義：是點擊、探索，并輕松地找到歌曲、專輯和藝術家。
我認為用戶不應該因為不遵守應用希望使用它的方式而受到阻礙。
（彩云注：這里作者想要表達的問題是交互上不應該讓用戶去遵循產品的規則，而應該盡可能的滿足用戶的心智模型，用戶在這里的需求很清晰，打通這里的流程問題很重要）。
一款好的應用不會讓你等待。我們知道加載時間會極大地影響網頁的跳出率，我不認為我們必須區別對待本地應用。
這讓我想到了使用Apple Music時最大的痛苦之一:
在頁面之間等待，等待。想知道下一個糟糕的行為會是什么？失去當前的狀態提示。因為延遲，無響應的問題，不知道當我點擊“播放”時，我的歌曲是否會真正播放。
我相信好的設計應該是令人向往的。我想喜歡Apple music，更重要的是，我相信蘋果仍然有很強的設計原則。但我這次在apple music中沒有讓我享受到該有的好體驗。這是一個遺憾，因為作為一項服務，Apple music還是有很多優點。
這些優點反而讓我更加失望，因為這個產品本身不容易使用。
說到底，真正的問題在于蘋果沒有明確定義他們的產品是什么。如果說音樂應用是iTunes的繼承者，那么不幸的是，它沒有達到目標，因為他們試圖將流媒體服務(Apple music)嵌入到傳統模式中。如果Apple Music是他們的重點，他們并沒有讓它作為一個獨立的服務脫穎而出。
有一件事是肯定的，桌面版的Apple Music如果要達到一個像樣的可用性水平，還有很多工作要做。
你覺得呢? 你在體驗蘋果產品時，還遇到哪些痛點？期待你在留言區探討~
原文：https://uxdesign.cc/apple-musics-ux-problem-e8f5fac756de
作者：Jake Dragash
譯者：彩云Sky
本文翻譯已獲得作者的正式授權（授權截圖如下）
作者：彩云Sky
轉載請注明：學UI網》Apple music用戶體驗分析，原來蘋果也沒有把這些做好
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
做設計語言分析最重要的就是選對分析對象，不管是哪個行業，選對了方向基本上不會出什么大問題。
比如，要做一個音樂產品設計改版，想看看一些品牌基因塑造比較好的APP是怎么做的，這時候可以選擇國內外排名靠前一些音樂去研究分析。
如何選擇正確的分析對象，一般情況下選擇直接和間接競品，如果你不知道有哪些優秀的產品，可以在這個網站看看。
七麥數據
比如，搜索一個音樂后，就可以看到音樂在國內的排名，當然還可以切換國家，看看其他國家的APP排名。
競品的對象一般選擇3~5個靠前就差不多了，因為選擇越多，后期分析起來越麻煩。
前面我們已經確定了幾個分析對象，那么到這里我們就開始分析所選產品的設計語言。
一般情況下，設計語言的分析維度有色彩、圖形、布局、字階、卡片，當然你還可以增加陰影、圓角、動效等細節。
1、色彩分析
色彩分析我們一般看品牌主色調、輔助色、拓展色、安全色、以及文字顏色，目的是了解他們的色彩運用規則和制定策略。
比如常規色、按壓色、不可點擊色彩是如何塑造的。
看個列子，比如白色和灰色的應用場景。
2、圖形分析
圖形一般品牌圖形的應用，看看這些產品如何打造品牌DNA，如何強化用戶印象，圖形的維度一般在圖標上體現居多。
比如再來看看Line的
3、布局
布局一般我們看產品內容間距，內容網格是如何打造的，間距節奏如何定義。目前主流的網格定義大部分基于2/4/8三個原子數值來定義。
內容間距網格
頁面布局網格
4、字階
字體節奏這個比較簡單，一般就是看看他們一級標題、二級標題、三級文本、輔助文字等等的字體大小如何定義，找到一個基本的參考方向。
比如像LINE設計語言，他們標題提供了4種尺寸大小，正文也是提供了4種。
標題提供4種尺寸大小，應用在不同場景
正文提供4種尺寸大小，應用在不同場景
5、卡片
卡片一般情況下我們要分析圓角節奏，卡片的比例應用情況。
一般情況下黃金比例，特殊場景除外，比如Banner。
需要了解卡片的圓角節奏是如何定義的。
當前面我們分析完所有內容后，并了解這些產品設計語言的應用情況以及制定策略，在最后這一步我們就需要將這些分析內容進行梳理成可參考的文檔，向團隊成員分享你發現的一些核心策略和競品視覺語言做得比較好的地方，提供給團隊參考。
這些分析只是參考，站在巨人肩膀學習，這樣也是避免在成長過程中走錯方向。最重要還需要接下來的執行，根據分析結論重新塑造自家產品的設計語言。
由于篇幅有限，沒有將所有案例全部展開，但給大家提供了一個清晰的流程和思路，可以下去嘗試使用這種方法做一次分析，就掌握了，有什么不清楚的地方，歡迎留言和我討論。
作者：劉濤導師
轉載請注明：學UI網》如何分析競品設計語言？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
優秀的界面設計應該體現在每個維度，間距在設計中也是不可缺少的部分，尤其是界面元素較為密集時，需要對間距的使用掌握得當，合理的利用間距留白，能將信息更高效的傳達給用戶。
文字、圖形、色彩是UI設計的三大組成元素，間距即是這幾種元素結合的媒介，如何通過間距給用戶帶來更舒適的視覺體驗是設計過程中極其重要的一環，那么你所理解的間距到底是什么、有什么作用、如何合理有效的使用？筆者進行了整理總結，通過本篇文章揭曉。
1、什么是間距？
間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側的安全距離（如網頁的寬度為1920px，內容區為1400px，那么安全距離為兩側各260px）等。
作為UI設計師，在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距，利用各間距之間的規律來組織界面內容，確保信息的節奏性，給用戶輕松、預約的瀏覽體驗。
2、間距的實際作用
間距可以讓界面信息更有節奏，提升內容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心態，任何一次的改動與調整都要先考慮清楚為什么，能給產品和用戶帶來什么。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。
設計師層面：規范的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。
開發層面：開發可以按照基礎間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量，在使用8px、16px、24px、32px、48px…等，開發直接使用基礎間距x1、x2、x3…，以此類推，在開發眼中，肉眼定然看不出1px的差別，但卻能區分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設計效果。
用戶層面：有節奏且具備一致性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗能得到很大程度的提升。
3.間距的統一性
設計規范的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理，間距也是設計規范中非常重要的一環，它作為規范中的最小單元，如果沒有遵循統一，將會直接影響界面整體的版式和布局，信息的疏密程度嚴重影響用戶的瀏覽。不僅是設計師，開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規律可循。
統一的間距能讓界面的視覺效果更有節奏，設計師在設計某些相似的模塊時可直接復用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統一的問題造成整個APP的風格混亂。
對開發來說，如果清楚間距的使用規律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24…按倍數規律以此類推，若出現9的間距，開發會更正為8、15則會更正為16，自行多退少補，雖然設計師需要細心、盡量不出現這種小的出入，但任何事情都沒法做到絕對，統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通，能進一步提高開發效率。
▲ 從上圖可以看出，間距不規范、信息就像一鍋粥，而規范的使用間距就能將信息自動分組。
文字是UI設計中非常重要的信息元素，雖然大多數設計師對文字的屬性比較了解，但在真實設計中總會因其他信息的干擾不能合理運用，與上線后的視覺效果預期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。
1、字符間距
字符間距一般都是設計工具的默認數值，無需調整。當碰到多行文字需要避開頭尾的標點符號時，使用工具中的避頭尾功能即可自動調整字間距，如無此功能，則需手動調整，這里并沒有所謂的技巧與方法，頭尾避開標點符號即可。
另外，在設計卡片、瓷片區的標題時，有時需要通過調整字符間距來提升界面的舒適度，間距數值自行定義，但相同層級的內容標題字間距一定要保持一致。
2、文字行高
行高是指上邊框+下邊框+字號的高度之和，這里主要針對多行文本。在平面設計中，行高沒有一定的標準，如無特別需要，使用系統默認的行高即可。
在UI設計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設定行高標準，尤其是新聞資訊類型的應用本身就以文字內容為主，不同的行高對文字的易讀性會產生較大的影響。
文字行高一般會設定為字號的1.2～1.5倍，具體值跟字號有很大關系，文字越小，行高就越大。例如，我們可以設定字號32px為中間值（非絕對），小于或等于32的字體、行高為字號的1.5倍，大于32的為1.2倍。另外，也可以直接將所有行高固定在字號的1.5倍，不難發現，字體越大其折行的概率就越低，試想一下，如果將48px的文字折成幾行，界面還能剩下多少空間？
3、文字段落
文本段落間距的重要性在移動UI界面中并不明顯，更多體現在網頁設計中。需要著重糾正一點的是，部分設計師在設置段間距時習慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、內容脫節。
如有需要，一定要手動設置段間距，這里沒有固定的數值和規律，視覺舒適即可。筆者習慣將段間距設定為字號的0.5倍，例如字號為30、段間距為15，字號為40、段間距為20，僅供參考。
定義間距其實并沒有一個絕對的標準，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數值還得根據產品自身定位及內容組織形式，前提是所有間距都要遵循最小單位并基于倍數形成規律。
在設計界面時，需要利用間距來建立信息層級、提升瀏覽體驗以及表達各元素之間的關系，這就是為什么當我們打開新聞資訊、電商類應用會發現信息非常緊湊，而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎；基數越大、頁面的留白就越多，使用不同的基數，呈現出來的視覺效果也形態各異。
筆者在工作中通常以8px作為基數，以此衍生出8、16、24、32、48、64這6個間距數值，完全能夠滿足絕大多數的使用場景。當然，針對信息較少的頁面也會使用到120、160、200…其他間距數值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數定義間距數值時，沒有40、56這兩個數值，難道他們不是8的倍數嗎？我們以8和16做對比，后者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，后者是前者的1.14倍，其間距的差別微乎其微。敲重點，設計師在定義間距時，需要遵循倍數規則，但同時也要為考慮界面美觀及用戶的瀏覽體驗而跳出呆板的規則，當間距數值越大時，根據基數所跳躍的倍數就越大，其實設定字號也是相同的邏輯（后期詳解）。
從信息層級角度來看，等級權重越高、間距就越大，在現實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。
模塊間距分為塊內間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區分信息層級，塊外間距一定會大于塊內間距，也能保持塊內信息的親密性。
如下圖所示，將裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊，每個模塊內元素的間距都會比各模塊之間的間距小很多。
1、接近性原則
需要通過各元素的間距來體現出信息的關聯性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認為比相互距離較遠的物體更有關聯性，因此，相關聯的元素之間靠的越近，用戶越能感知到信息的關聯，同時更能了解整個界面中各模塊信息的邏輯關系。
2、利用留白強調
很多時候，想讓一個元素變的突出，可以用加大字號、修改色值或后加粗等方式進行強調，但這并不是突出信息的唯一方式，當所有元素都變的突出，那就等于什么都不突出了。如果想讓界面中的元素不同程度的突出，留白也是一種強調信息的方式，它能引導用戶將注意力集中在特定的內容上。
3、使用柵格系統
善用柵格系統（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協調。柵格系統可以讓設計師在元素的親疏關系上更快作出決策，后續不管是迭代還是更換設計成員，都能保持統計的間距規范。
4、文字行高規則
這個問題在很多團隊中都是硬傷，甚至在設計驗收時還被直接忽略。在主流UI設計工具中，添加文本元素時，都會有默認行高，在前面的內容中有講過多行文本的行高為字號的1.2~1.5倍，那么單行文字的行高到底是需要手動設置還是遵循默認，筆者認為都是可以的，但一定要與開發保持一致。
行高決定著文字邊緣與定界框的間距，而開發只能看到定界框與其他元素的間距。
1）默認行高
默認行高值會隨著字號的變化基于一定的倍數自動增減，需要將此規律或倍數告知開發，開發將此規則植入代碼方能最大化還原設計效果。另外在設計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距+文字元素間距=實際間距）或手動測量才能達到精準狀態，下圖為例：
2）手動設置行高
手動設置即字號是多少、就將行高設置為多少，確保文字邊緣緊貼定界框，在設計過程中調整間距時，無需計算，根據設計工具的智能提示調整即可。
5、間距值數量設定
在同一APP應用中，根據最小基數定義的間隔值數量不易過多，一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等，以5px的基數為5、10、15、25、40、60等。數量過多會導致界面不同元素、模塊的間距差異化不夠明顯，數量太少無法滿足多元素、模塊使用場景，也會導致間距跨度較大。
6、明顯相鄰間距值
設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關系，我們需要根據柵格系統中間距值的增大、設置更大的區間值，讓相鄰間距值之間的視覺差異更加明顯。
7、跳出間距的束縛
當界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規范束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等，需知「此消彼長」的道理。
如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發，或許會有不一樣的收獲。雖然在剛開始的時候，規范間距帶來的效果甚微，但隨著團隊規模不斷擴大、界面數量越來越多、內容越來越復雜時就會發現，所有內容統一間距規范，不管是構建一致性界面視覺效果、還是對開發和設計師來說，既能提升用戶體驗、還能提高團隊的工作效率。
間距是否規范使用，決定著界面是否規整、信息傳達是否清晰，即便如此，間距也只是解決信息層級方式的其中之一，切不可讓其限制設計師的發揮和思考空間。制定設計規范有助于項目的高效運轉，間距也好、色彩也罷，設計師依然需要從實際用戶場景出發，通過不斷的思考和經驗總結，打磨出更合理、更符合項目需求的設計規范。
作者：大漠飛鷹CYSJ
轉載請注明：學UI網》間距篇 | 設計師必看的保姆級間距控制規范！
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在本文中所說的圖標，是指界面中的icon。icon增加了界面的趣味性，也提高了識別性，現在是界面中不可或缺的部分。
icon在功能上來說，分為不可點擊的展示圖標和可點擊的按鈕圖標。不可點擊的展示圖標，是為了輔助后面的文字內容，側重點在于文字，通常尺寸為24×24、28×28、32×32，在小尺寸內為了便于辨認圖像，也不要在界面中太搶眼，建議可以使用簡單的線性或者面性圖標；可點擊的按鈕圖標，常用于導航欄、操作欄、標簽欄，通常尺寸為44×44、48×48、56×56、64×64，這類圖標可以結合產品調性進行富有趣味性的設計。詳見圖1.1.1以及1.1.2中紅框部分（該示例為好享瘦app中的界面）。
icon的尺寸一般選擇4的倍數，這樣有利于在成倍縮放的時候，不會造成半像素的情況。例如48×48的icon，縮小2倍的時候是24×24；而34×34的icon，縮小2倍的時候是17×17。在圖標中應盡量避免出現單數。
時下流行的圖標可以歸納為：線性圖標、面性圖標、線面結合圖標。至于mbe風格、斷線風格、色塊風格、漸變風格、半透明風格、雙色搭配風格等等，都是基于以上三種來進行風格設計。圖1.3.1為在dribbble上看到一些比較好看的icon設計，作者ID均備注在右下角，在此僅供參考。除了在dribbble、站酷、花瓣、優設、iconfont等找好看的圖標以外，還可以參考市面上主流的那些app中的圖標。
常用的畫圖標軟件有三個：AI、PS、sketch。
AI的好處是矢量，網格比較規范，容易處理圖標的線面轉換，其中直角一鍵轉圓角功能非常好用，缺點就是調色非常非常的難用，操作不便，只能處理普通色塊，復雜的色彩會耗費很多時間。
PS的好處是調色功能強大，形狀剪切中規中矩，缺點是做線性圖標的時候需要用布爾運算，描邊功能操作起來沒有AI方便。
Sketch的好處是矢量，調色十分智能，并且現在做界面多數用sketch，應用起來十分便捷，缺點是它的造型沒有AI和PS嚴謹，一些轉角的位置不夠流暢，小圖的時候不易察覺，放大后就能看到不流暢的線條。
我通常是三者結合來畫圖標：首先用AI構造基本的形狀。如果是要發作品做展示，就拉到ps里面進行調色和展示；如果是放在界面中使用，就拉到sketch調色使用。
在這里演示的是用AI畫圖標的方法。參數設置方面：首先在首選項-參考線和網格，網格線間隔10px，次分隔線10，勾選顯示像素網格；然后在畫布框內點擊鼠標右鍵，顯示網格；最后在視圖中打開“對齊網格”“對齊像素”“對齊點”。圖2.2.1為參數設置步驟。
參數設置完畢后，新建畫布，我一般新建800×600（dribbble的展示尺寸），圖標應小而精致，不宜建過大的畫布。參考線是為了規范圖標而存在，一般有兩種參考線畫法（復雜規范與簡單規范），它們原理都是一樣的，習慣哪種就用哪種。不要糾結參考線的大小應該是多少，根據你圖標使用的位置來確定圖標大?。ㄒ簿褪菂⒖季€的范圍），有的朋友知道了46px的參考線怎么畫之后，又糾結88px應該怎么畫，其實就是一樣的原理。你可以根據自己的感覺來微調，稍微大點小點無所謂，重要的是不要出現單數的像素大小就可以。在此以44px大小的圖標為例子。
a、復雜規范：
畫一個44×44的正方形，顏色調為灰色，描邊選擇0.25pt（在此補充一個知識點，72ppi下的1pt是等于1px的，具體請自行百度），然后然后畫一個42×42的正方形居于其中。這個42×42的界線為安全界線，圖標不要畫超過這個界線，避免在給開發切圖的時候貼邊切，導致圖標出現不自然的邊界。圖2.2.2詳細展示畫參考線的步驟。
那么，以上的參考線應該怎么使用？我們畫圖標的時候，物體會有長有扁，有圓有方，在統一體量感的時候，就需要用到里面的一些參考線。但是記住，參考線是死的，人眼是活的，畫完以后，要靠感覺微調，直至視覺上體量感達到一致。請看下圖2.2.3分析（圖標是iconfont比賽里第二名的商務計劃書圖標，我臨摹了一遍，在此用以示范，原作者是：回憶的沙漏2003）。
b、簡單規范：
用復雜規范的參考線畫到熟練的時候，就可以用比較簡單的參考線去限制圖標范圍，因為你已經十分熟悉體量感的控制了。簡單的畫法是只需要畫三個正方形，同樣線性選擇顏色是灰色，描邊選擇0.25pt。這里有個小口訣：長物體上下超左右不超、扁物體左右超上下不超、方物體要比圓物體小。下圖2.2.4詳細展示畫簡單參考線的方法。
在畫布中用描邊0.25pt來畫好參考線，然后選中參考線，右鍵-建立參考線。詳細請看圖2.3.1。
前面說到，參考線是為了限定圖標的大小，從而達到整體的美觀與規范。在畫了很多圖標之后，我總結出兩個小訣竅：a、當你總結出你要畫的物體形狀時，只要不影響辨識度，可以適當改變一下形狀，把高的或者扁的物品，畫成比較飽滿的樣子（圖2.4.1的鉛筆為例）；b、當物體形狀不適合畫得飽滿時，可以盡量上下或者左右撐滿，然后旋轉45度，以增加畫面的飽滿感（圖2.4.2的刀為例）。
a、畫圖標的時候要對齊網格，改變圖標大小的時候，注意是不是兩邊同時縮放，有沒有造成半像素，有的話就手動拖動圖標對齊網格。
b、可以使用內描邊來進行線性圖標的繪制，這樣更容易對齊網格，但是內描邊只要使用鋼筆加點來斷點的話，就會自動變成居中描邊。那么使用內描邊的時候怎么進行斷點？可以把描邊進行對象-擴展，轉為形狀，然后用布爾運算來剪切。由于太麻煩，我一般使用居中描邊（不推薦居中描邊是因為在手機界面中的線性圖標一般是3像素，居中描邊怕出現半像素，影響清晰度），但經過檢驗，只要注意把線拖動對齊網格，不會影響清晰度。（補充一個知識點：手機界面中的圖標，線性一般是用3像素，因為2像素太細，4像素又顯得太笨重；當2倍圖的時候用3像素，3倍圖的時候就會變成4.5像素，所以3倍圖的時候要手動把4.5調成4或者5像素。）
a、在這里的統一性不是指所有的圖標里面都要用一模一樣的元素，而是圖標的線粗細、斷點的距離、元素的大小、切割的距離、同樣的色調、風格的一致。當所有的圖標都用一樣的元素在里面時，會造成辨認困難。下圖2.6.1，一眼看過去，一模一樣的笑臉降低了識別率。
b、差異性是指在統一的風格下，通過造型能力，進行圖標的區別，增加辨識度。
圖標的造型塑造都是一樣的原理，關鍵是風格的形成，需要不斷的嘗試。前期可以在dribbble、站酷、花瓣、各位大神的作品展示平臺多看看，學習一些優秀的圖標造型塑造方法、風格、配色，通過大量練習和嘗試，慢慢就可以找到屬于自己的那套畫法。
上面說過，我在AI中造型完畢，會拉到sketch或者PS里面修飾。
阿里的圖庫iconfont是國內非常強大的圖標庫，不僅圖標風格眾多，還有代碼可以調用，十分方便。個人還可以上傳圖標庫到里面給別人使用，并且現在sketch、axure里面都有iconfont的插件，可以隨時調用～
iconfront的網址是：https://www.iconfont.cn
圖標庫：https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.9&manage_type=myicons&icontype=collections&keyword=
只有少數人是天才，大多數情況下我們都要通過大量的練習，才能促成質變。一開始畫不好不要氣餒，只要勤奮，明天的你永遠會比今天的你要進步得多。
原文地址：站酷
作者：牙線姐姐
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
想想圖標的繪制也是有歷史的，從剛開始ps用面切法運用布爾運算去切，有時候線條也是用面切面得到。隨著線性圖標的火爆和普及，開始放棄面切法，轉用鋼筆工具直接繪制，還可以很好的控制線的直角和圓角。當你會使用Ps繪制圖標了，換成ai你會發現更加的快捷方便。隨著Sketch軟件在界面設計中有一席之地，在Sketch里快速繪制圖標也是設計師需要掌握的一門技能。
圖標的繪制方法有面切法，鋼筆繪圖法，錨點法，圓切法。
下面會從Photoshop、Illustrator、Sketch三個軟件去細講基本軟件工具。繪制案例想了很久要含有基本的知識點，使用更多的工具。最后選擇的圖標為齒輪、信號，其中齒輪是最經典的案例了，也是繪制圖標的必修課。
在ps里面繪制圖標使用的基本工具有小白、小黑、布爾運算、鋼筆工具、錨點。
貝塞爾曲線很多寫的文章太官方了，不太懂，也不知道如何下手。我還是總結我工作使用中應該注意哪幾點。
a、錨點倆邊的手柄要保持在同一水平線上。傾斜的錨點的手柄也要保持在同一水平線上。
b、當前手柄的長度不能超越下一個錨點的水平線。
c、上下左右最邊上的肯定是錨點存在的點，其他地方錨點的選擇需要多練習才能找到合適錨點的位置。
c、鋼筆繪制的時候盡量不要讓倆個錨點靠的太近，會讓倆個錨點的手柄沒有施展的空間。
最后如果你感覺貝塞爾曲線還是很難，可以先用Illustrator里面的鋼筆工具繪制，用多了就好了。我之前也感覺Photoshop里的鋼筆工具繪制好難用，今天寫教程做案例試了試還是很好用的，曲線也可以調整的很柔美。
布爾運算是通過繪制規則的形狀進行合并、減去、相交、排除等方式得到新的形狀。
在主題設計的時候大神們的底板用的都很有特色。
在ai里面繪制圖標使用的基本工具填充、描邊、鋼筆、路徑查找器、形狀生產器、對齊、錨點圓角、擴展。
在sketch里面繪制圖標使用的基本工具編輯、旋轉、鋼筆、剪刀、布爾運算、外形、變平。
4.1 Ai制作好轉到Ps，在Ai復制備份一個，然后對象－擴展，ctrl＋c復制，ctrl＋v粘貼到Ps里面選擇形狀圖層，不要選擇智能對象。再用小白工具調整細節，讓每個錨點都和像素網格對齊。
4.2 Ai制作好轉到Sketch，ctrl＋c復制，ctrl＋v粘貼到Sketch，調整參數盡可能是偶數整數。因為大量存在小數點的問題。改變數值還是要看下一圖標整體感覺。
很多人剛開始不會說按照規范來，主要在固定大小里面繪制就好了，其實這樣也可以，但是最終還是個別微調圖標達到視覺上的統一。
比如在56*56px固定大小的區域繪制好全部圖標，不要超出這個范圍。然后整體看哪些視覺比重大需要縮放，縮放是以2的倍數放大縮小。
56-2的倍數 比如56px,54px,52px…
比如在一定大小內，如何制定出一像素？
以48*48大小為例?？此屏袅艘幌袼?，上下左右還是倆個像素，跟上面的視覺平衡是一樣的，都是以2像素為一個基準。這種規范大一點的尺寸也是適用的比如88*88px。
圖標的風格我在《如何系統學習功能圖標》基本都概括出來了，可以分析總結每個風格的特點，快速的制作，也有不少人發我看他們繪制的圖標，會用到倆三種風格同時用到圖標上面，還有就是總結出來的還沒嘗試學會就開始自己去嘗試新風格，盡量還是不要先去嘗試新的風格，之前整理的應該夠用了。
總結雖然講的都是簡單的基本教程，但是也是必須要掌握的，掌握上面基礎教程不單單只適用于圖標，在插畫，圖形繪制中都可以用到。這邊教程ai方面相對篇幅較少，Ai和圓切法沒有寫到，會在下篇《如何學習yoga style?》中詳細講解。最后感謝大家收看。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn