如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
1.字號的設置
2.根據需求隨意組合
3.英文的行高
4.英文的行間距
5.中文的行高
6.中文的行間距
7.行高的禁忌
8.標題行高
9.正文行高
10.混合編排
11.字體選擇
1.字號的設置
字號就是字體的大小，文字從大標題H1-H7、小標題、正文、注釋都要配置相對應的字號。頁面的字號我是以4為基數進行遞增的，最好采用偶數。像14號字的正文和13號字的注釋，這種比較小的字可以不以4為基數來做。不管設計師怎么去定義字號，只要視覺上美觀大方并具有關聯性，采用哪種規則去約束它都可以。
另外所有的字體都要調試出深色和淺色兩種配色，并分別應用在白色底色和黑色底色當中。黑色底色展示效果不好就不做展示了。
2.根據需求隨意組合
當我們定義好字號，標題和正文就可以根據實際項目需求進行自由搭配了。在給標題和正文選擇字號時要注意它們之間的對比關系，字號差異越大它們的層級關系就越明顯，但它們之間的差異又不能太大，差異過大會影響整體的視覺平衡性，給人一種不和諧不自然的感覺。
例如：標題字號20px搭配正文字號12px；標題字號24px搭配正文字號16px。選用哪種標題搭配哪種正文也是由設計師的美感決定的。
3.英文的行高
在設置文本行高的之前，需要理解一下“行高”與“行間距”的差別。前端DIV+CSS和設計Affinity Designer等繪圖軟件都是以“行高”來進行定義的。在CSS-Style line-height屬性是行高，值分別以百分比、數值和像素來表示。例如：h1.test {line-height:112px}，那標題h1的行高就是112像素了；繪圖軟件中控制行上下距離的也是行高。好的言歸正傳，中文的行高與英文行高會有一些差異，英文的行高指的是一行英文的基線與下一行英文的基線之間的距離，如下圖所示。
基線是英文字體結構中的概念，先簡單了解一下它吧，以后講到字體的時候再講它吧。我們在繪圖軟件填寫行高的數值時，改變的就是上圖所示的這段距離。
4.英文的行間距
英文的行間距就沒有行高那么復雜，也不用畫基線。英文的行間距跟中文相同，指的是一行英文的底部線與下一行英文的頂部線之間的距離。其實也可以簡單的理解為“行與行之間的距離”并稱之為行間距。另外英文底部和頂部都有對應的專有名詞的，在英文字體結構中最頂部/最底部隱性的兩條線稱為“上沿線/上限線”和“下沿線/下限線”。這塊的知識先了解一下就行，以后在字體結構中會講到。
5.中文的行高
接下來理解下中文的行高。上面講到說英文的行高是由基線決定的，但中文字體與英文字體結構不一樣，中文里沒有基線的概念，那該怎么定義行高呢。中文的結構屬于方塊字沒有基線，所以中文的行高指的是一行中文的最底部與下一行中文最底部之間的距離。中文字體結構中沒有上沿線/上限線和下沿線/下限線的概念，它們只存在于英文字體結構中。
6.中文的行間距
中文的行間距就比較好理解了，跟英文的行間距的道理相同。是指一行中文的最底部與下一行中文的最頂部之間的距離。也可以理解為行與行之間的距離。
雖然說行高與行間距的差別不太好區分，而且還有些繞，但理解它們還是很有必要的。
7.行高的禁忌
不管是標題、正文還是注釋，他們的行高都不宜過高，行高過高會導致內容不易閱讀，文字之間的整體性也會被打散。標題的字號越大行高應該越小，正文的字號越小行高應該越大。當然這些規則都是相對的，行高大小要合理把控，不能太大或過小。那要如何合理設置行高呢，往下看。
8.標題行高
標題的行高由字號決定的。平面設計中有時候可以把行高設置與字號相同，例如120pt的字號設置120pt的行高是沒有問題的。在頁面中行高是這么計算的，字號x倍數=行高。例如下圖所示，大標題H3設置的字號是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字號與行高的倍數是一點點測的，因為字號與行高的比例不會小于1.0（1倍），我就根據自身審美進行測試，從1.0/1.1/1.2/1.3....開始測，直到測出自己滿意的行高。如下圖所示，帶顏色數字的是倍數。
最終的行高還是由設計師直觀判斷決定的。所以做設計要理性中夾雜感性，規則與創意并存才是一個優秀設計師需要兼備的品質。那我就拿中文字號36px和英文字號24px來舉個例子，這樣大家好理解一些。如下圖所示：
從測試結果中找到自己滿意的行高就可以了。字號x倍數=行高，這里也不怕倍數小數位太多的問題。在繪圖軟件中是以像素為單位，但有時候前端代碼會用父繼承單位“em”。例如：大標題H3的字號是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那轉換為前端代碼就是h3.test{line-height: 1.3em}，直接做約等于就行了，差一點點看不出來的。
9.正文行高
來接著往下講。正文行高與標題行高相同，差異就字號的不同選擇的行高也不同。標題行高倍數大概1.0-1.6不等，正文行高倍數大概1.6-2.4不等，這也沒有一定的標準，還是得根據項目情況與實際效果綜合來看。如下圖所示，帶顏色的數字是行高的倍數。
說到這里，經常有人問我正文的行高的值應該怎么設置，大家在做設計時都會采用1.5/2倍關系，但這不是絕對的，行高的倍數也是受字號大小影響的。像新浪新聞的正文，字號是18px，行高設的是32px，即字號（18px）x1.777（倍數）=32px（行高），如果行高倍數設置2倍以上，字與字之間的距離變大，就不太好閱讀了。
10.混合編排
好的，完全理解上述所有知識就可以把標題、正文和注釋進行混合編排了。大標題字號40px、正文字號20px、正文行高40px、注釋字號18px、注釋行高32px、標題與正文的間距88px、正文與注釋的間距64px。
11.字體選擇
選擇字體就沒有什么技術含量了。做頁面常用字體就只有那幾種，微軟雅黑、宋體、Verdana、arial、Times New Roman，就不舉例說明了。中文網站最常用的就是微軟雅黑+Arial，瀏覽器兼容性也最好。讀到這里有人可能就會問了，載入其他字體也可以啊，是的做企業網站可以載入其他字體，但像做功能頁面啊、后臺頁面啊，載入其他字體幾乎就不可能了。所以還是要估計實際項目需求/品牌需求來選擇與其相符的字體樣式。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
隨著折疊屏手機的發布，我們看到未來手機的形態可能會朝著柔性手機方向發展，那么，讓我們來思考一件事：如何在折疊屏手機上做交互設計呢？最近三星、華為和柔宇各發布了一款折疊屏手機，它可以把一臺8英寸的平板電腦通過折疊的方式變成一臺方便攜帶的6英寸手機。折疊屏手機屬于新的手機品種，也是我目前最看好的手機形態之一（未來手機的形態應該是柔性手機，現在已知有柔性電路板的存在了）。通過幾天的觀察和思考，我認為折疊屏手機有以下好處：
以上基于「展開」態的想法，在折疊狀態下還有一些不錯的想法供大家思考。
華為在MWC2019上演示了一個名叫「鏡像智拍」的功能，它可以讓被拍攝的人實時看到拍攝效果，并調整面部表情與姿勢。用自己最了解的角度及構圖使得拍攝事半功倍，妹子們再也不用擔心自己的男朋友把自己拍得很丑了。
在折疊狀態時可以把背面當做一個附加的交互空間，實現一些簡單的交互操作，例如打吃雞游戲時我們可以考慮在背面屏幕增加一些手勢操作進行8倍鏡的縮放，這種背部觸控方式并不是什么新鮮事，在2011年索尼旗下的掌上型游戲機 PSV 已經在背部增加了電容式多點觸控面板。
除了附加的交互空間，我們真的可以把它當做第二塊屏幕進行使用。在平時我們可以通過兩塊屏幕同時運行兩個不同的應用程序，例如我們可以用主屏幕玩游戲，在加載游戲時翻轉屏幕刷個微博，操作起來十分方便。
折疊屏當然不只有展開和折疊兩個狀態，還有翻折狀態，它區別于傳統手機和平板的獨立狀態。最直接的效果就是它可以不需要支架就立在桌面上，實現中遠距離的自拍；同時它可以進行多角度拍攝，成為制作 VR 內容的利器。在玩法上，翻折狀態可以通過兩面屏幕的不同內容引入多人互動的概念，但這種應用場景比較難想象。
相比外折疊設計，內折疊設計玩法相對較少，在這里我只想到了任天堂NDS 的概念：在翻折狀態時它就是兩塊獨立屏幕，它可以獨立顯示不同的內容，例如上屏顯示內容，下屏顯示操作區域，打游戲時翻折狀態明顯要比其他狀態舒服。
個人觀點：從以上案例來看，外折疊設計在交互和玩法上都比內折疊設計好，未來很有可能以外折疊設計為主。
當折疊屏從小屏模式轉變成大屏模式時不應該只是畫面的等比例變大，而是要考慮響應式布局設計。
描述響應式設計最著名的一句話就是「Content is like water。如果將屏幕看作容器，那么內容就像水一樣」。在以前響應式設計更多用在PC Web設計上，但現在手機也應該考慮響應式設計，以下是設計時需要考慮的細節。
它不是簡單的響應式設計。從上文得知，「展開」態時要考慮是平板模式還是雙屏幕模式，如果是平板模式，那么內容應該在一個整體里；若是雙屏幕模式則可以考慮不同屏幕展示不同內容。設計時需要根據實際需求和場景進行模式選擇。
考慮通過 Fragment（片段）來設計。Fragment 是 Android3.0提出的 API，出現的初衷是為了 UI 更靈活地適應大屏幕的平板電腦。以下是 Android 對 Fragment 的官方介紹：「Fragment 表示 Activity 中的行為或用戶界面部分。您可以將多個 Fragment 組合在一個 Activity 中來構建多窗格 UI，以及在多個 Activity 中重復使用某個 Fragment。（ Activity 可以理解為一個頁面，Android 開發中最重要的概念之一）」
參考微軟的 UWP 設計概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用應用平臺）。UWP 應用的理念并不是為某一個終端而設計，而是同一套代碼和設計可以在所有 Windows 10設備上運行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的響應式設計的設計技巧包括以下6點：
調整位置：你可以改變 UI 元素在不同屏幕上的位置。比如下面這個例子：為了確保同時展示兩個元素，在手機上我們必須采用縱向滾動界面，而在平板電腦上，我們可以調整框架的位置，變為橫屏滾動界面。如果你用網格設計這些位置，你也可以不改變內容框架，但其他 UI 元素可以使用響應式設計。
調整尺寸：你可以通過調整空白和 UI 元素的尺寸來優化框架，比如下面這個例子，可以通過簡單的增大內容框架尺寸來提升大屏幕的閱讀體驗。
調整順序：通過調整 UI 元素的順序和方向，優化內容顯示效果。舉個例子，在大屏上運行時，可以再添加一欄，并且加入分類列表，這些都是合理的。這個例子展示了在手機上使用一欄縱向滾動，而在平板上使用兩欄橫向滾動的優化。
展現：你可以基于屏幕的真實大小，設備支持的功能，特定的情況或者屏幕方向展示界面。下圖是媒體播放器的例子，小屏幕上這些按鈕通常是被刪減的，但在大屏幕上這些按鈕是被完全保留的。PC 上的媒體播放器比手機上的有更多的功能。
換位：這項技巧是為特定屏幕尺寸或屏幕方向切換特定的界面。下面這個例子是導航菜單：小屏幕上他是隱藏在漢堡菜單中縱向排列的，但是在大屏幕上，更大的 Tab 是更好地選擇。
改變結構：你可以為特定的設備優化特定的結構。下面這個例子就是兩種不同的接合結構。
以上6點引用了Windows 開發人員中心 《Design Basics：Responsive design 101 for UWP apps》
考慮用戶翻轉折疊屏幕時的場景和動機是什么，從而優化現有界面及交互流程，舉幾個例子。
以 RPG 游戲為例。當玩家使用小屏模式時我們可以收起所有功能界面，使游戲的沉浸感更強；當玩家采用大屏模式時，我們可以認為玩家需要獲取更多信息，這時候把聊天、裝備等相關功能界面展示出來。
當用戶在微信里查看定位信息有新消息提醒時，手機變成大屏模式時應該同時存在地圖界面和聊天界面。
相關注意事項
Google 在2018年11月就宣布了對折疊屏的支持，包括多窗口支持、不重啟適配等等。如果想要在折疊屏手機上設計良好的用戶體驗，必須考慮以下兩個方面：生命周期管理以及轉場動效。
生命周期管理
目前大部分手機應用為了有更流暢的體驗會做適量的生命周期管理，例如退出頁面時會釋放相關內存。因此設計師在設計折疊屏交互時要考慮哪些頁面不能被銷毀，一定要讓用戶進行展開、折疊等操作， 應用任務不中斷重啟，產品可以自動適應各種屏幕下的靜態布局規格。
轉場動效
從目前 Google 公布的新版 Android系統來看，已經可以做到當折疊/展開設備的時候，頁面、內容從一個屏幕自然地切換至另一個屏幕。設計師在設計時應該基于 Google 的技術規范考慮內容、組件等模塊的轉場效果。
參考案例：
華為基于HUAWEI Mate X發布的折疊屏官方適配方案，相關鏈接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
看過或聽過一大堆理論知識的你，有沒有被很多自相矛盾的設計原則搞混過？比如你把做好的設計發給總監看，然后他告訴你太亂了，要統一，于是你苦苦調整了一番。當再發給他看時，他卻說太平淡了，要有對比。你心想，一會要統一，一會要對比，這不是自相矛盾嗎？當然不是，其實你自己心里明白，只是你不知道如何平衡這兩者的關系。類似這種「矛盾」的設計原則還有好幾對，接下來蔥爺要把它們一一理清，讓這些理論知識能真正指導設計實踐。
對齊是版式設計最基礎的原則之一，具體指版面中的字與字、字與圖、圖與圖要對齊，常用的對齊方式有左對齊、右對齊、上對齊、下對齊、居中對齊、兩端對齊等。對齊的目的是為了使版面更整潔，更便于閱讀，比如下面這些作品都用到了大量的對齊關系。
我們來舉個實例，假設你現在要設計一則手機banner圖，目的是宣傳某款手機的拍照功能，文案如下：
這種圖不難做，你打算直接用一部手機和幾張攝影作品作為畫面的主視覺，于是去圖片網站找了幾張能體現該手機拍照功能好的圖片：
圖片找好后，你把其中一張圖片填充到手機里作為屏幕背景，其余圖片分散在手機周圍，然后你把整個視覺主體放在了版面中央，文字則按主次排在了兩側，大致效果如下：
你盯著畫面，正琢磨著還要加點什么的時候，總監不知何時出現在了你身后，他面無表情地盯著你的電腦，嘴里慢吞吞地吐出幾個字：「太亂了，好LOW」，之后就消失了。你很聰明，立刻明白了總監是想要自己排得更整潔、更有序一點。
在目前的版面中雖然個別元素之間有對齊關系，但是缺乏整體的對齊，且圖片采用了自由式排版，所以會顯得混亂。于是你嘗試把圖片對齊排列，文字則以圖片為基準進行對齊。
△ 左邊的文字部分與右邊的圖片部分保持上下對齊，標題與內文為左右兩端對齊，icon 與文字則是左對齊。
上圖很「完美」地執行了對齊原則，整個版面干凈、整潔了許多，視覺流程也更簡單了。這下總可以了吧，然而事情并沒你想的簡單。因為總監不知何時又出現在了你的身后，他癟著嘴一臉嫌棄地說道：「太呆板了，有點變化好不好？」
變化？難道又要調回改之前那種狀態啊？當然不是，你其實是要在現有的基礎上做一些變化。排版的難點和精妙之處就在這里，既要對齊，又不能機械地對齊；既要整潔有序也要靈活有變化。如何做到這一點呢？我的理解是：要在對齊中制造一點變化，在變化中找到對齊關系。比如下面這些作品：
現在你知道了，上面的方案之所以死板主要是因為文字部分與圖片部分對得太整齊，所以需要改變其中一個版塊。該版面的視覺主體是圖片，所以調整圖片更合適。由于文字是呈水平排列的，那么圖片部分是不是可以傾斜擺放形成一定的反差呢？這樣既可以制造變化還能加強版面的空間感。
△ 除了把圖片傾斜之外，LOGO也與內文錯開移到了左上角，最下邊的直線也可以延伸到了版面之外。
我們現在再回過頭來看看這件作品是否符合前面我說的，「要在對齊中制造一點變化，在變化中找到對齊關系」這一要素。
從上圖中可以看出，圖片雖然做了傾斜，卻是在對齊的基礎上做的變形扭曲。版面中的元素雖然不是都對齊了某條直線，但是沒有哪一個元素是孤立的，每一個元素都與版面中的其他元素有對齊關系。更重要的是，左邊文字版塊的視覺重心與右邊圖片版塊的視覺重心也是呈水平對齊的，所以整個畫面才得以平衡。
雖然設計的構成要素只有文字、圖片、色彩，但是每一個要素都有無數種表現形式，不同的字體、字號、色值、質感、風格、圖片、方向等等。如果在一個版面內含有太多不同的東西，會顯得很雜亂，從而讓人心生厭煩，所以，需要通過某種方式把這些「不同」統一起來，以達到舒適、協調的效果。
以一則運動品牌的輪播圖設計為例，文案如下：
這類設計以運動員作為主體最容易出效果，所以我們需要找一個正在奔跑的人物圖片。
△ 這個人的姿勢不錯，就他了。
運動品牌最重要的是要設計出動感和時尚感，所以我把背景分割成一紅一藍兩個傾斜的色塊，然后把人物放在畫面中央，文字分布在左右兩邊，以制造出強烈的視覺沖擊。
由于有一個動感十足的模特和背景，所以整體看來還是比較符合運動海報的調性，但視覺上有點亂，因為有很多細節沒有統一，比如人物傾斜的角度和背景色塊、標題傾斜的角度不一樣，主要文字的字體風格不一樣（NIKE和JUST DO IT的字體比較硬朗，而蓄勢待發的字體相對較柔），元素的風格也不統一（圓角的了解更多按鈕與整體風格不搭），還有各元素的顏色也缺少聯系等等。
那該怎么辦呢？這里就需要用到統一的原則了，我們可以試著把上面提到的不統一的地方都統一起來，如下圖：
△ 調整后的方案二，字體都是簡潔有力的黑體字，而且把左右兩邊的字體進行了水平對齊、背景色改為單一的漸變色、人物和文字的傾斜角度也統一了，「了解更多」的按鈕也改成了平行四邊形色塊、顏色更是被縮減到了三種。
調整之后確實不亂了，但是也有了新的問題，因為各元素太過統一使得畫面缺乏層次和對比，該突出的信息也沒有得到突出。這時候就需要用到與統一對立的另一個原則——對比。
對比，是把具有明顯差異、矛盾和對立的雙方安排在一起，進行對照比較的表現手法，目的是為了使設計更有層次、增加視覺沖擊力。設計中常見的對比有大小對比、字體對比、色彩對比、空間對比、方向對比、長短對比、粗細對比、曲直對比、輪廓對比、虛實對比等等。
想要處理好統一與對比的關系，需要記住兩個要領：
順著這樣的思路，我們來給上圖增加一些對比關系，例如方案二的標題傾斜角度太大，不美觀，所以我干脆把它的傾斜方向改為垂直傾斜，既保留了動感也增強了對比，更加美觀。在文字的字號上，我選擇突出品牌名縮小廣告語，加強了大小對比，并且還恢復了之前把背景一分為二的做法，只是增加了一點空間感，并把人物服裝的顏色與背景色做了統一。調整后的效果如下：
我們可以觀察一下，方案三確實比方案一更協調，比方案二更有層次和視覺沖擊力，且整體調性依然年輕、時尚、有動感，這里就是運用了統一與對比的原則。
簡單應該是大家聽得最多的設計原則，簡約、極簡風格的設計也非常受歡迎，但是我們也很困擾，因為自己做的所謂極簡設計經常會被人說太單調、不夠豐富；而那些自我感覺很豐富的設計又會被說成是雜亂。為什么會這樣呢？我們先來正確地認識一下簡單與豐富。
簡單并不是指做設計要用最少的元素、不做任何修飾，而是指設計主旨要簡單，視覺流程要清晰，視覺要聚焦，主次要分明。
△ 上圖的設計雖然元素和色彩都很多，但整體給人的感覺也還是簡單的。
而豐富也不是指畫面中一定要有很多元素或疊加一堆的效果，而是指有細節、有層次、有品質感。
△ 上圖的設計雖然整體看來很簡單，但是并不會顯得單調。
為了方便理解，我們還是來舉個例子：一款農產品冊子的封面設計。該封面的必要元素很簡單，只有一個 Logo 和一句文案，因此，我們很容易想到做個極簡風格的設計。白色背景加一個 Logo 和一行文字，再配一款特種紙，做點工藝，就可以顯得很高大上，很多大品牌也是這么做的。
這也是一種還過得去的解決方案，但表現手法確實太過簡單，既體現不出設計師的設計功底，也沒有體現出農業品牌的調性和特色，且缺乏吸引力，所以我們需要做加法，讓其變得更加豐富。
怎么豐富呢？最直接的辦法就是引入圖片和色塊，由于品類為農產品，且文案重在強調健康和安全，所以我們可以找一張綠色、生態的圖片。
為了與狹長的版面保持統一，我把圖片也裁剪成了豎版的矩形，并與一個同樣大小的綠色色塊結合在一起，組成版面的主視覺，logo放在圖片左側，如下圖：
這么做還是有些設計感的，也增加了品類屬性，不過缺少細節、不耐看，所以還需要加點東西。當然，新增加的元素只能作為輔助，不能太過搶眼，圖片方面我很快想到了葉脈，葉脈與圖片中的葉子元素也能產生關聯，且適合做底紋，于是我又找來了一張葉脈的圖片。
把葉脈圖片放在圖層最底部作為背景處理，這里會遇到三種情況，一是如果把葉脈紋完全平鋪的話，整個版面就沒有留白了，所以會顯得壓抑；二是把整片葉子都顯示出來，但這么處理會顯得很小氣。所以我只用葉脈紋覆蓋了一半左右的版面，與圖片部分形成呼應，這樣的效果看起來是比較舒服的。
圖片部分得到了改善，但現在畫面中還缺少一點小的裝飾元素，增加一點文案是個不錯的思路，所以我把文案和品牌名的英文加了進來。
做完加法后整個畫面變得豐富了不少，層次也拉開了，而且給人的感覺依然比較簡單，既不雜亂也不壓抑，因為各元素主次分明，既有聯系又沒形成干擾。不過做加法的時候也要把握度，例如下圖就有點堆砌過度了，看起來很繁雜、不精致。
想要處理好簡單與豐富的關系，需要注意兩點：
規范與打破是存在于版式設計中的一對矛盾原則，規范是指把版面中的元素要按某種規律，或是在特定的范圍內設計布局，目的是為了讓畫面更有條理和秩序，也更像一個整體。
△ 上圖的主要元素都規范在一個矩形中，然后各個小矩形又組合成一個大矩形，看起來很整體，很有設計感。
與規范對立的是打破，指打破規范、打破束縛、打破平靜，目的是為了使畫面看起來更靈活、更有動感、更具視覺沖擊。
△ 用色塊或圖片來創造束縛感，然后把部分元素沖出色塊，是規范與打破的一個經典組合形式。
可以說經過了嚴格規范而變得很好看的優秀設計很多，而有些設計卻選擇了打破規范，也得到了很驚艷的效果。那什么時候該嚴格遵守規范？什么時候應該打破規范呢？其實在一件完整的設計中最好兩者都要有，而平衡這兩者的要領就是：先規范后打破，即在規范好的基礎上選擇一些局部來打破。
蔥爺還是以一個畫冊的封面設計來作為講解案例。這是一本中國移動云服務平臺方案介紹的冊子，文案如下：
很明顯該封面的視覺調性應該要有科技感，要能體現互聯網、信息、大數據這些關鍵詞，所以我找了一張看起來很有科技感的圖片。
這類畫冊的版式通常應該偏向簡潔、規矩，所以我決定用網格系統來輔助排版。以圖片作為封面的主視覺，除了Logo，所有元素都排列在矩形圖片內，并且所有文字都按照網格的設定保持左對齊，所有元素的高度、寬度，以及各元素之間的間距，都嚴格按照網格來排版。
△ 經過規范的版面整體看起來十分嚴謹。
不過這么做也造成了版面缺少變化、太過規矩等問題，所以我們可以嘗試在此基礎上做一些「打破」。
比如原本的 LOGO 與圖片靠得太近，顯得很壓抑，這里就不必完全按照網格來排版，我們可以根據自己的感覺將 LOGO 與圖片分得更開一些；中文標題、短線、英文標題這三者也太擁擠了，可以挪開一點；文字部分不一定全部都在圖片范圍內，所以我給英文標題加了一個藍色塊，并把色塊移出了圖片區域；以及把最下面的公司名稱排在了圖片下方等。調整后的效果如下：
△ 調整后的方案，構圖也相應發生了變化，之前為上下構圖，現在變成了對角構圖。
在規范的基礎上做了打破之后，我們可以看到，版面的整潔性依然在，整體的調性也依然簡潔、嚴肅，但相比調整之前顯得更靈活、更有設計感。
設計不是簡單的加減法，也不是只要做到對齊、統一這些很簡單，方向很明確的原則就可以了，因為根本不存在什么原則可以讓我們直接通向設計的終點，但是我們的目標是明確的，就是要做有效的設計，所有的設計原則、設計手段都要為這個目標服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不管是做設計（感性）還是設計規范（理性），都是仁者見仁智者見智的，都很主觀。我是想闡述出自己的想法供大家參考，文章中的數值也不是固定標準，還是希望大家根據不同的項目需求，去解決不同的實際問題。
目錄
1.下拉菜單
1.1 了解側邊導航欄
1.2 繪制矩形框
1.3 文本行高
1.4 層級劃分
1.5 確定距離
2.分頁
2.1 了解分頁
2.2 繪制普通分頁
2.3 繪制首末分頁
2.4 繪制跳轉分頁
3.步驟條
3.1 了解步驟條
3.2 繪制步驟條
1.1 了解側邊導航欄
側邊導航欄就是固定在側邊或從側邊劃出的導航欄，一般應用在企業網站的觸發型導航欄上，或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的，方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。
設計師的對設計的理解和審美決定了周圍要留多少的空白。
1.2 繪制矩形框
矩形框的高度可以隨著屏幕高度的變化而變化，所以不需要考慮。那只定義矩形框的寬度就行了，寬度分別是：?。?40px）、中（280px）、大（280px）。當我們決定采用哪種尺寸后，就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。
1.3 文本行高
當我們繪制好矩形框，就要往里填內容了。文本行高上一章已經講過了，就不多說了。文字的行高是由鼠標狀態（Hover）的高度來確定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，側邊導航欄的文本左右多留一下白，不能使導航欄看上去太緊湊，給人感覺太壓抑，就會顯得不是很美觀了。
1.4 層級劃分
因為側邊導航欄中有樹形結構，一個主級別可以分散為多個子級別，所以就需要劃分一下層級。劃分層級的方法也有很多，可以改變字號、改變顏色、改變字形、改變距離，那我用的方法是改變距離。采用哪種方法還是要看具體需求，像那種需要想突出層級且對比強烈的需求，可以采用改變字號和改變字形（加粗）。下圖中顏色越深層級越高，另外要注意的是，大類也有層次，越往上層級越高。
1.5 確定距離
當我們把矩形框繪制好，文本也填進去后，就要確定每一個層級的距離了，我們要做出1>2>3的感覺出來，細微調整每個層級的間距，使它們的差異突顯出來。確定距離指的是每個層級左側的距離，這就像樓梯一樣，在上層的樓梯往往優先級是最高的。層級1（收藏夾）與層級2（藝術類）之間多留了4px的空白，目的是為了突顯主級別與子級別之間的差異，稍微強化了一下主級別。
來看一下最終效果吧。
2.1 了解分頁
側邊導航的講完后來講講分頁，分頁有三種樣式：普通分頁、首末分頁、跳轉分頁，名字是隨便起的，能理解什么意思就行了，來讓我們了解一下它的樣式。
2.2 繪制普通分頁
接下來我們學著畫一下它。我把所有的分頁分為三種尺寸（大中?。?，分別是32px（?。?6（中）、40（大），每一個小按鈕的曲率分別是4px（?。?、6px（中）、8px（大）。每個小按鈕之間的間隔我用的是4px，也可以用8px，4px雖然更容易誤觸，但視覺效果要比8px好很多。
當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。
2.3 繪制首末分頁
首末分頁就是在普通分頁的基礎上加兩個按鈕，分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕（分頁）”與跳轉首末頁按鈕”按優先級分隔就可以了，要把控好這首末按鈕與數字按鈕之間的距離，距離過短容易誤觸，距離過長會破壞整體性。
2.4 繪制跳轉分頁
跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數，后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減，這樣不同分頁的功能，區分就會更明顯一些，而且它們之間也有隱性的關聯。
將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好，要與實際效果（原始比例）差很多。
3.1 了解步驟條
步驟條相對比較簡單，這里穿插一下講了吧。步驟條的樣式比較多，但他們的繪制方法都大同小異，我只單拿出一個來講，就不一一的進行講解了。
3.2 繪制步驟條
步驟條其實不難繪制的，注意對象和元素之間的距離就可以了。留的距離也要講究一些，要勻稱不能出現左面留太多而右面留太少的情況，具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題，不能一味的采用水平或垂直居中。只要熟練把控好距離，知道什么需求下留多少的白，那繪制不同樣式的步驟條，也會顯得游刃有余，做出的東西也更自然舒服體驗也更好。
做設計要精益求精，把每一個像素點都要考慮到并合理運用它們。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
目錄
引言
一、對設計的認識
二、設計觀念
三、設計原則
四、設計思維
引言
前段時間在學習python語言的時候，我了解到在程序界有一種叫做“算法”的存在，其實“算法”就像武俠片里面的內功心法，內功心法越好就能激發越強的武功招式。在程序編寫時大部分的程序語言都可以使用“算法”來優化程序的流暢度。比如，當大量用戶同時使用程序時，“算法”就可以合理配置服務器資源防止服務器的崩潰。在設計的過程中其實也存在這樣的通用心法，事理學的認識論其實就有點類似于“算法”，所以這一期我的分享題目叫《設計心法》。
一、對設計的認識
·內部因素與外部因素：
設計中我們可以將設計問題化分為外因（人，時，地，事）與內因（技術，工藝，材料等），在上一期文章中我們談到設計可以定義為：人有目的創造活動，往往現代生活中設計的目的不是唯一的，這就好比佩戴手表時我們可能不僅僅是為了查看時間，還可能是為了在潛水時防止手表被泡壞。因此，物“應該是什么樣”表現的是對不同人與環境的適應，就如同生物多樣性表現了對環境的適應一樣。
除卻外部的環境因素，我們還要考慮的制作產物時所需要技術、工藝、材料、形態、結構。內部的因素其實代表了一種可能性，是一種可變通的元素組合。比如同樣是防水手表，我們可以采用耐浸泡的材料，也可以運用防水工藝。（ps：在《事理學論綱》中內部因素沒有成本，但是小胖認為成本其實也算是設計中應該考慮到的內在因素，所以在這里我也將其歸納了進來。）
總的來說外部因素代表了限定性，而內部因素代表了可能性。設計的過程中應當了解外部的需求與限定，然后組織內部結構。在內外因素之間找出一個契合點，設計就發生在這個契合點上。
·目標與目標系統
窗簾、太陽鏡、電焊面罩、等等這些看似風馬牛不相及的物品，卻有著共同的目標—— 遮擋強烈的光。在實際設計過程中目標往往是抽像的，而目標系統是具體的。目標系統既包含特定的外部因素的限制也包含內部因素的選擇。
同樣是手表，同樣是為了看時間，從技術到外觀在使用因素的限制下，也就決定了其品種的千差萬別。建立目標系統是對實現目標的外部因素限制的研究過程，也是從外部角度觀察、分析、歸納實現目標條件的認知過程、敘述過程。設計師應將抽象的目標轉化為目標系統，完善的目標系統才是優秀設計的創意源泉。
·“使用”的意義
在“使用”物品的過程其實包含兩個方面，一是使用者——人的動作：二是被使用者——物的動作。人的動作是人生理結構和生存需要指示下的延伸，在動作的引導下人的大腦對外界的刺激作出反應，留下印象，形成經驗，儲存信息，成為意識。當再次遇到類似的問題是，人會逐漸總結經驗并形成知識的遷移。物的動作是人使用過程中人的動作在物上的反應，這就包括器物的變形、移動、或是其他信息（比如聲音，燈光等等）。
在人使用物的過程中，為了使物更加符合人意志，自然要對物進行改進，使物更加適合人的生理結構和需求目標。比如在原始社會原始人類為了更有效地的獲取獵物，在原有的石頭上進行敲擊加工使之更加符合使用習慣。在“使用”中人和物不斷磨合，這一過程實則就是產品迭代的過程。“使用”的意義在于它是一種積極的思維方法，是一種能啟發創造的設計起點。
·方式與合理
方式在設計中不是指的具體的某一個動作，而是使用時產生的一系列動作，人的行為與各動作相對應的物與物組成的環境組成了一個特定的社會現象，我們稱為“方式”。物是動作對象，環境是行為條件。同樣，動作使物有用行為使環境具備社會意義。
合理是指合乎客觀規律，合乎時代觀念，合乎社會準則，合乎人類理想。合理是人類經驗、教訓的總結，是認識的升華、沉淀；是道德、行為、情操的法庭；也是在歷史的基礎上對未來的規劃。當人在追求欲望的過程中，合理更像是一種約束人類行為的標準，通過合理的約束來引導人類的行為方向。
綜上合理的使用方式其實是設計的原則，通過合理的評估系統和反饋可以制約不合理的設計行為，在的設計活動中，以“創造合理的生存方式”作為第一原則才能促進人類往更好的方向發展
二、設計的觀念
·設計生態觀
自然界的生態系統是一個封閉的、可以自給自足的系統。在此系統中沒有開始也沒有結束，任何一環的在生態環境中都扮演著至關重要的角色。反觀現代設計生態卻并不存在這樣的循環。
現代經濟學被認為是研究人類需求與稀缺資源之間關系的學科。經濟學中的生產者（企業）將有限的資源整合變成可盈利的“商品”，而消費者是在有限收入下實現“效用最大化”的行為個體。消費者購買行為發生后進入“使用”階段，直至使用的物品失去使用價值?！拔铩睆馁Y源直到被銷毀經歷了四個階段，這四個階段分別是產品、商品、用品、廢品。
現代市場經濟下人的物質需求被極大滿足，市場經濟的增長依賴消費增長，反觀人類的自然資源總體上卻在急劇減少。設計者除了的滿足生產者、消費者、使用者的需求之外，還應該思考如何將“廢品”分解利用形成設計生態閉環。
·設計美學觀
人類文明的發展大致經歷了三個階段，這三個階段即古典主義、現代主義、和后現代主義。這三種文明的美學觀也可稱之為再現主義、表現主義和共生美學。這三種美學觀點的發展是相互交錯的，只是主體上有區別。
當代設計和藝術是以思考、感召、聯想的手法，以同觀眾、使用者共同創造為目的，以多種美學觀重疊、并行、綜合為基礎的共生美學觀為審美取向。技術與藝術共生，技術與各種美學觀共生，這就是當代設計——后現代主義的美學特征。
三、設計原則
·有限理性原則
在藝術的創作中美可以被分為很多種，梵高的油畫是美的，米開朗基羅的雕像也是美的。其實任何事物，任何美都是相對的，在不同的時代背景和使用場景下我們對于美的定義都不同。
類比設計，衡量設計的標準不是對與錯，而是相對滿意與不滿意。設計應該遵循“有限理性”的原則，即設計的目的并不是尋找“最優解”，而是“滿意解”?！白顑灮碚摗敝贿m合作為設計中的一種技術方法使用，而且只有當目標屬性十分明確，可以用數量化衡量時才可運用。
·適應性原則
上文說過設計就發生在內部因素和外部因素的“關系”中，而這其中的“關系”其實就是適應的過程，設計還可以理解為是以一定的目的、一定的方式來達到與客觀條件內部關系相適應的人為適應系統。設計的內部因素、外部因素和設計目的是設計過程中應當遵守的具體內容。
多數時候外部因素在適應系統中是人們行為方式的主要決定因素。系統的復雜行為主要是其所處外部的復雜性的表現，而內部因素少量限定屬性的制約，這才是完整的適應性系統。
四、設計思維
設計思維實際上是圍繞著“問題”來展開的。所謂“問題”是指設計各要素交織在一起時，所產生的關系矛盾。好的設計一定是“問題”的良好協調統一體。研究“問題”的方法通常是通過觀察問題——分析問題——歸納聯想——評價修正的模式來鞏固的。
觀察問題其實是在用戶調研中最常用的方法，定性調研中研究人員常常會使用觀察法來記錄用戶的行為，之后用研人員會使用“五問分析法”來抽象出用戶的真實需求。其實在事理學中也提出了類似的觀點。
觀察法的幾個原則:
1. 目標明確——從現象到本質（五問分析法）
2. 忠實于對象——感官+體驗
3. 擴延、比較——搜尋同類比較共性
4. 由表及里、去粗取精——總體到局部再到整體
需求分析中有一塊人物畫像的部分，其中情景分析和故事板就是分析人物使用產品的外因和內因，撰寫故事版時不妨按照以下路徑來展開。
分析問題中應當結合設計中的基本路徑來分析：
1. 尋找“物”存在的外在限制——人、環境、時間、條件等制約。
2. 析出“物”的內因與外因的邏輯“關系”——尋找現象依據
3. 比較相似“物”的內、外因的關系——透析共性基礎上的個性
具體的歸納、聯想和創造都應該明確設計“目的”，結合實際中遇到的外部因素來具體創意創造。最后我們通過建立評價體系，優化設計產物在設計生態中的體驗和循環。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
作為視覺設計師你是否會遇到這樣的問題，當需要做一個 loading 或者其他動效的時候，總會或多或少的出現一些問題，如何使用更輕量的 Sketch 直接將矢量圖形轉到 AE 制作動效，如何不再受 GIF 導出的失真問題困擾，如何讓開發完美還原我們的動效設計稿等，如果你也存在這些疑問，那以下介紹的2款插件就可以完美的解決這些問題。AEUX 是由 Google 團隊推出的，運用在 Sketch 和 AE 的一組插件，能將 Sketch 里的圖層以及整個畫板一鍵導入到 AE 里，同時能在 AE 里解決圖形分組和分層的問題，減少導出圖片或者轉入 Illustrator 處理帶來的不必要的重復動作。
以下是我做的一個簡單小案例，通過此次案例將介紹怎么更好的使用這個插件：
首先在 Sketch 內將圖層進行分組，在多圖層的情況下，需要在前期進行動效構思，根據構思在 Sketch 里對圖層進行分組，所做的分組將會是你在 AE 里的合成分組。
方法一：直接復制選中圖層
安裝好插件后，打開 AEUX，選擇你將導入到 AE 里的圖層，點擊 Send selection to Ae，同時在AE里打開安裝的 AEUX插件，在 BUILD COMP 區域出現了從 Sketch 導入的圖層數量，勾選 Precomp groups，點擊將自動加載入 AE 合成里。
方法二：導出json文件
從 Sketch 的 AEUX 面板里點擊 Export AEUX.json 導出 json 文件，打開 AE 的 AEUX 面板勾選中 Precomp groups，將導出的 json 拖入到 BUILD COMP 區域，或者點擊「曲別針」icon打開 json 文件。
這樣導入到 AE 里的圖層是以合成的形式展示 Sketch 里的分組。
如果在 sketch 內，分組圖層不在同一組內，導入 AE 后會出現變形和位移的情況。
如果 sketch 內形狀圖層有投影/漸變/point type 的編輯形狀時，導入 AE 后將出現投影消失，漸變消失，形狀變形的情況，在遇到這種情況時，會通過導出圖片的方式處理。
導入 AE 的 AEUX 面板時如果沒有勾選 Precomp groups，多圖層導入的情況下，組內的圖層都會生成在 AE 中的同一個合成中。
1. Detach symbols
這是一個解除 symbol 的功能，在 sketch 內如果沒有解除 symbol，導入到 AE 里將出現圖形位移和變形的情況。
2. Flatten shapes
AEUX 支持布爾運算，但是在一個組中混合不同的運算符（如添加然后減去）對于Ae來說比較困難。點擊 Flatten shapes 可以合并布爾運算圖形。
3. Images to symbols
Sketch 只能導出它在畫板上看到的內容。如果在 sketch 內圖像的一部分超出畫板邊界，復制到 AE 內部的圖像將出現位移的情況。導出前點擊 Images to symbols 不會發生被裁剪和位移的情況。
1. Come size multiplier：切換倍數
可以設置 sketch 畫板的倍數合成。
2. Auto build artboards：自動構建合成
導入前勾選此功能，在 sketch 的 AEUX面板中復制圖層后，在 AE 里不需要任何操作，它會自動復制圖層導入到創建合成中。
3. Convert to precomp：創建合成
同時選中單一圖層，可以將他們建立一個新的合成。
4. Un-Precomp group：解除合成分組
點擊可以解除合成的分組，變成單一的一個一個的圖層
5. Toggle Visibility：可以一鍵隱藏和顯示所有的父級圖層
6. Delete group layers：刪除父級圖層
雖然現在 AEUX 有些上面所講的功能不能支持，但是在一步步完善，希望可以幫助一些習慣用 sketch 畫插圖的設計師提高動效制作效率，減少不必要的操作步驟。
在動效制作好后，通常我們會導出 mov 然后導入 PS 里生成 gif 格式，但是 gif 會出現質量過低的情況，比如漸變分層，邊緣有毛邊等情況，所以由2017年 Airbnb 團隊開發的 lottie 動效可以完美的解決這些問題，而實現 lottie 動畫需要在 AE 中安裝一款名為 Bodymovin 的插件。
Bodymovin 以 Android/iOS 原生動畫的形式在移動設備上渲染播放，在制作動效時導出 json 文件直接給到開發，可以幫助提高實現動效效率，同時提高動效質量。
1. 它還有很多的優點
2. 在使用中有幾點注意
3. 所需軟件
ZXP installer
下面是一組之前做的頁面加載loading效果，開發小哥哥反饋：實現挺。
4. 步驟
下載ZXP installer：https://aescripts.com/learn/zxp-installer/
下載bodymovin：https://github.com/airbnb/lottie-web
下載之后，點開剛下載的 ZXP，點開頂部 file-open，打開 bodymovin插件。
當出現以下界面時代表已經安裝成功。
意外情況：在用 ZXP 安裝 bodymovin插件的時候出現以下提示。
原因是沒有通過 Adobe Creative Cloud 下載 AE，需要重新通過 Adobe Creative Cloud 下載。
打開AE，After Effect CC – 首選項 – 常規，勾選允許腳本寫入文件和訪問網絡。
打開窗口 – 擴展查看是否添加成功。
調出 Bodymovin 面板，選擇需要導出的合成。
點擊你要保存的 json文件地址，點擊 Render。
點擊 Brown 載入剛導出的 json文件，檢查動效是否有誤。
這時候就可以把 json 文件給到開發，如果 AE 合成中有圖片，需要把圖片放在文件夾內一起提供給開發，同時也會給到一個 gif文件，如果實現有不一樣的地方，開發可以詢問設計師。
如果想在移動端上瀏覽可以打開網址：https://www.lottiefiles.com/，下載安裝移動端客戶端（ios/Android）
注冊登錄成功后打開 Lottie Preview 添加 AE 里用 bodymovin 導出的 json文件。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡，讓用戶看到全部創作中他最想看到的那一面。在B端產品的設計過程中，我深切體會到動效能在很多體驗領域起到四兩撥千斤的作用。于是我將自己這些年來做動效的思考，結合B端產品的一些固有特點，來和大家聊一聊動效設計在B端產品體驗設計中的意義。
既然是談B端產品的體驗設計，那么就免不了要與C端產品做對比。在我看來，B端產品與C端產品在大的體驗趨勢上是趨同的。對于大多數用戶而言，都希望自己在工作與生活中是順利、愉悅的，而用戶體驗就是為了讓用戶順利、愉悅而生的。也就是說，不管是B端產品還是C端產品，其體驗的本質都是圍繞著使用的效率與愉悅感為核心展開的。那么這次我們就將目光聚焦在B端產品，來看看在這個領域都有哪些亟待解決的設計難點。
針對這四個特點，我沉淀出一套解決B端產品體驗問題的方法，它們分別是：信息折疊、路徑梳理、提升效率、概念物化。接下來，我將通過具體的案例，來詳細展現動效在B端產品體驗設計中的意義。
涉及案例簡述：
案例1:
問題分析：初次進入 Dataphin，我們會提供一張業務流程圖來解釋 Dataphin 的工作流程。為了降低理解成本，我們對每個流程都添加了文字說明。然而由于流程本身已經很復雜，頁面排版中加入說明性文字會使得流程的排版拉長，用戶很難通過一屏瀏覽完整的功能流程，體驗不佳。
解決方法：我們發現用戶一開始關注業務的全流程展示，然后才會仔細查看每個業務的詳細說明。當用戶將注意力放在查看詳細說明的時候，是顧不上看全流程的。因此我們將「看流程」和「看說明」的場景區分開，共用同一塊區域，從而優化信息排布。
案例2：
問題分析：在QuickBI中，同一套 icon 需要應對兩種不同的使用場景，當用戶沒有選中任何圖表的時候，點擊任意類型的圖表icon，即可新建一個圖表；當用戶選中某一創建好的圖表時，再點擊圖表icon，則是為該圖表切換類型。所以為了確保用戶的認知清晰，我們需要將兩套使用場景區分開。
下圖中，我們嘗試了靜態的布局思維，雖然可以區分場景，但也造成了導航條過高，導致空間冗余，壓縮了創作空間。
其實這個問題不止我們家有，用過 AE 的同學應該清楚，AE里面的形狀工具體驗也很鬼畜，用戶不選擇任何圖層的時候，使用形狀工具可以新建形狀，當用戶選中某個圖層的時候，使用形狀工具是針對該圖層創建蒙版，兩種不同的功能卻沒有任何樣式或操作上的區分，對新手用戶來說是相當不友好的。
解決方法：用戶創建圖表和切換類型是兩種不同的場景，不可能同時存在，在布局上沒有必要讓兩套 icon 同時存在于界面。因此使用切換式，利用鼠標對圖表的點擊、失焦可以靈活切換兩套使用場景。
問題分析：圖1是用戶在 Dataphin 中所創建的一張邏輯表，我們需要保證用戶在屏幕內盡可能多的獲取信息，因此邏輯表中的空間利用就顯得很重要。在原有交互中，我們為用戶提供了搜索功能，同時我們也在思考有沒有更優的信息布局方案，可以為用戶展示更多的數據。
解決方法：在圖2中，我們需要在頂部區域尋找與用戶搜索操作不重合的場景，并把它們重疊起來。這里我用到交疊式的思路，即將搜索框收起來，只在頂部保留搜索入口，這樣在布局上就可以讓搜索與標題交疊使用同一塊區域，優化了布局。
問題分析：在下圖中，側邊導航的信息過多，壓縮了創作區域，我們需要為導航「瘦瘦身」。
解決方法：通過用戶調研，我們發現導航的名稱對于新用戶來說很有必要，但隨著用戶對產品的逐漸熟悉，名稱重要性漸漸下降。我們需要通過動效，找到合理的展示形式，來兼顧新老用戶的使用需求。
通過動效優化信息布局，既保證了單位面積內盡可能多的展示有效信息，又避免了信息過載帶來的干擾與閱讀疲勞，使得用戶每次只需要專注眼前的使用場景，提高了獲取數據的效率，這便是視覺設計師在項目中的價值。
問題分析：在 Dataphin 中一共包含了80多個功能點，我們將這些功能點梳理歸納成5個大類目和20個子類目。因此我們既希望用戶能明確每個類目下包含的子類目，又希望用戶在選中子類目的同時，也能明確感知自己處在哪個大類目下。
下圖中，用戶從首頁切換到數據資產版圖，我們想要讓用戶明確信息的嵌套層級，靜態的思維只能用雙Tab 形式展現。雖然解釋了層級關系，但也使得導航高度過高，壓縮內容區域，加之案例中的資產版圖本身還包含三個子類目，于是，同一個頁面出現了三層 Tab。
解決方法：將嵌套路徑通過動效的方式展現，運動軌跡可以暗示用戶子類目從哪里展開，其余類目被收到了哪里，用動效的方式解釋了層級嵌套路徑。明確了層級嵌套關系，節約了為解釋嵌套路徑而鋪展出的信息所浪費的頁面空間。
在 Dataphin 中，用戶在創建邏輯表之前，會經過一系列繁瑣的配置工作，如下圖中，用戶需要經過「定義維度」-「定義主鍵&來源邏輯」-「定義層級」三個步驟。由于操作流程復雜，我們為用戶設計了鉛筆線動效，讓用戶時刻明確自己操作所處的位置，也方便回退操作。
通過動效梳理路徑，使得B端產品復雜的產品邏輯更為清晰，降低用戶的理解成本，縮短因查找路徑浪費的時間，提升工作效率。同時，將操作路徑巧妙地隱藏在運動路徑當中，可以節約為了展示路徑關系而浪費的頁面空間。
問題分析：在 QuickBI 儀表板中，用戶需要導入已有的數據集以配置圖表內容。數據集由用戶自行創建，一般來說，B端產品用戶文件命名比較偏長，正常情況下下拉框很難直接把名稱顯示完全，用戶還需要將鼠標hover 到名稱上才能查看完整的名稱，操作路徑被拉長了。
解決方法：我們在側邊欄展開的一瞬間向兩側借一部分空間，使得名稱獲得了更多展示空間。盡可能多的展示信息，縮短操作路徑，提率。
問題分析：在 QuickBI 儀表板中，用戶創建圖表的操作為，先拖動字段進入對應軸區，軸區便能讀取字段內的信息并生成數據可視化。這一所見即所得的操作對老用戶而言是的，但對于新用戶而言認知成本卻有些高。
設計思路：我們需要通過響應式的設計來引導用戶學會這樣一個操作。首先，用戶的鼠標滑過字段，字段會高亮響應，提示用戶此處可點擊，從而吸引用戶學會點擊拖動字段。接下來，我們通過軸區內的文字提示，告訴用戶字段可以被拖入該軸區。用戶將字段拖入軸區的時候，對應的軸區會高亮響應告訴用戶字段可以被拖入軸區，同時字段會根據拖入路徑是否正確給出響應。如果正確，字段會劃入軸區；如果錯誤，會給出錯誤提示；如果用戶執意操作，字段會彈回原處。這樣我便構建了一套完整的響應流程。通過層層響應的方式，減少用戶在每一步操作上的困惑時間，幫助用戶快速掌握這一操作手法，提升工作效率。
工具型產品中很多操作是相互關聯的，而且這樣的關聯關系通常是細微的，因此需要我們通過動效強化元素之間的關聯關系。案例中圖表的每一列指標可以自由配置，通過微動效，讓用戶一眼就能找到新增的指標，提升操作效率。（蘋果在新版的 Mac 系統中也有采用類似的設計，體驗很棒）
聯動關系在框架層面也同樣適用，比如導航區域與創作區域之間就存在拉伸聯動。這樣的動效前提，建立一整套元素的適配規范，便于開發與團隊協作。這個過程會很繁瑣，也是B端產品看不見的巨大工作量。
每一個微小細節的打磨才能匯聚成的用戶體驗。提升效率的點小而且零散，總結起來即是用戶的操作是強反饋的，從而增加用戶嘗試的信心；用戶的操作是有引導性的，即增加用戶繼續探索的信心；用戶的操作路徑是盡可能被縮短的，以節約時間。滿足這三點均可被看作是設計在提升效率方面的價值。
問題分析：QuickBI 中有一個叫「創作區」的模塊，是用來介紹 QuickBI 產品能力的。我們需要在這個區域向用戶展示 QuickBI 所具備的能力與工作流程。由于 QuickBI 是面向行業分析師的 BI工具，其所要傳達的概念對于新用戶來說比較生澀復雜，這就需要我們在產品流程展示設計上盡可能簡單易懂。
下圖是1.0版本中的效果，其對流程的設計僅停留在圖形的堆砌，對業務的表述不夠清晰，也就很難向用戶傳遞我們的產品價值。
那我們來看看視覺設計是如何物化抽象的概念的。
首先我梳理出 QuickBI 工作的四個步驟：獲取數據、創建數據集、數據分析、數據展示。
接下來我們思考一下，當我們需要對某人講述一個很復雜的概念的時候，我們通常會打個比方。那么我接下來要做的，就是為這套抽象的概念「打個比方」，因此我要為它們構建一個有故事性的場景，那么這四個步驟應該是某種靜止且持續運轉的工廠，它們之間需要某些動態的介質將其串聯起來。
于是我進一步挖掘視覺樣式，構建出了場景原型圖。
進一步完善視覺效果，得到了最終的成品：零散的代碼被收集車間收集，產出數據表進入加工工廠，工廠將其加工成數據集，運輸進分析臺，分析臺通過「儀表板、電子表格、數據全屏」三種方式對數據進行可視化分析，最后將分析結果通過數據門戶和郵件訂閱的方式對外分享。
通過動效設計，將抽象的概念具象化，將復雜的流程簡單化，大大降低了新用戶的學習成本，使之可以快速上手。
最后，我將我的動效設計方法沉淀成一套以方盒為載體的方法論——方盒理論：「置身于三維空間下，信息的體量是無窮的，我們需要為其尋找合適的載體，在無限的信息體量和有限的用戶瀏覽范圍之間求得平衡。即讓用戶看到全部創作中他最想看到的那一面。」這即是我所構建的以六面方盒為基礎的信息載體，并為我的一切動效解決方案提供了理論支點。
B端產品并非大家印象中那樣的索然無味，其中有很多體驗是值得深挖的。動效僅僅是其中的一個層面。隨著近幾年B端領域功能點逐步完善，用戶對體驗提出了更高的要求，B端產品的體驗設計需求也會漸漸升溫，也希望有更多這個領域的優秀設計師能和我做朋友。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章（8.1k贊），該文作者在電子產品的界面設計領域有13年的從業經驗，也經歷了從架構師到用戶體驗設計師再到如今的產品設計師的多次職業轉換，文章主要是講他對用戶體驗設計的犀利吐槽，以及對產品設計所代表的工作方法的無限看好?；蛟S觀點上并沒有什么新意，但是，就像某大佬說的，設計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的，而設計師真正的價值或許也就在于此：投身于未知與混沌的灰色之中，并且還要從中分出黑白。
那么為什么我要翻譯這篇巨長的文章呢？就我個人而言，單純很喜歡作者傲慢中帶著犀利的風格，就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法，所以，文末也留了 medium 的原文鏈接，可以去查看作者的本意，并觀看其中的演講視頻。
這是關于我從架構師轉變到用戶體驗設計師的一段經歷，以及我是如何看待行業現狀的。
十年前的某一天，我決定要把我的職業從架構師改成用戶體驗設計師。我記得當時很多可用性專家、架構師、界面設計師、交互設計師對我說：這只是潮流而已，「用戶體驗設計」這個表述并不，簡直就是胡說八道，體驗怎么可能被設計？
然后在去年，我又突然決定把我的職業從用戶體驗設計師改成產品設計師。同樣的，一群用戶體驗設計師又來對我說，這只是潮流而已，用戶體驗設計師和產品設計師之間并沒有什么本質的區別。
但是，對我來說，它們是不同的。在我看來，產品設計更加的謙虛真誠。我覺得這是用戶體驗設計師不具備但最應該學會的：謙虛務實。
我不是在勸你像我一樣改換職業名稱（坦白地說，你最好別這么做），我真的一點兒也不在意。我只是想告訴你，我決定轉變的原因，以及我是如何看待行業現狀的。
很膚淺的話題，聊職稱大概是世界上最無聊的事兒了，但是作為設計師們，我們又確實很喜歡討論它?；蛟S，這次我們可以聊的更深入一點。
我一直很喜歡 Alan Cooper 提出的這個詞：交互設計師（interaction designer）。我認為它很地抓住了這項工作的本質。但是早在十年前看來，這個詞的定義就已經很狹隘了。數字產品的設計師們希望工作能觸及到更多的內容，而「用戶體驗設計」似乎就承擔了這個「需要觸及更廣泛內容」的責任。
它確實抓住了這個需求，現在 UX 這個詞廣泛流傳，每個人都在使用這個縮寫，但問題是每個人對它的理解是不同的。所以，直到現在它也是個令人疑惑的概念。
在Peter Merholz 的一次訪談中，Don Norman 對創造 UX 這個詞的初衷做了如下解釋：
我發明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創造一個可以覆蓋人們體驗各個方面的系統，包括圖形設計，界面，體感交互和這個系統的使用手冊。但從那之后，這個詞就開始廣泛地流傳，慢慢地失去了它本來的意義。
如今它偏離本來的意義越來越遠，以至于 Alan Cooper 先生說：根本沒有用戶體驗設計這回事。
在我們盡可能擴寬工作邊界的努力之下，我們把 UX 這個氣球吹得快要爆掉了。UX 現在承擔了「設計不同觸點的體驗」的任務，包括組織轉型，制定策略，改革創新，市場營銷，設計從 app 到廣告、服務、設備、地點、事件，甚至公司文化在內的所有事情。
或許用戶體驗確實應該做到這些，但是問題是，沒有一個用戶體驗設計師能一個人把所有的這些事情做好，要創造一個復雜的產品，你需要的是一個由不同領域專家組成的團隊。
我不得不說很多 UX設計師真的是眼高手低，他們根本不具備足夠的技能或者經驗去支撐他們的野心。
我同時也負責招聘的工作，大多數申請 UX 這份工作的求職者可以分為以下幾類：
當然，以上只是一種簡單的歸納，但是從我的觀察來看，很多做 UX 的都可以歸到這三類人當中，因為真的很少見到那種既懂戰略又會戰術，既有創造力又有執行力，既了解商業又懂設計的人才。
UX設計師日常做的事情以及他們對商業的價值根本配不上他們的自我認知：「用戶體驗設計很重要 」。
用戶體驗設計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結」很好地表達了這個意思。
我觀察到的另一個現象，是關于用戶體驗設計目前的狀態的。UX設計師們每天都會發表數不清的文章，它們大部分都是關于研究工具以及方法論（例如用戶畫像，用戶體驗地圖，原型制作工具，用戶研究方法等等），各種教程，無關緊要的圖形設計趨勢，或者用戶界面細節。
Fabricio Teixeira 和 Caio Braga 寫了一篇優秀的文章來說明這些理論的狹隘之處：
https://essays.uxdesign.cc/state-of-design-publishing/
然而，這些我們經常討論的東西，對于處在殘酷商業競爭環境下的產品設計團隊來說，并沒有什么用。因為計劃與管理實際的產品開發進程和理想的「Design thinking 五步法」之間并沒有太大的關系。
整個 UX 行業好像對商業這部分都沒什么興趣，也難怪，「用戶體驗設計」這個名字就暗示了他們只關注用戶。商業是別人的事。
也難怪會冒出 UX 的忠實捍衛者們了，如果你膽敢不同意他們的信仰，他們就會把你的心扯出來。
僅僅只要說一句：用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究，你就不是一個合格的用戶體驗設計師。如果你個人并不是很喜歡一些方法論，像用戶畫像或者其他，你最好趕緊默默溜走。
可悲的是，UX們總是想成為最有創新能力的人。但是我認為他們并不是。因為，創新力需要嘗試不同的工作方法，考慮新鮮的想法，要求與眾不同以及靈活多變，敢于實驗，勇于實踐，并擁有商業頭腦與落地思維。想要成為真正的革新者，需要的是自己去開創自己的道路，去突破規矩，去冒險。而不是重復說那些所有人都在說的簡單的陳詞濫調，遵從那些輕而易舉的方法指南。我覺得 UX設計師整個群體都搞不清楚地圖和實際道路，模型（或其他噱頭）和現實之間的差別。（只有這些「革新者」的想法才很容易被預測：因為他們所有人都讀一樣的書，說著同樣的話。）
我從事數碼產品的設計有13年了，現在我不覺得我和大多數的 UX設計師之間有什么共同點。我覺得我已經超越了用戶體驗設計。我跟產品經理或產品需求方之間更為投契。
Peter Merholz 在他的一次演講中說過，用戶體驗這個行業的出現是因為產品經理對用戶體驗缺乏考慮，我同意這種說法。
數字產品就是我現在正在做的，像網頁，app，界面。我的目標是為我的客戶創造一個成功的產品，一個會幫助他們賺錢或者省錢的產品。可用性和用戶體驗只是實現這個目標的一部分，它們很重要，但是說實在的，并不是最終的目的。我不會像大多數的 UX設計師那樣不切實際的浪漫主義。
我也需要為我自己和我的公司賺錢，所以我要擅長規劃一個有效率的設計流程，估計好預算，有條有理地和客戶進行合作，銷售與推廣我的工作，招聘人才等等。
我知道我很擅長數字產品設計，但是我可能并不擅長做所有類型的設計。這就是為什么我更喜歡「數字產品設計師」這個頭銜的原因了。
我喜歡它的點在于，它更聚焦于產品而不是用戶。它把我的工作放在了資本市場的背景之下。產品需要對顧客有用，但是也需要切實地有利可圖。
對我來說，無論它是什么，聽起來，「產品設計」比「用戶體驗設計」都更加的落地。產品設計更容易被所有人理解，甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分，但是從另一方面講，比起想要解決世界上所有問題的萬能藥UX 來說，產品設計這個說法更加的謙虛。
現在我大部分時間依然是在做交互設計和信息架構這種傳統工作。我大部分的精力也都是花在制定策略，進程管理和設想概念的層面。但是我也正在帶上許多的帽子：決策者，界面設計師，架構師，文案，創意總監，項目經理，產品需求方，用戶研究員，測試人員?？傊睦镉行枰睦锞陀形摇?
當然我需要和很多人（他們是各自專業領域的專家）一起合作來實現我的愿景，然后把它迭代變得更好，更完善。技術專家，開發者，圖形設計師，內容設計師，項目經理，甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結果。
用戶體驗是很多人工作的結果，是一個產品或者服務生產出來的，并不是一個職位的描述。
我會把產品設計師定位為這樣一個角色：他們是那些為產品功能和形式的最終呈現負責，并能夠以任何可能的方式對設計流程以及產品的發布進行規劃和優化的人。（如果你還把產品設計僅僅看作是 UI/UX 的另一個名字，這對你毫無幫助）對于很多有經驗的 UX設計師來說，并沒有什么新鮮的，但是產品設計確實和 UX 不同。
我看到如今，越來越多的有經驗的 UX設計師稱自己是產品設計師了，所以，也許這是一個潮流吧。又或許是某種原因？
Andy Budd，一個有著很棒的見解的家伙，我一向很尊敬他，最近他發了一個推特說：UX就像爵士樂，產品設計就像朋克樂。
好吧，我的看法跟他完全相反。打比方說，如果你想成為一個 UX設計師，你現在要做的只需要去上個周末課程，學習設計過程的5步法以及5個方法論，像用戶畫像，用戶體驗地圖，愿景圖，你就可以開始干活兒了。
但是成為一個產品設計者，你需要把產品交付給市場的實際經驗，這非常的難，因為經常是一團混亂，復雜的過程。產品設計就像自由的爵士樂?？赡苈犉饋砘靵y嘈雜，有一點像朋克樂，但是想要把它玩好，你需要很多的技能和經驗以及音樂理論的掌握，也需要一些即興創作的能力：改變規則甚至是反對它們。更不用說，在團隊中，你需要成為整個團隊工作的主導。
無論你想叫自己什么，無論你有多大的夢想，但，也要記得保持真實和謙卑
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
