排版布局可以響應式的隨設計師對內容的增刪改而自動調整，無需手動修改徒增成本，進而大大提升工作效率。

瀏覽了許多關于“設計規范”的文章，發現很多都是在針對通用流程和視覺方面在整理，關于交互層面的內容比較少?；诖?，結合最近項目中沉淀的實際案例，以及參考了不少行業通用的設計規范，總結了一篇關于搭建交互規范的流程、框架、要點。希望能夠幫助大家更好的沉淀交互規范。

整理了一套B端設計規范，包括色彩規范、字體規范、圖標規范、布局柵格、組件規范。

本文將以「產品與用戶之間的信任」為出發點，從產品體驗的角度，對比產品體驗層面的差異化，為大家提供設計思路，助力產品數據的增長，設計出既好看又好用的產品界面。

最初的圖形界面

文字和排版可以追溯到五千年前，而圖形化界面僅僅只有40年的歷史。最關鍵的轉折點出現在1973年的施樂，最早的圖形化界面出現在了他們的Alto電腦上，而這個設計就是現如今圖形化界面設計的基礎。在Alto 的界面誕生后的10年里，幾乎是它一家獨大，并且它也被大家視作為數字技術的未來。

早期的Alto 在80年代進化為著名的施樂之星，而施樂的這個設計方案也成為了第一個商用的操作系統圖形化界面。

不過不論是Alto 還是施樂之星，都沒能真正意義上崛起。不過施樂的圖形化界面最終深深的影響了蘋果和微軟的道路，比爾蓋茨和喬布斯先后在施樂的研發中心觀摩了施樂之星的運作，而喬布斯更是在1984年先人一步發布了著名的Macintosh 系統，也就是后來我們所熟知的Mac OS。

Macintosh 的發布不僅僅意味著相對成熟的GUI的出現，而且它為大眾帶來了真正意義上的自定義字體的功能。這款系統內置了許多以著名城市命名的字體，也正是在此之后才有越來越多的著名字體的數字版本在數字平臺上發布并應用。

仔細觀察這些早期的字體，我們能夠發現，雖然已經是圖形化的界面，但是其中絕大多數的界面元素都還是以純文本的形式而存在，它們以一種奇妙的方式被整合到一個界面當中。循著界面的發展歷程沿路看過來，不難發現，文本和排版幾乎是貫穿始終的主線，它是一個不容忽視的核心類別。

文本即界面

界面中的每一個文字、每一個字符都很重要。好的文本是好的設計。文本是最根本的界面，是我們設計師來塑造和打磨這些信息。

看看下面的天氣界面的設計，想象一下將所有界面元素都擺在桌上會是什么樣的效果：無非就是兩張圖，幾個圖標和一大堆文本。

作為設計師，工作并不是將一堆隨機的內容和元素排布在屏幕上，讓它們看起來夠漂亮就行了。真實的情況是，我們要從最核心的內容和文本開始著手，然后從這里著手細化，并完善出其他的部分。這就是我們工作的核心。

文本的清晰度同樣扮演著關鍵性的角色。如果我們的大腦花費一兩秒鐘單純只是分辨一個字形，那么清晰度上的微小差異是無傷大雅的?？墒钱斔鼈兘M合成為大段的文本，不同的字母組合構成不同的詞匯、段落的時候，清晰度的影響就更大了，排版的重要性也顯得更加明顯了。

當然，影響界面設計的文本屬性還有很多，比如平衡性，定位和層次結構，但是好的文案和排版的影響至少占據整體影響的95%。

在偉大的設計師眼里，文本不僅承載內容，而且可以構成界面。
– Oliver Reichenstein

我們如何閱讀

既然屏幕上的文本顯示是如此的重要，那么我們應當先了解人們是如何閱讀的，而文本顯示又是如何影響我們設計決策的。

讀過Billy Whited 的文章《Setting Type for User Interface》之后，讓我對于文本閱讀的效率有了更深的認知。一個少于20個字母的獨立單詞放在句子中會更快被理解，而單獨放置的時候我們需要耗費更長的時間來識別。

其實這個研究結果也表明我們閱讀較長句子的時候，并非是逐個單詞地閱讀，而是跳躍著閱讀功能性的詞匯，我們將這種閱讀方式稱為離散跳躍式閱讀，俗稱掃視。

掃視讓我們的閱讀能力更強，我們甚至會跳過短的功能性詞匯。

我們應當記住這一關鍵特征，因為我們的界面中所承載的詞匯大多是孤立的單詞。簡單說來，界面是無法利用掃視這種方式來獲取信息的。

總的來說，單詞在閱讀中發揮著無比重要的作用，無論是作為內容還是作為界面元素，均是如此。無疑，選擇合適的字體就相當重要了。

過去，人們常常認為眼睛和大腦是通過單詞的外輪廓（Bouma Shape）來識別單詞，當然，后來的研究證明這個想法是錯的，單詞的可讀性和易讀性的影響因素不止是外輪廓，字母本身的形態、細節和清晰度同樣深入的影響著它的識別度。

是什么讓字母清晰可讀？

其實這個問題一開始并不是那么好回答。閱讀很大程度上依賴于我們的習慣，越常見的內容對我們而言越容易識別。這樣一來，我們就不那么容易判斷讓字母清晰易讀的影響因素了。為了了解這一點，我們需要將句子分割為單詞，分解單詞為字母，在字母中查看細節。

早在2008年，維多利亞大學心理學系根據測試結果得出結論，大寫和小寫的拉丁文字母是最容易識別的，也最易于閱讀。

這項研究有趣的地方在于，它揭示了一個事實：每個字母延伸出來的線性端點是最易于識別的地方，也是每個字母的特點所在。

上面的圖片標識出了這些最易于識別的部分。每一款字體在這些部分應當設計為最通用、最為人所熟悉的樣式，同樣的，它們也應該強調每個字母的差異。

在2010年的時候，另一項由 Sofie Beier 和 Kevin Larson 開啟了一個新的研究項目，這項研究專注于測試經常被誤讀的字母和字符的識別度。

這項研究表明，在相同的字體和相同的尺寸、相同字重的情況下，有些字體或者變體的細節確實比其他的更加清晰、更易于識別。這項研究的結果說明，纖細的字體加粗之后識別度效果會明顯會增強，而字母的X高度如果能夠占據上伸區或者下探區的空間，識別度會更好。

為了更好的理解字體的清晰度的概念，你可以下載我所開發的這款工具 Legibility APP 來測試不同字體在模糊、炫光等多種不同情況下的清晰度和辨識度。這是一款處于測試階段的工具，可以在Chrmoe、Opera和Safari 中運行。

UI中的字體使用

理解了用戶閱讀的方式和字體可讀性的影響因素之后，我們應當開始了解UI中的字體的幾個關鍵因素。下面是UI中字體使用的10個關鍵因素。

1、可讀性

可讀性是UI中字體所需考慮的首要因素。字母字形必須清晰可辨，作為UI元素，其中不同的字母必須可以被用戶輕松辨別出差異。許多經典的字體，甚至包括 Helvetica ，都沒辦法清晰分辨 字母 i 的大寫形態 I，和大寫字母 L的小寫形態 l，這在界面設計中無疑是有影響的。

上圖中，左邊的字體為 Source Sans Pro , 右邊為 Helvetica，無疑對于 Illiterate 這個詞Helvetica 字體下前三個字母完全無法分辨。有部分用戶也同意Helvetica 并不適合作為UI界面的顯示字體而存在，因為這款字體終究是為平面印刷顯示而設計的，并非為屏幕而生。

在iOS 7 時代，蘋果短暫地將 Helvetica 作為系統的主要顯示字體的時候，曾對特定的用戶群體造成過信息識別的困擾。這也最終催生了我們現在所看到的蘋果官方字體 San Francisco。舊金山是為UI界面而生的字體，它的x高度比Helvetica 更高，字母間距更寬，字母間的識別度更高。

2、適度

一款理想的UI界面所用的字體，不應當過于“顯眼”，而該是悄無聲息，“隱型”的。當用戶在試圖完成某項任務的時候，字體不應當給用戶以“出戲”或者“顯眼”的感覺，也就是說，字體不應當超出用戶的認知負荷，而內容和信息才應該成為真正的關注點。

3、靈活

給UI界面使用的字體應當具有靈活性。我們曾經為 Medium 做過用戶體驗設計，作為一個網頁博客平臺，我們很難去控制用戶的能力、內容、瀏覽器、屏幕尺寸、網絡帶寬和連接速度，包括輸入法。

所以我們最終為它所選取的字體應當支持大量不同的內容，在不同的尺寸下擁有良好的識別度，能夠兼容不同的設備，尤其是在小屏幕上。Sans serifs 字體就是專門為小尺寸低分辨率屏幕而定制的。

4、x高度的上限

x高度的參考標準是小寫字母x的高度，同等尺寸下，x高度更大的字體更易于識別。不過x高度也不是越大越好，當x高度超過一定限度的時候，小寫字母n和小寫字母h就很難分辨了，這一點應當注意。

5、更大寬高比

字母的寬度和高度的比例也是相當重要的一個屬性。寬度和高度比例越高，字母在小屏幕上的識別度就越高。

6、寬松的字間距

字母之間的間距和字母內部的空間同樣是影響字母可讀的因素。字母間距太小同樣會影響整體的可讀性，而好的顯示字體會更好的控制字母間距，確保單詞在視覺上的“透氣性”，甚至可以營造出一種韻律感。

不過字間距不是越寬松越好，太過寬松會讓整個單詞看起來過于松散。有一個值得參考的標準，就是字母之間的間距應當比字母內的開口縫隙略小一點。

7、低筆觸對比度

許多字體不同的筆畫粗細不同，而對于UI界面而言，筆觸間的對比度越小識別度越好。較大的筆觸對比度下，字體在小尺寸屏幕上，較細的筆畫會難于分辨。

8、OpenType 功能

OpenType 功能對于字體而言是相當重要的。支持OpenType的字體擁有更大的靈活性，對于不同的語言和特殊的字符有著更為優良的兼容性。

9、備用字體

接下來要說的情況可能大家多少都碰到過。網頁在完全加載出來之前，部分內容因為字體沒有加載而無法顯示。

其實這可以通過先加載本地字體，顯示內容，等網頁字體加載好了之后再行替換，以達到無阻塞顯示。這種方法的缺陷是需要預先設定一個可調用的本地備用字體。

10、Hinting

Hinting 指的是為了字體為了保證最大的可讀性而針對顯示器狀況進行調整的過程。Hinting 可以通過匹配顯示器的像素柵格讓字體顯示更加清晰，降低誤讀的可能性。

這項技術最初是由蘋果公司所提出的，不過因為TrueType 字體技術的出現，Hinting 正在消失。

未來

隨著新的UI標準、排版技術的提升，字體技術也在不斷的進步，在不遠的未來，字體會從傳感器獲得信息，更好的兼容不同的環境、隨著亮度、設備、距離而進行智能化的調整，甚至復雜而龐大的中文字體，也可能作為靈活的網頁字體而存在。

字體會讓我們的工作更加便捷

讓界面交互更快，更加觸手可及

讓UI更加易用

更加便捷

也更加清晰而高效

文章來源：優設  作者:陳子木

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

Peter Drucker 說過：「量化才能管理。」這個格言后來成為了我的信條。我決定將我的目標量化，將它分解成為最基礎的習慣來執行，并且以每天一定量的執行，來實現最終的目標。

我們先構建了一個免費的 Chrome 插件 Confetti ，這是一個能夠幫你追蹤日常習慣的工具，每次完成一個任務，都會有五彩繽紛的紙屑效果出現，祝賀你守住了習慣，達成目標。

以下見解希望對你有所幫助!

1、一開始就要界定好產品特性

一開始，我和 Wilson 就決定使用3屏的主要功能，并構建了一個粗糙的原型。但是，我們沒有足夠的遠見，無法設想我們的產品最終的方向，也沒有對全部的想法進行深入的打磨。

最終，我們向后退了一步。我們回過頭來，確定了最小可執行原型的發布日期，以及真正的核心功能。我們在 Notion 上創建了一個文檔，并且開始梳理和管理哪些功能是「必需品」，哪些功能「如果有了會更好」。比如，登錄、注冊、新用戶引導是必不可少的功能。但是，我們認為「重新排列習慣」是一個提升體驗但是并不亟需的功能。

我們基于這一點，我們開始抓住核心功能，盡可能讓它們足夠易用，強化核心特性。通過確定核心功能的優先級，并且確定發布日期，借此緩解我們的精神壓力，確定我們不會被成堆的功能所淹沒。這也似地我們有足夠的動力解決核心功能。

2、有很多流程和狀態需要搞定

在設計產品的時候，我經常被提醒要處理好每一個邊緣情況，填好每一個坑，確保體驗的順暢。從零開始構建產品是一把雙刃劍：基于自己的構想來創造產品是令人興奮的，但是相應的，我需要經常在舒適區以外處理問題。

我一直在 Skookum 從事產品設計的工作，而這些工作通常都是在一定的約束條件下進行的，但是現在所要處理的產品則不同。之前的產品都可以借助現成的設計系統，有早已搭建好的設計語言，有完整的組件，有明確的 UI 狀態，有非常明確的基礎架構，但是這次是我自己的產品，所有的這些都沒有。而且，這個產品還可能會存在幾種極端的情況、流程和狀態。

比如，在注冊流程中，按鈕會有默認、禁用、激活、填充、錯誤、懸停等幾種狀態，但是除了這些之外，我還需要考慮諸如密碼重置的流程和體驗，這可能會涉及到 6 個高度相似的 UI 界面狀態：

1. 輸入 Email
2. 重新發送 Email
3. Email 通知設計
4. 輸入新的密碼
5. 錯誤界面
6. 成功界面

這個過程中，有很多東西都令我一度感到迷惑，這也引發出我下一個要說的要點……

3、創建用戶流程

項目開始之后，我很快就遭遇了組織架構問題。因為我是在工作之余來創建這個產品，這導致我犯了一個非常嚴重的錯誤：我沒有按照傳統的產品流程來創建產品，這隨后導致了一系列的問題。

按照標準的產品設計流程，我需要從用戶流程開始創建，定義用戶可能會執行的流程，并且針對主要的流程界面進行必要的總結說明。因為這個項目和之前的工作不一樣，我一開始就忘記了遵循流程這件事情，我錯誤地將它視作為一個包含幾個簡單界面的簡單項目（是不是聽著特別耳熟？很多所謂的小項目翻車都是從這里開始的）。這樣一來，當我開始處理諸多按鈕的不同狀態和界面變化的時候，整個用戶流程變得混亂不堪，并且我很難確定其中的體驗漏洞有哪些。

最終我停止了這種隨性的設計方式，并且在 Whimsical 當中創建了完整的用戶流程。于是我很快清楚了那些環節有所缺失，以及整個界面流程的走向。

按照用戶流程來梳理界面的時候，可以對于整個產品的屏幕狀態有所了解，并且隨著產品的發展膨脹，用戶流程的重要性會隨之增長，成為至關重要的部分。

4、交互應該反饋到UI中

的確，在完成整個 UI 之前，不應該開始向著項目當中添加動畫。但是，不添加并不意味著你無需考慮。實際上，不同的微交互和動畫對于實際的體驗影響是巨大的。你在思考 UI 設計的時候，就應該考慮到微交互和動畫的使用，避免在后續動效和交互落地的時候，進行不必要的修改。

比如，當我在設計「達成成就」這一體驗的時候，我就考慮到了需要用到的微交互的效果，所以在我設計 UI 的時候可以順著我自己的喜好來進行設計，并且將可能會用到的動效拖到某個角落暫時記下來，避免在設計 UI 的階段，影響了整體的流程和效果。而后續加入動效的時候，就會方便很多。

我認為，將 UI 和交互結合起來考慮是非常重要的，因為兩者共通塑造了體驗。如果在設計 UI 的環節直接加動效，會讓整個設計過程變得復雜臃腫。

5、盡早獲得反饋

其實這也是我在這個項目中犯的一個大錯：等了太長時間才獲得反饋。

我通常是在晚上回家和周末才有空推進這個項目，在很長的一段時間內，我沒有真正告訴任何人。

當我終于同我的家人、朋友、用戶以及網上樂于嘗鮮的用戶公布了這一產品之后，他們在使用過程中，開始注意到了很多細節上顯而易見、但是我并沒有發現的問題。我意識到我作為產品的設計者，是很容易陷入并沉迷用戶體驗當中比較孤立的一部分，反而會忽略很多顯著的問題。

回想一下，如果我能盡早向用戶和朋友展示設計和原型，那么我會在更早的時候發現問題，并且在獲得反饋之后才進入開發階段，彌補大量的損失。

6、在別處獲得啟發很重要

很多設計師會認為，所有的想法都必須是原創的才行，否則就是欺詐。但是稍微想想，其實徹底的原創其實很少的。當你看到一個優秀的產品，它優秀的配色和恰到好處的交互可能會讓你覺得：「已經有人做出來了，我的想法在它面前完全沒法比擬?！?

這種思維方式其實有著極大的缺陷，并且抑制了你的創造力。

當我發現我的設計有缺陷的時候，我會竭盡全力去搜索和了解更多網上已有的設計。我會觀察和思考別的公司和產品是如何設計新用戶引導流程的，如何管理用戶個人信息的。我從來都沒有復制被人的體驗，但是會隔三差五去鉆研別人所創造出來的優秀細節，然后將這些細節借鑒到我的設計當中。

我最喜歡的一個范例，是從模態狀態下，旋轉退出的效果。這是我偶然在一個網站上看到的效果，因此我決定將它添加到 Confetti 當中，我還在著陸頁的按鈕中加入了類似的特效。

事實上，一切設計都是混搭創造出來的。你借鑒細節并不意味著抄襲，不要害怕去發掘和學習別人的優勢和亮點，你要學會有機地拆解和借鑒，靈活地運用到自己的設計當中，它就像調制雞尾酒一樣有趣。

7、勇敢面對身份的變換

當我們開始設計的產品的時候，我和 Wilson 頭頂上的身份就一直在變。我們是 UI設計師，要負責UX，要做交互，也制作動效，要進行平面設計，還要考慮市場營銷，要管理產品，我們也要扮演其他的角色。

職責如此之多，以至于我們不可避免地遇到我們能力范圍之外各種新問題。我們必須承認自己陷入了困境，尋求外部幫助成了必要的選擇。

專注于自己專業的領域，其他不專業的方面來尋求外部幫助是非常合理的。比如在一個項目當中，一位藝術家負責了絕大多數的風景插畫，另一位藝術家則完成了肖像畫的部分，這很正常。

我希望產品的外觀和功能能夠保持高度的一致性，并且我確實做到了。但是不要誤會我的意思，我并非是不敢走出舒適區去學習代碼開發，而是在這樣的項目當中，我并不適合從UI和UX領域延伸出去，畢竟完成項目的開發優先級比學習代碼更高。

8、保持簡單更重要

盡管給 MVP 安排好了發布時間，可以防止這個項目被無限膨脹的功能特性和工作量所淹沒，但是這樣依然無法防止我們基于已有的功能進行改進。

很多人都喜歡 Reid Hoffman 的一句話：「如果你對于產品的第一版感覺不尷尬，那你一定是發布晚了?！共贿^，我們正式發布的第一版的產品，并不會顯得太尷尬，但是目前來看，當時那種簡單直觀的狀態，比起再花費好幾個月時間反復打磨之后再發布，來得更好。

在發布新產品之前，我們必須考慮2個問題：

1. 我們是否相信我們所構建的產品，能夠為用戶帶來價值？
2. 我們是否竭盡全力了？

這些問題讓我們最終能夠達成目標，且按時發布，避免分心。專注交付最核心的功能，而不是被一堆冗余的次要特性所壓倒。

9、良好的交接更加省事省時

從項目一開始我就一直在做項目的管理和組織設計素材，以便后面進行開發。不過，由于我一開始就使用了 Zeplin 這樣的協同工具，確保了我可以輕松地將所有的素材都順暢地交給負責開發的 Wilson。作為一款設計系統工具，Zeplin 讓我無需浪費時間對素材進行分類，非常便捷。

在交接的過程中，我還做了一些優化：

1. 將所有的界面都組織到了 Zeplin 當中，并且進行了處理
2. 我給所有的畫板進行了針對性的命名，方便檢索
3. 我在 XD 中標注了需要導出的素材
4. 我保留了舊有的界面存檔，并且確保交付的新版界面是最新的

10、一次寫明所有的UX文案

在設計 UI 的時候，界面中的文案部分是臨時編寫的，這促使了一次設計完成之后，整體的文案是不一致、不協調的。

我很希望一開始就創建了一個單獨的文檔，一次性將文案部分全部重寫，包括提醒、注釋、標簽、彈出框提醒等等。而實際上，我的文案都是在設計 UI 的時候附帶著寫下來的，導致整體的一致性嚴重缺乏。

這種文案本身在調性上的缺乏，導致了整個產品在語氣和用詞上是混搭式的，一致性很差。

所以，在產品上線發布之后，一直在對文案進行修修補補。

文章來源：優設(陳子木)   作者:Danny Sapio





分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

配色/圖標什么的是基礎嗎？

之前一直沒有太多關注過如何定義一個 APP 的配色，或者如何畫一個漂亮的 icon。曾經的上級指示都是這些基礎對商業的不可量化。于是我在思考一個問題，就是沒有直觀商業價值的設計要素都失去了意義變成了所謂基礎的事情嗎？

半年前面試字節的時候，面試官問了我有關配色的定義，細節到為什么是這個色值。當時十分震驚于這么細節的問題，之后我就想起了之前有位朋友給我發送過一份有關支付寶「藍」的定義 pdf，洋洋灑灑幾十頁就是為了解釋他們為啥用這個有點臟的藍色#108ee9 當主色。

所以其實 APP 的配色/圖標與主品牌是一脈相承的，它是品牌的延續與象征。它以最直觀的態度傳達給用戶，這個產品以及品牌的調性，并以此建立最強有力的視覺識別性。所以我覺得它是可以有條件地展示在我們設計方案里的，但一定注意它的篇幅和表達的方式，維度在品牌傳達這一層就對了。

至于如何展示和定義你的 APP 配色，一般 2 類情況。

1. 在品牌主視覺配色基礎上的適配

這種情況一般適用品牌主視覺方案已經設計完畢，APP 端作為延續。這個時候一般注意配色從 CMYK 模式到 RGB 的轉換，所以作為 APP 的配色，具體色值上可以稍作調整，使它更適配于 LED 屏的用戶感知與舒適度。

另外可以使用透明度進行色彩分階段，一般從 0-100% 分為 10 階就足夠我們日常界面設計使用了。

2. 0-1定義APP配色

這種情況下我們從感性和理性 2 個角度去定義顏色。

從感性的角度分析：情緒板應該大家都熟知的了，根據不同的行業和用戶定位得到相應的關鍵詞。對應不同的關鍵詞再搜集對應的圖片，從圖片和自然感知中提煉出主色。

從理性的角度分析：我們把色彩分為對比色、近似色、復合色、單一色、三角對立色和漸變色六種。根據產品的類型和定位，我們決定使用什么樣的配色。比如一個年輕大學生專用的社交型 APP，我們可能就傾向更多地使用對比色這樣的撞色得到更多潮流與青春的味道。

至于圖標的話我就更不用多說了，大家肯定都記得那些非?；A的繪制圖標的法則。個人認為圖標也不太需要放一個單獨的篇幅去展示，除非它有一些新奇有趣的亮點。

界面框架，只是框架而已嗎？

在之前的文章中有寫過，匹配產品定位的界面框架一旦輸出，對整個 APP 之后的迭代與功能設計都有很直接的影響。定義整體的UX 框架方案，是實踐設計目標與策略的過程，基本圍繞著這 3 個出發點：匹配產品定位、滿足業務拓展性、符合舒適度美學 。

1. 定義整體框架

首先我們從宏觀角度分析，一方面產品的業務線處于什么情況，是相對獨立的業務主線產品（舉例：拉勾）？還是平臺級產品（里面包含了許多垂直的業務線，舉例淘寶）？如果是平臺級產品在整體框架設計時就需要考慮跨端跨業務的框架拓展型。

舉個例子，就是在定義平臺框架的時候要考慮這個框架與容器是不是同時適用于底下的子業務線，同時當這個框架到了 H5、小程序、PC 的時候需要做哪些適配調整，是否都可以很好地進行兼容適配。

另一方面，整體框架設計的類型是否符合設計目標。舉個例子，無框式超大留白的框架設計雖然看上去很厲害，但在大部分商業產品中它的實用性卻非常低的。假設說我們今天需要做一個電商類的 app，設計目標是希望能夠提升業務轉化以及購買效率，那么展示效率與功能分區就顯得尤為重要，它就更適合一個相對緊湊的卡片式為主的框架設計。

其次從微觀的角度來說，遍地就都是細節了。舒適度美學這一說，其實難免有些抽象，我們把它轉為相對合理一些的落地原理就會清晰很多，像大家熟知的間距 4 倍數原理、對齊原則等等。但是這些微觀的內容不建議大家放到方案展示里，因為它并沒有針對單個方案的特殊性，更像一種大眾共識。

△ 多說無益，直接上最終的效果圖，方便大家參考

2. 具體容器解析

我們特地把單獨的容器部分拿出來解析，是因為自定義容器是展示核心業務最主要思考呈現，同時還可以配合運營做很多提升業務效率的配置。在做具體設計的時候，我們需要區分「端上固定」模塊和「運營配置」模塊之間的差別。

「端上固定」模塊

顧名思義就是開發端上需要寫死的模塊。寫死的模塊意味著，無論一個配圖還是一句文案，也只有開發童鞋修改后通過發版才能實現內容變更。一般適用于相對固定的產品功能以及 UGC 用戶生產內容。比如：拉勾上傳簡歷功能、斗魚的直播間列表。

「運營配置」模塊

相對「端上固定」，「運營配置」就不需要跟著發版，可以隨時后臺上傳替換模塊內的內容，適用于需要 PGC 生產的內容。說到這里很多童鞋可能馬上就聯想到 banner，彈窗的運營位了，但其實除了這些之外還有很多容器模塊是需要靈活配置為「運營配置」模塊才能更有效地提升運營業務價值。

我們可以這樣來區分「運營配置」模塊類型。

一種是純運營配置模塊，即設計與開發輸出框架、定好配置字段限制之后，運營可以獨立完成后臺配置的。比如：資訊 app 0-1 前期的資訊列表內容。

另一種是運營設計配合模塊，即需要設計配合運營輸出一定的設計圖才可以進行后臺配置的。比如：常見的 banner、彈窗、熱門推薦專題等。

在 0-1 的設計方案中，更推薦大家展示「運營配置」模塊的內容與解析，因為 0-1 是個以拉新為主的階段，運營顯得尤為重要，所以我們的設計需要側重考慮整體的運營效率與轉化。

如何展示亮點設計？

在我們概述完大部分的整體思考路徑與設計方案后，我們需要由面到點，從全局提煉細節，突出自己的設計方案亮點。

而如何提煉這個亮點呢？是挑一個我設計的最好看的界面呢？還是直接放最復雜的那個流程？以下是推薦選擇的亮點設計：

1. 完成理論實踐，并可以量化價值的設計case

大家應該都了解，一些和設計息息相關的數據 UV/PV/GMV/ 相關業務指標等，以及一系列在實踐中很好應用來解釋設計方案的理論支撐比如 5W1H、GSM 與五度分析……這些數據和理論是支撐我們設計更飽滿更有說服力的重要支點。

雖然在 0-1 的項目里，我們基本不太用得上優化數據比對（因為產品初期用戶數量少，產品體驗路徑也是一直處于不斷試錯階段），但是我們還是可以借用上文所述的一些方法論或者 A/B test 來完成我們的方案思考過程展示。

那些你在完成踐行設計策略完成設計目標時獲得的數據指標要提前預知，養成習慣之后，你就可以快速輕松地察覺到哪里有可以做 A/B test、進行埋點數據比對的地方了。

2. 影響上中下游環節的設計case

除了對業務提升價值的項目外，我們有時候也需要注意對品牌設計、產品、運營、技術等上中下游造成影響力的設計項目。通常這類設計大部分也都是設計自驅發起的，能起到提升各方人效和業務效率的作用。

舉例的話，我能馬上聯想到的就是多方協作的大型線上組件庫，可以參考阿里的 Ant design、滴滴的魔方，在之后的版本拓展中甚至可以延展成功能更加強大的多方協作 UX 設計資源中心。

規范與組件庫的定義真的備受關注？

感覺近期面過的 80% 的公司都對組件庫的定義非常關注，所以我們要做的不僅僅只是放一個視覺規范或者組件庫的全景圖，而需要對組件庫進行拆解。

文章來源：優設(土撥鼠)   作者:Nana的設計錦囊



分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

一.  什么是界面交互動效？

界面交互動效是展現界面間的轉換和界面內元素變化的交互反饋。而效果就表現在觸發與結束的過程中，表現清晰的層級關系，自然的引出與結束。交互動效有著承上啟下的重要作用。

二. 界面交互動效是用來干什么的？

• 讓用戶清晰地感受到當前所處場景和層級關系。
• 多種UI元素之間的相互轉換。
• 給用戶制造驚喜感使用戶愉悅。

三. 界面交互動效五大注意點

• 避免動效過于花哨、酷炫、標新立。
• 在效率型應用中，過度、無意義的動畫只會阻塞任務流程。
• 動作動效不超過1秒。
• 用戶專注內容時，不要用吸引注意的動畫去打擾。
• 出現頻率高的操作動效，避免用戶反感，延遲操作時間。

四. 如何設置緩動曲線與時間讓動效更加自然，可以看下面的一些總結

• linear曲線（勻速運動）除了一些特殊場景如加載、很少被使用。
• easeIn（先緩后快）使用場景較少，主要在掉落、中使用。
• easeInOut（頭尾緩、中間快）通常在輪轉切換的動畫中使用，這類動畫的觸發對象與運動對象并不是同一個元素。
• easeOut（先快后緩）最常見的效果，其觸發對象與運動對象往往是同一個。主要用在展開、收起、出現、移動等動畫中。當不知道用哪個緩動曲線時，用這個一般不會錯。
• 曲度主要表現運動過程的力的大小，曲度越大，啟示力或阻力越大。
• 回彈則表現的是運動的劇烈程度及對象的質地。
• 運動時間一般都控制在0.3s-0.8s之間，過長的時間會讓人感覺拖沓，不自然。

五. 界面交互動效如果以動效的表現屬性來分可以分為兩種

第一種：為銜接類型動畫

主要針對不同界面直接的銜接，為帶來更流暢的操作觀感所做的設計，彌補兩個界面直接的差異所帶來的用戶感知落差。

第二種：特效類動畫

特效的核心目的是為了吸引用戶的注意力，提高信息敏感度，在游戲界面設計當中使用更為廣泛，能夠帶來更加絢麗的動態畫面。

六.界面交互動效如果以界面的維度來說可以分為以下兩類

第一類：界面內的交互動效

在一個界面內的交互動效特別多，例如點擊加號出現下拉菜單，出現浮層動畫提示，點擊舵式導航出現選擇類型和遮罩，點擊按鈕出現評論點贊，當前頁面的展開收起，加載等等。如下圖所示：

第二類：界面間的交互動效

幾個界面之間的的交互動效通常是平緩過渡到下一頁。常見的有以下幾類：

△ 硬切到下一頁

△ 下一頁從右往左推入（上一頁從左往右推出）

△  下一頁從下往上彈出

△  上一頁的元素過渡到下一頁

總結：

• 動效創意方面的創新要依據用戶的認知模型。單純很炫很酷的動效如果脫離了用戶的認知模型，那么這樣的交互動效對于整個產品來說是有害的。
• 做界面交互動效的目的是為了更好地落地。如何更好地高效地表現我們設計的動效。同時使得我們制作的動效可以很好的運用到實現落地中，這是很重要的，不然所有的一切都是海市蜃樓。

在創建實用、可訪問性良好且視覺效果頗為出彩的 UI 界面的時候，我們大多只需要進行有限度的微調，即可達到頗為不錯的效果。在之前，我已經撰寫了很多實用的 UI & UX 優化小貼士（看完文章在文末獲?。?，這篇文章繼續增加 7 條實用的建議，一起來看看吧！

B端設計基礎指南：網格系統