目錄：

一、鍵盤與命令類型

二、設計要點

三、有意思的鍵盤交互

畢竟該處是表單輸入的交互終點，用‘前往（Go）、登錄（Join）’這些命令詞是不是更準確些呢？

文章來源：UI中國

設計并不只是為了區分市場定位，在視覺上對產品做一些修修補補。設計需要從品牌自身出發，設計出來的產品才能與用戶產生情感交流、為品牌而發聲，這樣的設計才能真正為品牌創造長尾的價值。

前陣子和朋友去看車，我們去的第一家店是沃爾沃，沃爾沃主打的品牌理念是「安全」「可靠」，當時我在沃爾沃店里看的每一輛車的外形就像從金屬盒子進化來的，棱角分明、線條硬朗，同時每個部件都相當厚實，當時我坐在車里的時候，感覺自己像是坐進了一個大保險箱，里三層外三層把我包裹起來，坐在里面特別有安全感。

我們去的另一家店是寶馬，寶馬的品牌概念主打的是「時尚」「運動」，所以寶馬車給人的感覺和沃爾沃又完全不同了。它的流線感非常明顯，而且這種流線型設計一直延伸到車內的每一個部件。印象特別深的是，車里座椅的荔枝皮紋和我們常見的品皮質特別相似，讓我感覺自己像是坐進一個時尚的愛馬仕箱包里。

其實無論是工業設計，還是我們的用戶界面設計，好的設計給用戶的感受與品牌理念是相契合的。設計中的每一個細節都是圍繞品牌自身而展開，設計出來的產品才能夠成為品牌的具象化延伸，與用戶產生情感交流的同時也會讓用戶更加忠誠于我們的品牌。具體怎么做？這需要我們運用統一的設計語言來完成。

什么是設計語言？從設計的層面理解，當你看到一組功能與形式相互融合，向你訴說其特色與優點的產品，從而喚起你的情感反應時，你正在體驗的就是設計語言。簡單講，當你的品牌運用設計語言的時候，你的產品會跟人說話：會告訴人們它能做什么，怎么做，以及你的品牌是個什么樣的品牌。而這個設計語言也將會從前期的風格設定到后期的設計執行，始終貫穿在我們整個產品設計的流程當中。

首先從一開始的風格設定，比如每次我們設計師接到一個 brief 都會先做視覺推導。但是我之前的視覺推導是這樣的：比如現在為一個類似拼多多的產品做設計，然后搜集了一圈競品的界面，發現拼多多、聚劃算、淘寶特價都是這種線框的、扁平的設計風格，所以最后推導的結論就是——因為我們拼購面向的用戶群體是低消費人群，而競品的設計風格是 xxxx 的，所以我們的用戶偏愛這種 xxxx 設計風格，所以我們需要用這種風格去設計我們的頁面。

搜狐總監總結的競品分析方法：

其實這是一種循環論證，并不能推導出真正有價值的內容。就像你問一個胖子「你為什么這么胖呀」，胖子說「因為我吃得多」，你又問「為什么要吃這么多呀」，胖子又說「因為我胖，所以需要吃多點」。

競品分析雖說也是一種前期設計調研的方法，但如果我們的設計只依賴于參考其他人怎么做，最后我們設計出來的產品不僅沒辦法向人們表達一個完整的品牌理念，而且我們的設計跟其他競品看起來很相似，失去了自己的特點與優勢。

所以，在我們設定產品的設計風格的時候就需要運用統一的設計語言，產出能夠表達我們品牌特質的設計。那具體怎么做？這里涉及 2 個關鍵點，一個是如何找到你的品牌特質，另一個是如何針對這個品牌特質找到對應的設計語言。

元素 —— 圍繞品牌特質

首先，想要找到我們的品牌特質，我們可以從一個很有意思的原型中得到啟發。如果想讓我們的品牌真正能夠影響用戶，讓用戶為我們的品牌買單，我們的品牌就需要基于用戶內心最深層次的需求，明白用戶買單的動機在哪里。這時候我們再對應這些深層次的動機和需求做出設計，效果自然會事半功倍。那么如何能把品牌和用戶的動機需求連接起來呢？我們可以借助心理學家榮格的原型理論來一一對應。

榮格的原型連接了人們最深層次的動機和感覺體驗，表達了人們的基本需求，最重要的是他將這些需求都具像化為一個個角色。所以我們可以從中找到自己品牌的角色，并且在往后的發展中根據這個角色設定我們的品牌特質和設計語言，進而與用戶建立根深蒂固的聯系（相當于為我們的品牌打造一個「人設」）。我們先看看榮格的原型具體有哪些：

1. 開拓者

我們也有稱之為探求者、朝圣者，它是敢于冒險的、首創的、獨立的、不墨守成規的，更多的尋求自我實現和改變，擁有自由的價值觀、自給自足的。開拓者通常會在未知的領域，開創新的路徑。同時是個驅動力很強的非常有個性的人，能夠忍受探索新路上形單影只的孤獨。屬于這種角色設定的品牌比如有星巴克、路虎都是。

2. 守護者

守護者通常是說無私的、有同情心的、仁慈的人，給弱勢群體提供幫助和支持的，同時具有慷慨大方、自我奉獻的精神。守護者更多立志于他人的安危和福利，像這種角色的品牌稍微少點，通常是一些救濟會、慈善組織等等。

3. 愛人

愛人相關的特點像熱情的、美麗的、感性的尋求真愛和愉悅，追求愛的價值觀和親密關系。愛人通常是通過給予和獲得愛的強烈愿望所驅動的，這個不局限于愛情，友誼也包含在內，主要是意味著情感，所以一般是香水或者化妝品品牌都是運用這個原型角色。就像 dior，當然還有巧克力費列羅等等。

4. 魔術師

我們知道魔術師的形象通常是愛惡作劇的、滑稽的，有時候能夠跨界，打破禁忌，并且自身帶有樂趣，善于改變的。魔術師通?？释麡啡?，從單調的生活中解脫出來，敢于打破禁忌，質疑不可能的事物。這種角色設定的品牌我們可以很快想到那個愛玩有趣、經?？缃绾献鞯陌偈驴蓸贰?

5. 創造者

創造者更強調藝術感、想象力、創新性，以及自我表現的價值觀和美感上的愉悅性。創造者通過精心制作用來表現自我的事物，讓人們耳目一新從而得到認可。像這種強調創造力的品牌比如樂高，用有限的積木組合、創造出無限種可能。

6. 反叛者

反叛者也可以說是不法之徒、外來者，這種角色通常是具有變革性的、反常的、打破常規的，表達一種價值觀的解放。反叛者通常存在于社會邊緣的，被大部分社會群體看成局外人甚至異類的角色，我們也可以看成是亞文化的一種轉變。像這種主打標新立異、反常規的品牌，最著名的就是哈雷。

7. 魔法師

前面我們提到了魔術師，那么魔法師相對于魔術師而言，會帶有更多的非現實的想象，精神上的超凡魅力，帶來轉變的、形而上的意識的擴張。通俗地說，是帶有更多迷信元素的。但是最重要的是，魔法師趨向于駕馭各種能量和環境，進而給人們帶來身體上以及精神上的轉變。同樣，像這種強調 magic 的品牌我們第一個可以想到迪士尼，典型的魔法世界。

8. 智者

我們也可以稱之為「圣人」，智者通常是一種富有哲理性的、知識淵博的形象，忠于追求真理、樂于分享知識，也是智慧的代名詞。智者經常被當成真理的捍衛者以及智慧的來源，為人們指明方向，幫助大家前進的代表。這種角色設定適用于一些知識輸出的品牌，比如哈佛大學、金融時報等等。

9. 天真

這是 11 個原型中唯一一個形容詞而不是角色名詞，它代表著信任、純潔、健康樂觀，有希望的、誠實善良并且擁有簡單的快樂。天真代表著樂觀主義，不管處境如何都能保持希望和信仰，更像是紛雜世俗中的一片凈土或者是一個烏托邦世界。而像這種原型設定一樣傳達樂觀、希望、天真的品牌有麥當勞、可口可樂等等。

10. 統治者

統治者象征著權威、控制、至高無上，同時也有承擔、效率、和諧的屬性。統治者被得到和控制權利的欲望所驅動，通過對事物的掌控來防治混亂發生。同時也是一種責任承擔的表現，以有組織的的方式來完成義務。屬于這種角色設定的品牌比如有 IBM、花旗銀行等等。

11. 英雄

每個人心目中的英雄不盡相似，但是他們的共性都是勇敢的、有原則的，勇于克服障礙，同時敢于接受挑戰、伸張正義，面對逆境的時候堅韌不拔。這種角色設定的品牌比如強調挑戰、正義、勇敢的耐克、聯邦快遞等等。

總而言之，原型是將我們用戶內心最深層次的需求，具象化成一個角色，我們的品牌對應上這些角色，相當于對應上了我們用戶最深層次的需求，為我們品牌和用戶產生情感交流打下基礎。同時，它可以為我們設計師想為品牌找到對應的設計風格的時候，提供更多維度的靈感。而這之后的過程，就涉及到剛才提到的第二個關鍵點，如何為我們的品牌找到對應的設計語言？

我們從前面的心理原型中了解到品牌的角色設定之后，圍繞這個角色將會有一系列的關鍵詞去描繪這個角色的特質。我們將這些抽象的、描繪品牌特質的關鍵詞具像化，則可以得到描繪品牌自身的設計元素。具體我們可以借助一個圖形四象限來完成：

我們將圖形的基本構成（點、線、面）作為我們的坐標延伸——寬窄曲直，用這四個屬性我們可以組合出非常多不同形態的圖形元素。比如說，我們用「寬+曲」組合出來的圖形可以是：實心的圓形、波浪曲線等等；再比如說我們用「窄+直」可以組合出：細直線、帶有直角邊的矩形等等。

同時，在圖形屬性的坐標上，我們還需要延展出一些帶有這種屬性的事物或印象。比如，生活中帶有曲線的事物，像有花瓣、棉絮等等，這些事物給人的印象是柔和、溫暖的表現；而直線的事物，我們聯想一下生活中的帶有直角的事物，比如像玻璃、霓虹燈管等等，這些表現前衛、鋒芒畢露的事物。

像上面綠色部分的認知印象，針對每一個維度可以聯想出很多關鍵詞與事物，那么在我們延展出更加詳細的四象限之后，這時候可以再次拿出，我們前面說到的，原型角色的關鍵詞，再和剛才的圖形四象限進行比對，利用象限中的圖形基本屬性，來組合出屬于我們品牌的設計元素。具體怎么做，我舉一個京東直播改版的案例。

首先基于京東品牌特質（原型設定是英雄），圍繞英雄這一個原型我們會有很多關鍵詞去形容它，比如敢于挑戰、堅韌不拔等等。不過，京東直播作為京東 App 的主要欄目，更希望吸引更多的年輕人以及女性群體的參與，所以在京東直播里，我們表現的是更加年輕、女性向的英雄——驚奇隊長，一位自信、勇敢挑戰的女英雄形象。因為像人在不同場合下都會有不同的表現，對于品牌來說也是如此，我們設計師也需要根據不同的場景或者子產品的需求，基于原型的核心理念再做出適應性的設計，讓我們設計的品牌更像一個生命體，而不是一成不變的事物。

那么我們圍繞年輕、女性、自信這個主題再腦暴出更多相關的關鍵詞。比如具象的可以代表女性的事物：口紅、高跟鞋；比如一些抽象的內容，我們可以把他們具像化，比如年輕的「活力」，我們可以用泡泡、花朵來表現，女性的「優雅」可以用香水、絲帶表現，英雄的「自信勇敢」用笑容表現。

不過，我們知道用戶界面設計相對于平面設計的海報、插畫而言，更重要的是對產品信息功能的輔助，所以這里的設計元素運用會更加克制，這意味著需要我們回歸到更基礎的層面。所以我們需要從剛才的具象事物（比如花朵、笑容）中提取出他們的基礎屬性，比如花瓣是圓弧形的、片狀的，笑容是向上的曲線。同時借助圖形四象限，用「寬+曲」的手法來表達我們的設計元素（年輕、女性向在第二象限，對應的寬+曲屬性）。在后期設計過程中，融入這幾個元素再作出界面設計。

當然，在整個設計流程中，設計語言的設定并不單單包含元素這一部分，還包括顏色、框架、布局等，各個方面的考量缺一不可。

顏色 —— 相對統一而非絕對一致

為什么是相對統一而非絕對一致？因為人們對大部分顏色的認知其實是來自于自身的行為，受到心理、環境、文化等背景因素的影響，更多是一種個體的主觀感受。比如同樣的紅色，在中國是吉祥喜慶的代表，在國外普遍認為危險警告的顏色。比如黑色，在大部分年輕人眼里會認為是酷的時尚的顏色，而相對年長傳統的人則更多會覺得是邪惡、忌諱的顏色。所以我們并不需要過分強調建立絕對一致的色彩規則，這樣也能使我們設計的品牌更像是一個有靈性的生物，而不僅僅是一個僵硬的組織。

比如今年的京東 618 項目，時間跨度長達 30 天，活動頁面覆蓋上千個，設計師不可能一個個去指定顏色規范、或者讓同一個顏色適用于所有頁面，所以需要設定的只有色彩感覺和表現手法，這種統一的大方向。所以我們可以看到這些在 618 期間的設計，雖然不盡相同但能讓人清楚的感知到，這是來自同一個生態下的主題，并不會因為顏色不同就無法識別。

雖然人們對大部分顏色的認知來自于心理的主觀感受，但還有對另一部分的顏色的認知是來自于人們的生理反應。而這一部分，才是我們在設計的時候需要注意的，關于造成人們「感知過強」和「感知過弱」的問題。

1. 感知過強 —— 顏色對抗通道

簡單講，就是相當于我們設計常說的——對比色，雖然我們知道對比色可以給用戶帶來視覺刺激，但是并不建議在設計中大面積的、長期的使用（紅綠或黃藍對比色），為什么呢？

因為我們所說的顏色，其實是人眼對頻率、光的波長的感知，就像我們耳朵聽的音高或一個音符時所感知的聲音的原理一樣。下圖是人們視網膜三類視錐細胞對光的敏感度，以及人造紅、綠、藍色光感受器對光的敏感度。我們可以看到，低頻視錐（紅線）信號是紅色和黃色，中頻視錐信號是綠色，高頻則對應藍色。而我們設計中常說的對比色，其實就是通過這些視錐細胞的低、中、高頻信號的極值相減，才得來的顏色對抗組。所以這種通過對視錐細胞兩極的強烈刺激才得到的對比色，長期使用下會讓人產生疲勞甚至煩躁的情緒，而在這種不穩定的情緒下，用戶非常容易產生誤操作，甚至最終遷怒于你的產品不再使用。

所以我們作為設計師可以運用一些方法來盡量控制對人眼的最極端的刺激，比如通過減少對抗色的面積，或者通過將對抗色組中的一個顏色用它的近色替換，等等。

2. 感知過弱 —— 色域跨度

除了以上，讓我們感知過強的顏色對抗通道，另一個需要注意的顏色問題就是，讓人們感知過弱的色域跨度。我們有時候會遇到一個問題就是，按鈕上的文字和按鈕的顏色融在一起，導致按鈕文字看不清。

這個問題其實就是兩個顏色的色域跨度過小導致的，首先我們用 H（色相）S（飽和度）B（明度）的數值來劃分色域（如下圖）。在統一H（色相）值的情況下，規定了 10 個標準的S（飽和度）、B（亮度）值，以 10 為單位作為一個跨度。兩種顏色在這個色域中，至少要相差 5個跨度，用戶才能有效感知到兩種顏色的差異。

比如下圖中的藍色背景色值是 60，那么放置在這個背景中的文字 A，至少要跟這個 60  的位置相差 5 個跨度，也就是 10 這個位置。如果文字A 的色值只有 30，與背景色的 60 跨度小于 5，那么文字 A 在這個背景上會難以識別。以此類推，深色模式中（如下圖）這個背景色值 100，那么在這個背景上的文字 A 色值，最多不能超過 50。

以上關于顏色對抗通道和色域跨度的問題，就是我們需要了解的一些顏色運用中的邊界，并在這個邊界以內讓設計保持最大的靈活度。所以對于顏色，我們需要強調的是相對統一的邊界極值，而不是絕對一致的色值。

如果我們把前面說的設計元素和顏色看作品牌的皮膚，那么視覺框架則是品牌的骨骼。如果想讓我們的品牌成為一個能夠真正影響用戶的存在，不僅要有好看的皮囊——在設計元素和顏色上延續品牌基因，還要有強大的內心——視覺框架要能足夠支撐起我們品牌的身軀。

框架 —— 基于階段價值訴求

視覺框架包括了層級和布局，我們需要在設計的過程中，加入對產品階段和品牌價值的思考。因為就像人一樣，處于不同階段的人追求的東西會有所差異。同樣的對于品牌也是如此，處于不同產品階段會有不同的需求，相應的品牌價值點也會有所差別。所以如果想讓設計的視覺框架能夠足以撐起品牌，在這其中將會涉及 2 個關鍵點：如何定位產品階段和品牌價值，以及如何圍繞產品階段與品牌價值點設計對應的視覺框架。

首先是定位我們的產品階段和品牌價值，我們可以通過對照經濟價值系統（如下圖）：產品的階段分為初級產品、產品、服務和體驗這 4 個階段。

拿京東舉個例子，如果我們位于初級產品階段，我們的平臺就是這樣的（如下圖）：展示出所有商品信息，用戶需要根據信息聯系商品的供應商，去和供應商進行交易。那么在這個階段的時候，品牌的核心價值在于對商品信息展現的完整性、全面性，只要這個平臺能夠覆蓋足夠多的商品，并展示完整的商品信息，這個階段的目標就達到了；

如果我們位于產品階段，我們會對商品進行分類，并在平臺上提供統一的購買渠道。相應的，這個是以后的品牌價值在于，平臺能夠對商品進行精準分類或者實現統一的購買渠道功能，讓用戶能夠在平臺上買到商品；

而當我們位于服務階段，我們的平臺不僅可以購買商品，我們還會提供售前售后的服務，對應不同的客戶群體推薦不同的商品，或者提供定制化的服務等等。平臺除了實現交易功能，需要提高品牌的競爭力，在競品之間形成差異化，為人們提供一系列附加價值的服務，吸引更多用戶在我們平臺上下單才是目標；

而如果我們位于體驗階段，我們可以從視、聽、味、嗅、觸覺給用戶帶來一系列的情感反應，為每個個體營造不同的回憶與感受。讓用戶與品牌產生情感上的互動，在更深層次上影響用戶認知并形成堅固的情感紐帶，讓用戶忠于我們的品牌才是這個階段的目標。

正因為不同的產品階段，對應的品牌價值與目標不同，我們才需要針對產品階段，為品牌設計合適的視覺框架，到后期設計出來的產品才能更貼合地為品牌發聲。像今年京東 app 改版項目，在接到這個 brief 之后，首先當然會先看看當時版本存在的問題，下圖為當時京東 7.0 版本。

當時團隊逐一列出了 7.0 版本存在的幾個主要問題：

1. 品牌識別度低

我們可以發現在這個界面里很難發現京東的品牌元素，就算現在換一個品牌同樣這個界面也適用；

2. 業務分發局限

這個版本里的商品坑位是固定的，業務展現的數量和形式是局限的；

3. 運營維護成本高

banner 模塊采用通欄而且上下漸變的樣式，這需要商家制作運營圖片的時候，將主要內容嚴格控制在我們的限制區域內，這同時也增加了我們運營審核的工作量；

4. 樓層過長、轉化率低

在 7.0 版本中，中間的樓層頻道長達 7 屏，同質化的內容導致平臺商品的轉化率不高；

5. 促銷信息干擾

界面的促銷信息讓用戶眼花繚亂，難以讓用戶快速找到自己想要的商品；

6. 個性化感知不足

電商平臺內容形式趨向單一化，沒有太多創新的表現。

有了這些具體的問題項，設計師們開始進行針對性地視覺框架設計。比如，針對個性化感知不足的問題，我們希望重新設計百寶箱區域，打破常見的圓底 icon 的樣式，每個圖標的邊框都是不規則的，讓整個區域更有表現力，同時與其他電商平臺的界面形成差異化。再比如，針對促銷信息干擾的問題，我們希望簡化原本頻道入口的信息，將原本好幾個 sku 信息對應同 1 個入口，優化為單個 sku 與單個入口一一對應，讓用戶保持專注力快速找到自己想要的頻道入口。

諸如此類，當時我們為這幾個問題延展出許多設計上的解決方案，輸出了不少有創新性的視覺稿。但是隨著設計工作越往后進行，我們發現手中的設計并不能很好地解決，品牌在當前階段中面臨的實際問題。

因為在前期框架設計的整個過程中，我們沒有把品牌定位這一因素考慮進去，我們發現舊版本的問題，埋著頭只想把這些問題都解決了，卻忘記抬起頭看看我們的品牌現在在哪。我們前面說過，對照經濟價值系統，京東目前主要處于服務階段，還在逐漸邁向體驗階段的進程中。

而處于這個階段的京東，外部環境是電商平臺的逐漸趨同化；內部環境是業務體量龐大，同時產品仍有上升空間。所以我們的階段目標就是需要加深用戶對品牌的認知，業務內容需要更加具備兼容性、延展性，同時需要提高產品的業務分發能力。

結合這個階段性目標，我們可以從舊版本存在的問題中，發現這 4 個問題才是當前優先級最高的、需要在當前階段中解決的內容。所以基于篩選后的 4 個問題，我們開始將設計往回收，從視覺框架上更多聚焦于這 4 個問題的優化。

比如針對業務分發局限性的問題，對首頁下拉區域的布局進行優化：下拉刷新除了常規的刷新狀態外，在營銷活動期間用戶可下拉跳轉至活動頁面。我們將下拉路徑縮短 30%，共享元素空間兼容更多的業務內容，充分利用首焦區域豐富業務的展現形式。

比如針對品牌識別度的問題，將首頁頭部區域的層級進行優化：在京東品牌形象 Joy 中提煉出微笑曲線，將微笑弧度應用在頭部的背景輪廓上，并且在整個頁面中統一植入品牌色京東紅，同時在當前我們的品牌尚未成熟的階段，直接使用京東 logo 強化用戶對品牌的感知度和記憶點。

比如針對運營維護成本高的問題，還記得前面說的我們一開始做的百寶箱的設計么，雖然那種設計是更具有差異化和創新性，但是目前產品量級大、業務入口多，而且這一區域涉及合作商家自己提供的素材露出，如果沒有統一的外框與規范的內容，運營維護成本是相當高的。所以我們保留了 icon 外框，同時規范每個框中只居中展示一個對應的圖形，不能包含文字等其他元素。

最終我們可以看到，改版后的京東 app 無論是在品牌、業務層面，還是在多種復雜的運營場景中，都能實現作為平臺的兼容性和延展性。所以，在視覺框架的時候需要預先考慮產品階段，針對不同階段需求作出相應的設計側重，讓設計出來的產品能夠更加貼合品牌本身。

經過剛才的推導和框架設定，我們對眼前要做的產品設計風格、視覺框架已經確定的七七八八，界面的形態也初具雛形了。接下來要做的設計執行階段就是我們設計師的魔法時刻，相信每位設計師都有自己的方式和能力讓我們的產品變得更優美，所以關于這部分的內容暫不在此贅述。

通過以上章節我們了解到，只有從品牌自身出發，設計出來的產品才能在每一個方面都延續品牌基因、展現出設計的整體性。一方面滿足品牌價值需求為品牌發聲，另一方面將用戶的所聞、所見、所感打造成一個特別的情感反應，讓用戶更長久的忠于我們的品牌。

不過，如果我們想要創造出能深化品牌基因的產品，我們在用戶方面也要投入和品牌方面同樣多的關注。因為不僅要看產品的外觀界面，還要看產品給用戶的感覺、使用方式和效果。比如用戶因為什么才被你的產品吸引，用戶會從中得到什么，你的產品能帶給用戶什么感受，用戶如何才能為你的產品發生實際行動，等等。正因為我們所做的一切，都應該對品牌產生支撐作用。所以不僅僅是品牌能夠識別和定義我們的產品，用戶的認知體驗也應該成為我們設計考量的一部分。究竟怎樣做，才能讓我們的設計能夠有效的影響用戶、讓用戶為我們的品牌買單呢？

文章來源：優設

卡片式設計對于我們來說并不陌生，從設計類網站上或市場上的一些 APP 中也會看到很多的卡片式設計的案例，卡片式設計也是 UI 設計中最常用的方式之一。

最近在新項目的設計中也嘗試使用了卡片式設計，結合實際項目中的一些思考進行總結并歸納出一些卡片式設計的小知識點。同時希望通過本次的總結進行知識沉淀，以及跟大家一起探討下卡片式設計。

來源于日常

在現實生活中的卡片式設計可以說是無處不在，例如身份證、交通卡、銀行卡、名片、便利貼、撲克牌、游戲卡……諸如此類的生活常見品都是以卡片的方式存在，其共同點都使用一個容器承載著內容，并且具有「便攜性、信息簡潔和相對獨立性」。

UI設計中卡片的使用場景

在項目設計之初我分析了一些使用卡片設計的 App，并且從中整理總結了幾個較為常見的卡片式設計的使用場景。

1. Feed流

卡片式的 feed 流設計是一種非常常見的設計，早在前幾年 Facebook、Google+ 等產品就使用了這一方式，Feed 流作為一種長內容的媒介，用戶需要長時間的滑動看內容并篩選有效信息，卡片式設計很好的解決了內容與內容的區塊分隔，讓用戶在長屏幕滑動中依舊可以很好的明確識別每一塊的內容。

實際案例-淘寶微淘

2. 瀑布流設計

瀑布流的出現讓單屏區域內顯示更多的內容，而內容較多的情況下，使用卡片式設計可以較好的對內容進行了區域劃分，讓上下左右的內容從整體中具有相對獨立性。

實際案例-Pinterest

3. 左右滑動組合型內容

卡片式設計具有較強的層次感，相比于平鋪更能呈現內容可滑動的感受，并且塊狀化的設計讓內容具有較高的區域分割感。

實際案例-QQ音樂

4. Tips提醒

作為非界面固定內容，卡片式設計可以讓 tips 提醒設計變得更自由，在符合用戶體驗的基礎上，它可以出現在任何我們想要它出現的位置。

實際案例-淘票票會員提醒

5. 結合手勢的單塊可互動內容

若頁面中有且只有一個主內容，并且需要用戶進行快速篩選時，可考慮這種結合卡片式設計與手勢設計的方式。大大增強了用戶對于設計的體驗感知和豐富視覺表現。

實際案例-探探首頁

6. 卡券類設計

卡券類的設計實際上是一種物化映射的過程，我們在現實中看到的卡券造型，結合卡片式的擬物化設計，讓用戶在屏幕上可以更直觀的感知，提升了設計的代入感。

實際案例-京東領券中心

7. 集合型功能入口

集合型功能入口往往會有多個入口，使用卡片式設計讓入口形成一個區域整體，可以做到既統一又相對獨立。

實際案例-淘寶微淘關注賬號

8. 個人主頁頂部內容卡片

個人主頁的設計往往會在氛圍上營造沉浸感，卡片式的設計可以把關鍵信息進行概括收歸，讓原本單個的內容形成一個整體。

實際案例-美團外賣會員

規則探討

基礎的卡片設計規則，相信大家在一些系統級別的設計指導規范中也或多或少都能了解到，不同平臺的規范差異其實不會有太多本質性的區別，更多的是處理技巧或方式的差異，而每個設計師對其理解的角度也會具有一些差異化，這里分享下我對于卡片式設計的一些基礎想法。

1.卡片的質感打磨

同樣的卡片設計，不同的人做出來的感受可能會有所差別，而表達卡片質感的主要關鍵點在于：卡片形體、投影深度、卡片顏色對比，我們需要了解這些基礎知識點之后，再結合實際的 APP 風格進行設計。

卡片形體

就像圖標的圖形設計一樣，不一樣的形體也能表達出不一樣的氣質，因此在設計的時候我們需要依據整體的風格進行表達。異形卡片的設計，可以讓原有方方正正的卡片表達出差異化，從造型上打破一些傳統的處理方式，再結合一些 IP 人物元素可以更加直觀的表達出具體的內容氛圍。

投影深度

投影的視覺效果，會直接影響整體卡片的質感，太深太大的投影會顯得整體卡片過于厚重，太淺太小的投影則顯得過度生硬，因此合理的數值比例可以讓卡片看起來自然有質感。在項目中我常用的一組數值規律是 1:2 或 1:3，例如 Y 軸偏移 10px，模糊度則設定為 20 或 30px，這樣成比例的數值出來的效果會較為自然，如下圖：

卡片顏色對比

卡片與背景的顏色對比會影響這卡片的整體質感，在設計時我們需要把握好卡片與底色的對比，不同的明暗對比出來的質感也會有差異。這里有兩點建議：

• 卡片色與背景色不宜太過接近或使用同一顏色，因為會影響卡片整體的空間質感或使得卡片的邊緣銳度下降；
• 深色背景上，盡量讓卡片與背景色在同一色系或者明度不要差異太大，避免過于突兀。

2. 邊距的設定

在使用卡片式設計時，經常會糾結邊距的設定，寬邊還是窄邊？多少像素更為合適？我經常會帶著這種疑問去設計。

基于內容的簡單規則

卡片式設計作為設計的表現形式，最終是為了承載內容，因此邊距的寬窄也需要依賴于實際內容的判斷。結合我在項目中的嘗試分享以下幾點：

多窄少寬

卡片內容較多是使用窄邊距，讓卡片具有足夠的空間來展現內容，內容較少則可以考慮采用寬邊距來打造整體的視覺空間感，如下圖 app store 和淘寶的設計對比。當然這只是一個建議，實際還得具體問題具體分析。

再如一些瀑布流、宮格、橫滑模塊較多的 APP 設計亦是如此，在內容較多的情況下會把邊距壓縮到最小的合理間距。

內外成比例

以最外邊為基礎值往里設計，間距以固定比例進行縮減，雖然沒有刪格來得規范，但也可以讓設計變得有跡可循。

基于刪格

刪格系統解決了一些基礎的板式問題，有助于提升設計的規范性，讓設計更加有跡可循。在設定卡片式的邊距時可以適當應用刪格系統，讓邊距與內容形成固定的關系，這樣可以幫助整體的卡片設計更加具有細節和規則。

4.卡片的標題設定

標題的設定主要考慮以下幾點：1.是在卡片內還是卡片外；2.標題的字號設定多少更合適；3.標題是否加粗？

卡片內或外的對比

在項目設計中讓我較為糾結的是：標題應該在卡片內還是卡片外？通過了一些案例的嘗試之后，我總結了一個規則（需要依據內容的形態而進行設計）：當卡片內容是獨立的模塊或模塊中只有一個大標題時可設定在卡片內；當卡片內容是以組合呈現或者具有延續性內容時設定在卡片外，形成最外層的主標題。

標題的字號設定

標題主要作用為 2 點：1.簡短說明每個模塊的內容；2.讓用戶在長頁面瀏覽中起到引導、定位的作用。

通過一些嘗試發現：1.當內容較少時，并不需要太大的字號即可起到標題的作用；2.當內容較多時，較小的標題字號則容易被沉入內容中，讓用戶在瀏覽的過程中難以發現，而導致信息獲取缺失；3.建議標題與正文字號大小差異在 6-10px，這樣可以更好的拉開差異，讓標題更具有標題感。

字體是否加粗

常規思維下我們都會對標題進行加粗，我在實際中的經驗得到的總結是：需要看手機系統或不同廠商的機型。我在項目之初都對標題進行了加粗，但后續在跟進還原時看到的效果并不理想，特別是 Android 的機型上，因為我們使用的是系統默認字體，android 系統很多字體并未對系統進行優化，而是使用微軟雅黑，微軟雅黑在android 系統上再加粗，就會顯得整個系統的外輪廓特別粗糙，最后我們依據不同的機型進行了差異化的選擇。

4. 圓角的規則

圓角的設定實際上沒有太多的原則問題，只要符合整體的風格調性即可。當然不同的圓角也能表達出不同的質感，大圓角表達柔和、小圓角表達硬朗。

圓角的規則設定

以卡片的圓角作為基礎的參考值往內推算整體的圓角使用規范，卡片與卡內的元素形成合理的比例規則，而非隨意根據「經驗」進行設定。

圓角大小差異對比

大小的差異化呈現出不同的視覺感受和風格差異，我們在設計時更多需要考慮我們設計的產品風格或氣質是適合大圓角還是小圓角，而非依據一些設計網站上的流行趨勢。因此基于不同的風格或者實際內容場景下進行設定才更為合理。

5. 寬窄間距對比

卡片式設計相比拉通式設計更需要考慮設計中的透氣感。在常規情況下，對內容邊距及四周邊距進行調整，讓內容之間具有較好的空間呼吸感，從而讓設計得到留白的效果。如下圖對比案例，在基礎刪格不變的情況下，每個間距都在原有基礎上擴大了12px（接近 1.33 倍），從而讓內容具有較為舒適的寬度進行閱讀

優點分析

選擇某一種設計方式的重點在于我們了解這種方式的優點，并且可以把這些優點融合到我們的設計當中。在項目設計中，我總結了幾點卡片式設計的優點。

1. 優化模塊化，提升內容區域感

模塊化的設計也是我們日常中會應用到的方法，結合卡片式的設計可以讓模塊化的規則變得更加簡單，增加了模塊之間的可復用性和延展性。而當內容較多的情況下，使用卡片式設計可以有效直接的形成區域分隔，從視覺感知上就對內容進行了分隔，提升用戶獲取信息的效率。

2. 提升內容獨立性

在組合型的內容設計上，使用卡片式設計可以讓每個小塊內容呈現相對獨立的展現特性，結合模塊化的設計，可以在一大片關聯的內容中，做到既統一又相對獨立。

3. 增強視覺空間感

卡片式的設計可以提升整體設計層次感，通過投影、前后顏色的設定，讓內容與背景之間產生視覺空間感。

4. 增強視覺表現力

在設計中我們可以對卡片進行異形設計，用來達到我們想要的風格表現。當然在一個頁面內盡量不要太多，盡量使用頁面中的首個卡片進行差異化處理，讓整體表現出一點不同即可。

5. 增強可點性

卡片式設計產生的空間感，讓每個模塊更加突出，相比扁平式的處理方式，卡片式從視覺感官上會較為突出，從感官上更具可點擊感知。

缺點及建議

任何一種設計方式都會有其利弊，最終選擇某一種其實不過就是當下最適合而已，而在嘗試中我也總結了幾點卡片式設計存在的一些缺點，當然只是個人的思考而已。

1. 橫向空間利用率降低

卡片式設計的存在左右邊距，因此在有限的屏寬內內容橫向區域相比于拉通式設計有所減少，在內容較多的情況下可以適當調小卡片左右邊距。

2. 避免過多的層級

從整體來說，卡片式的設計本身就是增加了基礎背景的層級表現，其視覺層級相比拉通式更為豐富，因此不建議在卡片上再二次疊加塊狀式設計，避免造成層級復雜。在項目中也會遇到內容層級需要多層級的表現，從中總結了2種方式：

• 利用不拉通分割線；
• 利用淺色背景底色。

3. 不適合長文或內容多的表達

若在設計上使用了卡片式的設計風格，但在一些長文表現的界面建議去除卡片。長文章的頁面更強調閱讀的沉浸感，用戶需要更多的專注于文字，這時候無邊的體驗更適合。

4. 把握好界面的分區，避免過于擁擠的排版

卡片設計具有獨特的視覺空間感，但卡片與卡片之間也會有分隔，因此在設計時更應該對內容進行歸納，避免產生過多的小塊卡片而導致排版過于擁擠、凌亂或者內容不夠寬度展現。

總結

無論是卡片式或者拉通平鋪的方式，其最終的目的都是為了服務于內容，我們在做設計的過程中只是選擇適合于呈現我們內容的一種方式。根據具體的內容情況給出合理/合適的設計判斷才是我們需要不斷提升的關鍵點，切莫流于形式而忽略了內容設計本身的重要性。

文章來源：優設

根據遇到的問題，總結的一些小經驗，個人的一點薄見，歡迎大家交流。

國內國外運營 Banner 設計

最近有小伙伴接到了國外的運營外包項目，發現國外和國內對于運營的需求是有差別的，這篇文章就談談國內外：中國、韓國、歐美，它們運營設計的各自特點和里面的門道。

主要從以下三方面來說：

1. 風格特點

三個地區文化差異大不相同。

中國從古到今講究遵循傳統，過年過節講究氣氛，營造一種氛圍。用紅包來表達祝福和心意；其次，就是社會環境，中國人喜歡「熱鬧」，逢年過節，一幫人聚到一起才熱鬧，別人都買、賣的火的肯定就是好的，所以就「跟風效仿」。

韓國建國很晚，歷史相對比較短。所以文化氛圍比較年輕，偶像文化在韓國盛行，傳統的東西相對較少，都是比較年輕化的：年輕化的偶像，年輕化的文化，年輕化的價值觀。

歐美整個文化環境受移民的影響，比較開放國際化，體現的文化也是比較多元的，包容性、簡潔、時尚是這些它最直接的特點。

接下來分別談一下三個地區運營推廣的設計特點差異化：

中國

中國的運營突出的是優惠：送紅包、滿減、優惠券等；必須要喜慶，鮮艷的色彩：以紅色、橙色、黃色居多，來刺激消費。就好像進了賣場「瞧一瞧看一看，季末打折滿100減99」

韓國

韓國的文化里「社交」這一關鍵詞體現的尤為重要，「Line」這款APP對韓國影響比較大，里面的矢量涂鴉風格的插畫深入人心，Line 官方設計可愛且特色鮮明的「饅頭人」、「可妮兔」、「布朗熊」和「詹姆士」四個形象也很有特點，所以Line的「IP屬性」和「矢量涂鴉」就成為了韓國主流設計風格。

2. 整體構圖

而韓國的偶像明星文化也頗具影響力，在推廣時也會用到明星來制造效應。

我們從整體構圖解析一下三個地區的設計細節。首先把一個運營 banner 按照組件層級進行拆分，分別來看一下。

分為：文字層、主體物層、裝飾層、背景層

文字層

從文字層可以看出中國的文字層級劃分更加清晰。運用「格式塔」原理，主文案和副標題的突出，能讓用戶對信息提取更加準確直觀。

中文結構的復雜性，排版上必須嚴格區分，所以在層級劃分上裝飾線的運用也是比較常見的。（后面有針對性字體設計形式，詳細解讀，這里就不細說了）

韓文的本身的圖形特質，為保證識別度，文案提煉精簡，信息層級相對較少。文字層級一般分為兩層。

有意思的是韓文由于字形結構的單一，排版上很多時候會搭配字體形式的變化來增加排版樣式的變化，裝飾線的運用也比較多變。

英文排版上本質上和韓文相同——符號化，通過字形的特點來特出主要信息。

排版的優勢性，讓其排版變化上自帶韻律感，加上裝飾線的運用，本身字形的符號特性視覺呈現很有設計感。

主體物層

為了輔助信息傳達，往往采用圖文結合，注意主體物的構圖布局朝向，主題物對主要文字起到視覺引導作用，用戶的聚焦點一定是主文案，而不是主體物。

下圖里「手」作為整個畫面的「支點」，把模特的臉部向主要文案指引，最終達到活動的最核心。

下圖里「眼睛」為整個畫面的「支點」，利用眼睛視線，把用戶向文案核心指引。

利用周圍的物體形成三個「支點」，把視覺中心聚焦到中間主文案。

裝飾層

點線面是運用最多的元素，中國把平面設計的三大構成運用到了。

為了營造構圖的穩定性，在設計里加入點和線的元素讓畫面占比更加平衡，同時彌補畫面中空白的地方，減少負空間，讓構圖更加飽滿。

同時點和線的元素也是為了輔助襯托主體元素，分布要合理，避免過多，造成使畫面的擁擠。

面簡單的理解成形狀，用形狀配合主體物，達到聚焦視覺中心，來突出主題，但是形狀不易過于復雜，「格式塔原理」——「簡單」原則（我們的眼睛在觀看時，眼腦并不是在一開始就區分一個形象的各個單一的組成部分，而是將各個部分組合起來，使之成為一個更易于理解的統一體），用戶更容易理解。

三角形——利用穩定的特點來達到視覺的平衡

圓形——最簡單直接有效的圖形元素，視覺聚焦更明確

多邊形——豐富畫面，多邊形的邊角多的特點也多用做突出設計的高逼格

形狀流體在營銷中突出了活動的促銷感和氣氛，在重大活動中經?？吹剑噬弦脖容^鮮艷。相較歐美、韓國，中國電商運用比較多，這也側面反映出出中國運營推廣競爭的殘酷性映射出來的「浮夸」。

背景層

中國設計里最多變的就屬背景了?？梢岳枚嗖蕽u變、放射的線、還有圖案疊加，讓畫面迎合表達的主體基調

韓國的設計分為涂鴉放射背景和純色背景簡單幾何形狀

歐美撞色對比和性冷淡純色底，也會運用視錯覺，來吸引用戶眼球

3. 營銷推廣層面

文案是營銷第一要素，想辦法突出運營信息，是所有運營必須要注意的，這就有了根據活動氣氛進行字體設計。

中國字體的復雜和文化的久遠特殊性，對于字體我們是有很深的研究和造詣，表現空間也很大。另外由于中文字形的復雜，導致字庫設計成本比較大，字體種類相對較少，為了避免字體版權問題，多采用一些設計變形來達到營銷推廣目的。比如針對字形進行改變、針對筆畫進行加工、針對體積和質感進行變化等。

層次疊加——提取等比重的筆畫，變現字體的體積和空間感

筆畫鏈接——讓文字直接更緊湊，空間運用更整體合理

筆畫裝飾——增加文字設計感，突出表現風格

厚度層次——讓字體突出，增加厚重感

字形改變設計——考慮到字體版權，對字體進行再設計，結合主題進行宣傳

字體內部裝飾——字體呼應主題的一種簡單方式

韓國字形相對簡單，變化不是很多，運用厚度體積和筆畫裝飾來表現字體

歐美的西文字體更多的是運用和主體物穿插、和字形搭配的變換，和復古風字體厚度設計

4. 小結

可以看到不同的國家地區根據本國習慣、審美、風格不同，都有各自不同的設計。中國營銷快速簡單直接出效果；韓國偶像路線，不管是對于模特的選擇，還是網紅形象的選擇，把粉絲效應運用到了；而歐美則簡單兼顧設計創意表現。

淺談學習Banner

隨著教育在大趨勢下崛起，很多學習類產品開始出現。很多在做教育的小伙伴求助，學習類的運營 banner 無從下手，思路不清晰，那么我稍稍的屢了一下思路，淺談一下學習 banner 的個人薄見。

在很多設計師剛開始縷思路的時候，總因為無從下手而著急盲目，下意識的認為「我不會啊」！那復雜的不會，就從簡單的開始縷。從設計開始，我構圖都沒想好，設計啥設計？那再簡單點，從構圖開始吧，我思路都沒想好，構啥圖？繼續再簡單點，一步一步往前推，直到推到最簡單的細節，從最初第一步開始做。你會發現，首先第一步就是先建立一個符合主題的思路。

談到學習類 banner，光聽一聽就覺得頭大甚至很討厭的事情。因為本來學習就是讓人很拒絕的，如何引導用戶主動做一個不想做的事，就得用到一些特殊的手段了。

咱們這次主要從以下方面來多維度探討：

1. 主題定位方向

K12教育

K12 也就是九年義務教育和三年高中，所以人群定位青少年，年齡 7-18 歲。這個年齡段非常單純。

大家可以回想一下我們小時候，在這個年齡最享受的是什么？那就是「滿足感」和「參與感」，我們小時候玩積木、做游戲，最重要的不是贏了能得到什么東西，而是參與到其中享受快樂。所以建立一種參與感，參與進來「一起玩」的感覺，就會得到滿足。

我們看到下面這類 APP，為了能夠吸引這一部分用戶，大多都以有趣好玩為主，「游戲性」是最大的特點，所以情感化設計是非常好的選擇，通過豐富的「體積感插畫」用游戲的思路激發興趣，讓他們感覺有參與感，從而吸引他們「想看」并「點擊」。

知識付費

而對于成年人來說，學習需求變成一種「插件思維」，能夠快速學會，或者說是能夠收獲很多的干貨，突出不枯燥、學會、能懂。這類的情感化設計相對于少兒學習插畫，更多的突出主題所以，以更極簡的設計形式。

有時候文字作為主視覺中心更加直觀，整體設計風格可能更加簡單，對于成年人來說，這種設計更能直達我們需求本身，更容易理解。

高端知識分享

對于這部分人來說，定位跟上面兩類完全不同，從所處層級來說就不同。首先這類人，學習的可能就不只是干貨了，更多的需求是職場環境帶來的。比如，我怎么跟同事、朋友、下屬更好的相處，如何具有更好的說服力，或者是想進修一下，就有了學習需求，基于「馬斯洛金字塔」里的，這里學習需求可能也是更高層次的，為了體現自己的價值。

所以更關心的是，這是誰講的課；通過設計情緒版，映射出當前課程的專業、嚴謹、課程的價值高，這些關鍵點。

課程的品質感的體現，顏色不能太多，插畫設計元素少，更多的利用文字排版和少量圖形來突出主題。

總之，根據所代表的用戶來針對性設計。就好像剪頭發，Tony 老師肯定不會給一個 20 多歲的年輕人理一個小平頭；穿衣服也一樣，你上班肯定不會穿個背心褲衩就去了，但在海邊放松你也不可能穿個西裝、牛仔，我相信大家都能明白這個道理。

2. 構圖結構

良好的構圖，目的是能夠讓用戶易懂，首先結構要清晰、簡單，主要構圖比如：居中、左右。

居中結構

突出活動文案，居中構圖是個很好的選擇，不足就是體現不了有趣好玩的調性。直白說主要就是明確干什么。所以用戶的視覺焦點會聚集在重心區域，忽略掉周圍的東西，在設計的時候，周圍元素主要是襯托，不能搶主視覺重心。

所以說運用插畫風格的話，簡單輪廓插畫和剪影插畫是最適合的。

設計的時候注意幾點：一，主體物要突出飽滿，太小容易畫面太空；二，弱化輔助元素并不是要把它做的粗糙。

左右結構

左右結構分為兩種，一種是左圖右文，左文右圖。兩種構圖的秘密在于，用戶的瀏覽順序是「從左至右」，如果圖在左邊，圖在表意性不明顯的情況下，我們需要看一遍文字，再看一遍圖，這樣圖相當于重復瀏覽了兩次；文字在左邊就減少了重復閱讀，提高了閱讀效率，在運營推廣「3秒原則」里，是首先要考慮的因素。而插畫設計本身也是為了烘托氣氛，表意性不是很明顯，所以突出文案尤為重要。

所以，市面上大部分的學習知識類左右構圖的，更傾向第二種左文右圖。

左右構圖受限于屏幕顯示內容，所以，有一個明確的主體物至關重要。比如：像 VIPKID 和噠噠英語，會有一個自己的 IP 主形象，比較生動突出了品牌特征，還能讓用戶有代入感；還有像一些知識分享的，就會有一個明確的講師或者人物，體現專業權威性，在設計上一切都以突出主人物來展開，就不要設計太過于復雜。

不同于電商的模特，主人物首先穿著上不能太花哨，要正式；周圍裝飾上不要太浮夸，要精簡，甚至像高端知識分享的，背景就一個簡單顏色來襯托。

衍生結構

還有以上面構圖衍生的構圖形式，比如傾斜構圖，受限于 banner 尺寸高度，過大的傾斜角度會讓畫面失衡，負空間留白不均，會讓畫面不協調。

構圖比例合理

注意畫面整體構圖比例，文案占比永遠都是大的，不要讓主要畫面輔助元素過大搶了文案的風頭，因為即使圖形輔助再精彩，用戶更關心的是「你能給他看什么」。

文案和輔助元素大概是六四開，黃金分割比例能讓焦點更多的關注內容，有些小伙伴可能在做的時候過多的沉浸在放大的畫布里，由于沒有直觀感受，錯誤的預估當前構圖的合理性，所以做圖的時候多縮小畫布離遠看是個非常不錯的方法。還有一個就是，做完了 banner 導出圖片，雙擊打開圖片，把圖拖小到無法拖動為止，再看當前實際尺寸大小，用實際尺寸來檢查。

更多構圖形式：《文案超多的海報設計該怎么排版？16個實用模板送給你！》

3. 文案文字

文案選字

文字的選擇也是衡量當前產品用戶定位的標準，首先文字結構不能太過于復雜，K12 教育因為本身用戶年輕化的特點，字形簡單而且飽滿有趣，所以一些藝術手寫可愛字體比較適合。

免費商用可愛字體推薦：沐瑤軟筆手寫體、站酷快樂體、鄭慶科黃油體、站酷小薇 LOGO 體、銳字真言體。

其他可愛字體推薦：漢儀唐美人、漢儀糯米團、漢儀鑄字童年體、漢儀小麥體、方正胖娃體、方正字跡新手書、造字工房童心、文悅方糖體。

如果是高端知識分享和知識付費，體現高端。文字就要簡單，字形不要那么隨意，一些黑體和簡單的襯線體就比較合適。

免費商用黑體襯線體推薦：思源黑、思源宋、站酷文藝體、方正書宋簡體。

其他黑體襯線體推薦：漢儀瑞意宋、方正清刻本悅宋、方正蘭亭、造字工房朗宋、造字工房黃金時代體、造字工房尚雅體。

文案排版

當用戶人群比較年輕，意味著所有的呈現方式都要直接，文案精簡并且排版直觀，提煉關鍵主標題，信息層級要拉開明顯，如果信息層級不清楚，識別性是很差的，先看下面的案例：

看這兩個，明顯右邊的對于我們識別，和對當前功能的認知更清晰，還有一個明顯的視覺引導，突出了最主要的交互點；而左邊的由于信息比較密集，導致我們無法短時間反應出關鍵信息是什么，這是比較糟糕的，運營同樣如此，而運營比較尷尬的一點是，如果用戶看不懂或不感興趣，是根本不會點擊、不予理睬的。那么流量入口的意義就沒有了，設計的再精美，都是一個非常差的作品。

提煉文案是很有必要的，下面兩個同樣的設計，右邊對于文案的認知就更明顯。

有的時候往往文案的關鍵信息比較多，我們在排版的時候第一個重要點，就是排版怎么拉開信息對比，同時又讓排版緊湊？有時需要增加一些特定圖形，或按鈕。但是又會考慮，加了這些特殊圖形和文案又顯得相對獨立不整體；還有就是關鍵點該怎么取舍，強化那些文案、弱化哪些，或是主文案是重要的，同時關鍵的數字也要突出怎么辦？

左圖，左邊主文案放大了關鍵點，由于右邊文案文字比較粗，所以層級拉開還是不夠突出，如果想拉開對比的話那就讓他們截然不同。右圖，字體選擇上拉開強弱，讓右邊的文字比劃選擇細一些；左圖的關鍵數字不夠突出，通過提亮改變顏色，來強化；按鈕在左邊畫面顯得太獨立，和文案沒有形成統一關系，反而按鈕看起來變得要比文案重要，那么把按鈕插到里面。

現在所有的信息，一環插一環，并且突出的文案明顯，關鍵數字也明顯；最后讓他們整體在畫面構圖中面積比例放大，改版后是不是舒服很多。

還有一些小伙伴可能覺得親密性原則不就是距離相近么，然后沒有把控好各個部分的文字距離，導致反而該拉開的沒有拉開，該近的沒有近。

上圖這個案例里，主文案分為了兩行，但左邊由于主文案行距比較寬，而跟輔助信息的距離太近，導致親密性不夠，而由于副標題文案又比較孤立，上半部的信息和下半部信息太散，整體統一度不夠。

右圖改進后，調整合適行距，并且加裝飾線，協調一下輔助信息比較短的問題，同時也起到分割的作用讓上下文案有關聯和統一。

文案排版的其他細節還有錯位排版時，注意錯位的大小，太大會丟失掉排版的平衡性；注意文案排版對齊，往往有的時候不注意，會讓你的作品看起來不夠精細；文案做傾斜處理的時候，一般情況都是往右邊傾斜，第一，右邊都是我們的主要習慣方向；第二，往右可以很好的把用戶引導到關鍵信息上，這些也是做 banner 排版里經常犯的錯也是要規避的一些坑。

4. 顏色技巧

顏色傾向

如果是代表年輕化，多用綠色和黃色，綠色代表活力、生機、積極向上；黃色系代表溫暖、希望、舒服。

這兩個顏色由于是臨近色的關系所以也會搭配出現在畫面中，色環 90° 角的顏色搭配所以是最舒服的配色，還有就是顏色對比非常和諧。

由于藍色是綠色的鄰近色、是黃色的對比色，紅色是綠色的互補色、黃色的鄰近色，所以綠、黃、藍、紅這些會在畫面中組成主色、輔色、點綴色。

注意協調好每部分顏色之間占比，主色 60% 左右、輔色 30% 左右、剩下的輔助色 10% 左右。

如果是代表科技、互聯網，就會以藍色為主，顏色也不會像上面那樣豐富，顏色體現的設計也沒有那么活潑，代表冷靜、自然、科技。

一般畫面在2-3種顏色，以藍色為主，再搭配紫色。因為紫色和藍色是鄰近色，不會像暖色調一樣太沖撞，所以我們經常會看到藍紫這種「好基友」的搭配。

知識分享類，分為普通的講師分享和高端知識分享。講師分享顏色要亮一些，顏色搭配大概是 1-2 種。

而高端知識分享，要體現知識的稀缺性和專屬感，代表尊貴、品質、價值，顏色大多用暗色或消色（消色就是黑白灰），大概也是 1-2 種。

顏色方面我總結幾點坑需要避開的：一，如果用插畫表現，一定要避免顏色的灰和臟，因為學習代表著積極向上的，灰色不適合。顏色選取的時候大概要避開「顏色警示區」的位置。

二，插畫風格避免選擇紫和一些冷色調，以暖色調為主，才能貼合情緒版定位；三，同樣的道理，顏色不要過于艷麗、過于刺激，反差明顯了，反而閱讀體驗不好，影響觀感；四，所有的顏色最終都要定位到主題上，做完后，反向推倒檢查一下，顏色呈現符合當前文案定位嗎？符合面向的用戶人群嗎？根據主題當前配色合適嗎？

更多電商配色方法：《這是一篇不看會后悔的配色干貨》

5. 小結

最后我想說的是，所做的東西把自己當成模擬用戶自檢一下，自己如果看到這個 banner 會點擊么？會吸引到你么？能直觀感受到么？會讓你舒服么？如果連自己都無感，那是相當失敗的。

如何使Banner中主體物更突出

運營專題在設計的時候，我們要考慮的是針對運營需求，給特定需求的用戶傳達零成本閱讀體驗，很多設計師做的 banner 畫面特別亂，原因是畫面中沒有突出主體元素。

所以在 banner 設計上要考慮貼合當前傳達的主題，所謂設計的「言之有物」。下面來詳細的談一下運營設計時如何突出主體元素，其中的言之有物。

運營活動最終想給用戶快速傳達文案信息，也就是「三秒閱讀」體驗，配合輔助文案的主體圖形更能方便用戶去理解。

可以看到下圖左為了讓畫面豐富，設計師往往會加一些輔助元素或圖形；而圖右糟糕的元素添加反而會過度設計，干擾用戶對于運營活動本身的理解和其表意性。

那么，如何突出視覺主體物，而達到最理想的設計作品的表意性呢？

我們從以下五方面細談：

1. 圖形化輔助元素

流暢線條的運用

我們在看音樂類運營 banner 的時候發現線條運用非常普遍，特別是利用 illustrator 里的「混合工具」來實現兩條線之間的復制混合。

人物涂鴉剪影

往往為了表現特定的主題：比如年輕化、個性化，通過錯位移動，添加亮色來使人物突出，往往更多的表現在：音樂、設計、嘻哈接頭文化的電商運營宣傳中。

這類設計個性鮮明，所以做之前考慮好，所要傳達的特定的人群是不是符合當前的審美認知。

簡單幾何形狀

有時候為了讓傳達主題更加明確，簡潔化設計很有必要「少即是多」，所以比如學習和知識付費類的設計，干脆就用簡單的圓形、方形、波浪曲線。

下面這個案例，設計者為了使這幾個人物不會太散，用圓形包裹，目的也是為了更加整體，試想一下，如果把圓形去掉，人物不僅會顯多，畫面也顯得既單調又亂。

立體幾何載體

讓風格調性顯得品質高，同樣讓設計少而精。需要注意的是，品質感高逼格的設計所用的圖形相對要規整一些，盡量不要顯得太隨意，多用方塊形狀和立體幾何載體。

比如網易嚴選，為了突出「所賣東西都是精挑細選」，會采用立體幾何載體襯托的方式，所表現的就是「隆重和百里挑一」，我們不一樣~（會唱的朋友們一起唱）

多邊圖形

運用模特表現的時候，高品質感會用一些規則多邊形，比如：四邊形、多邊形等。多邊的形狀會給我們帶來穩重感，「尊貴感與眾不同」往往是這類商品想傳達給我們的。

不規則流體

促銷類電商營造促銷的氛圍，激發購買欲，會用到多色彩的不規則流體，目的為了傳達「降價、折扣、滿減、超值、限時」等 ，往往會為圍繞主體物四周，突出主體元素。

小結

圖形化元素是最簡單也是最實用的一種突出主體元素的表現方式，不管是用哪種，一定要想明白所表現的主題：符不符合當前主題；推廣所屬對應的用戶群體：心理認知上能不能贊同；滿足這兩點，所加的圖形才有意義。任何圖形都是為了輔助突出主體元素，記住這一點，你就不會盲目的進行設計。

2. 文案裝飾襯托

文字鋪底

直接把相關文字鋪底是最常見的一種方式，用當前所對應主題的人物名字、相關文案、對應英文等。

文字與主體穿插

利用文字與主體的穿插營造出空間感，也是在平面設計中經常用到的手法，同樣也是在保證文字基本的識別度前提下。

注意文字顏色與主體顏色之間要拉開反差，不要糊成一坨，就適得其反了，適當的時候加一點點陰影還是很有必要的。

小結

不管是什么形式，所加的文字要有意義，跟主題相關。任何加的文案一定要能襯托主體物，也要有很強的表意性，畢竟文案才是最重要的。

3. 顏色對比的運用

主體物吸色襯托

從主體物上之間選取，作為背景顏色搭配，來襯托主體物簡直不要太完美，前提是主體物的顏色相對夠和諧舒服。需要襯托的背景顏色相對要弱一點，以突出主體。

顏色對比

我們一想到顏色對比，馬上想到「紅配綠賽狗屁」這句話，這句話的意思不是說紅配綠不行，而是說錯誤的紅配綠不行，聽不懂啊？來，舉個栗子…李子…梨子…例子！

左圖的紅綠顏色占比可以看到是比較平均的，大概1：1的比例，但是紅色作為一個比較刺激的顏色，顏色很鮮艷，如果搭配的綠色也一樣飽和度很高，兩個撞到一起沒有一個突出色，畫面就不會那么和諧了。

右圖如果我們把紅色的占比相應的減少，飽和度不變，而綠色降低飽和度，從而面積占比增大，起到襯托的作用，畫面之間是不是舒服很多。

下圖其他的顏色對比同樣如此。

小結

顏色對比的口訣是：主體如果是亮色，背景就用冷色；主體用重色，背景用亮色；主體用純色，背景用灰色；不管哪種對比，主體物的顏色一定是面積最小的那一個，無論如何拉開顏色對比反差是王道。

4. 主體物局部打光

人物面部打光

人物面部是最容易辨識，也是視覺焦點部分，所以讓面部從畫面凸現出來尤為重要，讓光源聚焦到臉部，主體人物顯得更加有質感和飽滿度。

物體亮部打光

物體和人物相比相對簡單，亮部高光部分為視覺焦點，讓物體顯得有質感，只需要給亮部特殊光源即可。

小結

光線能在突出主體物的同時，讓構圖更加豐富和飽滿，切記光線不要過亮，看起來會很不舒服。

5. 主體元素擺放技巧

人物截取范圍

截取擺放人物的時候注意，為了讓視覺焦點集中、有辨識度。具有代表性的人物和明星一般截取一半左右，大約胸部以上部位；而電商模特為了展示所賣衣服，一般露出大約三分之二。

萬萬不要切頭部

讓人物完美的呈現在畫面之中，讓畫面能夠看起來舒服些，構圖也相對完整，反之把頭部一刀切，會使畫面負空間變小，構圖擁擠，而觀看者對于人物的識別度也隨之降低，閱讀成本變高。

多人物擺放要求

多人物組合時，整體人物處理要基本保持一致，特別是眼睛視線要盡量保持統一的視覺基準線，不然會顯得雜亂不堪。

多物體的擺放

表現美食產品的時候，文字居中構圖，物體散點擺放要注意，角度的統一，統一俯視角度，不要有俯視有平視，保證統一度。

6. 案例帶練示例

案例分析

這是一個小伙伴做的醫美類的運營 banner，當看到這個設計的時候我的內心是崩潰的，我們分析一下問題。

問題一，首先主體物沒有突出，主體人物偏灰，背景也灰；問題二背景太亂，沒有視覺焦點；問題三，文案識別度完全丟失掉了，排版也太亂；好下面我們來改一下。整體看下來，并沒有表現出醫美要體現的「變美」，用戶完全沒有視覺感受。

調整改動

前后對比

最后我們來看看對比效果，是不是好很多。

無論什么樣的設計，加什么樣的元素，目的只有一個就是要有理有據、有道理，所有的運營設計都是為了輔助主體文案。不要讓你的設計無用，或者減分，把設計元素最大化發揮它的作用才是設計的最終目的，你就說是不是吧！

業內有很多人覺得手勢交互沒必要拿出來深究，覺得用戶使用產品的過程中，自然而然就會去使用拇指，進行手勢操作。但這種說法，就跟「用戶心理模型」類似。當然，對于用戶來說沒必要深究手勢交互，但作為設計師，如果不了解其背后的邏輯，那么就無法解決產品設計背后的一些問題。

所以我們今天，好好聊一聊手勢交互這件事。你會發現，原來你以往觀察或以為的設計問題，都是手勢交互在作祟。

手勢的意義

我們以前經常聽到「以用戶為中心做產品設計」這句話，意思是產品需依附于目標用戶的真實場景來設計。與此同時，其實還有一句話在提醒著交互設計師如何做產品設計，就是「以觸摸屏為中心做產品設計」。

為什么呢？因為用戶從始至終都是在跟觸摸屏做接觸，不管換了什么設備，他們都是要通過屏幕與產品進行交互的。

我們可以在這里思考一下手勢的意義。

手勢的出現改變了什么？可以回想一下 iPhone 4 發布的時候，當看到這樣一臺屏幕上沒有任何按鍵的設備，是不是會覺得不可思議？鍵盤，電話接聽按鍵等都消失不見了。

人們在使用 iPhone 這樣的產品時，不再需要去強行記憶任何固體按鍵。觸摸屏與手勢的結合，幫助我們隱藏不必要的元素，幫助用戶聚焦于內容，在有限的物理空間獲得更多的信息。

所以用戶通過觸摸屏與產品進行交互，跟通過鍵盤按鍵與屏幕進行交互是完全不同的。手勢交互更自然且更。

手勢操作對我們來說如此自然和直觀的主要原因是因為它們類似于與真實對象進行直接交互。譬如你用遙控器控制電視上的按鍵，需要通過上下左右這樣的操作來定位指示器，而觸摸屏直接就可以通過手指點擊內容進行操作。這是完全不同的概念。

綜上所述，我們能知道，手勢的三個要素：簡潔、易用、直觀。

所以我們通過一些常見的手勢行為，就可以在產品界面上很輕松的完成任務。

常見的手勢行為：

• 點擊：單指短暫觸摸表面；
• 雙擊：單指快速兩次觸摸表面（通常是縮放）；
• 拖動：沿表面移動而不會破壞接觸；
• 捏/展開：用兩根手指觸摸表面以移入（捏合）或移出（展開）；
• 按下：單指觸摸表面并按住；
• 滑動：快速手勢，不需要觸摸目標。

當然，我們經常也會遇到一些背離手勢交互的產品設計，雖然也是點擊、拖動等等，但操作起來總是不那么順心。這里面有一個關鍵點就是，手勢直觀性。

有數據表明，蘋果的 3D Touch 使用率非常低，就是因為直觀性太差，用戶不知道通過這個操作能帶來什么結果，且使用它需要長按，經常會同時呼出「卸載」，那么效率也就會降低。久而久之，用戶就不去使用了。

正面例子如下圖，滑動與文案結合。

這樣一看，用戶馬上就能知道這個操作行為如何觸發，緊接著就產生行動，然后會反饋結果。

這也是手勢交互的核心：觸發，行動，反饋。

對比 3D Touch，觸發沒有提示，行動后時常有兩種反饋結果，相比起來就不那么友好了。

除了上面聊的這些，手勢交互還能從另一方面來提升效率，就是拇指操作區域。

拇指驅動設計

我們都知道，現在手機屏幕越來越大，甚至比最早屏幕大了一倍以上。但是很多設計師并沒有轉換思維，跟進這個趨勢的變化。

這里給大家普及一個知識：大部分人誤以為，手指在屏幕上的熱區是永恒不變的，但其實手指熱區會根據設備的變大而縮小。因為手掌支撐設備的重心靠后走了，所以拇指操控屏幕的范圍也就變小了。如下圖。

結果是，手機屏幕變大，雙手持機的用戶變多，但依然還有 75％ 的用戶是使用拇指來觸摸屏幕的。因此，術語「拇指驅動設計」應運而生。

我們上面說到，在使用一些產品的時候，經常會遇到使用起來不順心的情況，然后說了「手勢直觀性」的概念。但這里，還有個更重要的原因，就是「拇指操作區域」。

拇指操作區域被分為三塊內容，分別是：易于觸達，難以觸達，以及介于兩者之間的區域。

看下圖。

所以在設計界面時，要注意界面的主要操作元素是否處于用戶易于觸達的范圍之內。

如果你仔細觀察并思考過，也會發現，iOS 的產品界面中，「返回」按鈕就位于「難以觸達」的區域。原因是產品人員本身也不想用戶返回或退出，而是讓用戶聚焦于當前頁面，想要返回，那就需要付出一點成本，什么成本？操作成本。

有人會說，由于 iOS 可以從手機的左邊緣向右側輕掃以獲得返回效果，因此在大多數 iOS 產品中，返回都不需要太大的操作成本。但是，并不是所有 iPhone 用戶都知道這一點，也不是所有產品都支持這一特性的。而且手勢交互的進化本來也就是為了提升用戶操作的效率，所以本質上他們并不矛盾，只是相比以前，我們現在的操作更快了。并且「右滑」返回，本身在手勢操作中相比「點擊」也是更具操作成本的。

當了解了手勢的一些意義，以及拇指操作區域對于產品設計的重要性之后，我們就可以通過一些案例來做一個全局分析了。

1. 內容在上，操作在下

許多人設計 App，但是沒人研究過 App 為什么要這么設計。

比如，為什么起初要把標簽欄放底下呢？關于這個問題，當初我也是問了許多人，而基本都只是說這是官方設計規范。這相當于是一句廢話。

通過翻閱多方資料，我發現在工業設計領域有一條重要的基本設計原則：內容在上，操作在下。

比如在使用電腦的時候，操作在下意味著使用者在操作過程中，手指始終處于界面下方，而內容在上面，就不會出現手指遮擋內容的情況。

如下圖的鍵盤操作提示：

基于此，相信你也知道為什么標簽欄在下方了吧？

另外，為什么 iOS 設計規范建議將「編輯」按鈕放置在界面右/左上方的位置呢？

界面右/左上角的位置對拇指來說顯然是不友好的。然而，這樣做的原因也是顯而易見的：編輯功能會讓數據發生變化。將這類控件放在難以操作的位置上（與左上角的返回是一個道理），就是一種防御性的設計策略，可以在一定程度上避免因為太容易產生誤操作而導致的破壞性的結果。

通過這一小段之前聊過的內容，你們會發現，手勢與拇指操作其實在驅動著產品設計。下面我們來聊個大的案例。

漢堡包菜單的消失解析

漢堡包菜單，也就是側邊欄導航，Facebook 早期測試顯示側邊欄導航讓用戶使用率降低了一半。

我們一起來看看市面上給出的三類說法。

1. 可見性太低

默認狀態下，用戶是看不見側邊欄的，除非點擊了側邊欄的彈出按鈕。所以這種情況下，里面的功能都是用戶腦袋里已知的，但很可能都想不起來。比如，現在你回想一下知乎底部 5 個標簽分別是什么？或者微信右上角「+」里面有哪些功能？是不是要想一會兒，才能記起來？甚至還是想不起來。

之前我在文章里寫過，用戶對于功能的使用一定是「所見即所得」，而不是「心向往之」。用戶只會注意自己看到的信息，而不是憑借記憶或想象來使用產品。

底部標簽欄就很好的解決了漢堡包菜單的「可見性」問題。

2. 效率較低

效率較低主要在于操作頻率，大家看下面兩組圖的對比。

第一張圖，當用戶從首頁進入到個人信息頁面，只需要兩步；而第二張圖，則要三步。

這里多一步看起來似乎影響不大，但如果現在要從個人信息頁面到「標簽 3」的話，第一張圖也只需要兩步，第二張圖還是需要三步，當頻繁去使用這樣的產品后，用戶的整體效率就會下降，體驗也會隨之降低。

3. 與平臺模式沖突

大家應該知道，在 iOS 的操作頁面中，通過手勢可對 tab 進行左右切換，而側邊欄除了通過點擊菜單按鈕展開之外，也可以通過右滑彈出。這里面有什么沖突呢？看下圖。

當頁面聚焦在「標簽 2」時，右滑除了能回到「標簽 1」，同樣也很可能會切出側邊導航欄。

這樣的手勢沖突，導致頁面層級與功能導航的優先級混亂了。

無論是導航還是控件，當它們組成一個頁面后，它們的操作就會有優先級。比如下面這個例子。

如果你對標紅的分段控件比較熟悉，就知道，它是可通過屏幕滑動進行切換的。但是在「短信」里，它是不能通過滑動屏幕進行切換的，因為用戶可對單條信息進行左滑做刪除或其他操作。所以當頁面操作模式存在矛盾時，我們會將子層級操作優先于父層級操作。

譬如你進入朋友圈，是不能馬上回到首頁的，這時候頁面層級較深，產品人員要將用戶聚焦于頁面本身，如果直接能返回到首頁，頁面層級和產品架構就會混亂。

類似的例子還有很多，我這里就不繼續列舉了。

所以從「短信」的例子可以看出，當控件與控件之間的手勢發生沖突時，我們要考慮優先級，將內容優先于頁面來處理。那么回到上面的例子，分段控件與漢堡包菜單的手勢發生沖突時，很明顯我們要優先分段控件的操作，而禁止掉漢堡包菜單的右滑手勢。結果就是，效率又低了。

4. 小結

這三類，如果你認真思考里面的關系，其實就會發現，它們的共通點就是與拇指的聯系過于被動或直接被切斷了。

• 第一個「可見性太低」的例子，菜單被隱藏，拇指不能直接與菜單產生關系，并且距離過遠，拇指難以觸達。
• 第二個「效率太低」的例子，用戶需要通過拇指來回操作，導致效率降低，這就跟使用遙控器控制電視機一樣，用戶無法直接觸達內容。
• 第三個「手勢沖突」的例子，其實就很清晰了，就是說標簽欄的優先級可能會被頁面的其它控件所取代，那么拇指就無法直接對其產生作用，從而禁止當前頁面的手勢交互行為。

它們的核心點就是拇指與觸摸屏的關系。

如果你現在還不能深刻理解漢堡包菜單的劣勢，那就想一下去看一下現在的產品，其中「我的」、「個人中心」或「更多」其實都是變相的漢堡包菜單。

在「我」這個標簽頁里，這一系列功能列表，無非就是另一種模式的漢堡包菜單，只是這里呈現的都是不重要的功能，并不影響用戶使用這個產品?；叵胍幌?，你是不是很少，甚至從來沒用過這里的某幾個功能？再跟手勢結合，就會發現，「我」所處區域并不是容易點擊的區域，這就是它效率低下的原因了?，F在能懂了么？

彈框的操作路徑

當傳統的確認彈窗逐漸被手勢操作取代，大家就應該察覺到：以往從電腦遷移到移動設備上的交互行為已逐漸被改善。

我曾經寫過一篇文章，叫「取消按鈕的設計邏輯」，講了「左取消，右行進」這個原理。意思就是當我們在設計彈框的時候，用戶已經習慣這樣的操作路徑，所以不要輕易更換位置以混淆用戶的認知。再從手勢的角度來說，就是右邊更容易點擊。

后來有同學說到，但是有些特殊場景，譬如刪除資料，而產品人員不希望用戶刪除，于是把刪除放在左邊，取消放在右邊。畢竟右邊更容易點擊，所以位置換了會比較合理。

這是錯的！

我們不能通過改變用戶使用產品的常識來將產品人員的想法置于用戶之上。當用戶已經形成「左取消，右行進」的認知之后，違反這樣的一致性，去換位置是很危險的。所以出現了 action sheet，來解決一些產品關于 alert 無法解決的問題。

如圖。

大家要記住的是，當頁面邏輯與手勢操作產生邏輯沖突時，我們不是去否定以前已經被驗證且正確的內容，而是通過創新，來解決這個沖突。這就是拇指驅動設計的一種方式。

包括我們以前在移動設備上選擇刪除某項數據，都會彈出警告框，詢問我們是否確認刪除。這種方式會打斷我們的操作行為，久而久之，用戶已經對此交互方式習以為常，或者說免疫了，但這種彈框的方式始終被認為是不好的一種交互手段。所以側滑刪除，已經被更多產品功能用來取代沒必要彈框的操作。

也許很多人沒思考過底層原因，或者僅僅只是覺得其相比彈框顯得更友好。其實這個行為是基于手勢交互做了相應的優化，讓用戶操作起來更加方便。

Banner

到了這里，我再舉個所有人都熟悉的例子，就是輪播圖了。

輪播圖最早出現于網頁端，后來被大量商家模仿，以至于到移動端還備受各產品設計人員的歡迎。但其實很多人對輪播圖的使用方法都是錯誤的。

下面來看輪播圖與手勢的關系。

試想：你的輪播圖有 6 張 Banner，你要翻到第 4 張，無論是往前翻還是往后翻都要產生 3 次交互行為。而大部分產品的用戶在界面停留的時間不會這么久，更不會看完你 Banner 的內容。以至于有研究表明，大部分產品里，除了第一張 Banner 的點擊率能達到 83% 之外，其余的點擊率都非常低。

有人說可以點擊下面的原點指示器做跳轉，這么小的點，你覺得點擊它現實么？所以手勢交互與輪播圖是相互矛盾的一種設計方式。

所以當運營策劃了一個活動，而你就往頂部的輪播圖里塞，這個行為就已經注定這個活動的用戶參與度是很低的了。除了個別電商產品，他們以賣廣告位給商家作為盈利點，但即便如此，我相信這個廣告位除了第一張圖的點擊量稍高外，其他圖片的點擊量相對于產品本身的用戶體量比較而言還是很低的。這也是為什么部分產品把輪播圖規則改為用戶進入首頁隨機展示輪播圖頁面，而不是強制指定于顯示第一張的原因。

畢竟輪播圖在頂部，用戶需要通過拇指長時間的在「延伸區域」進行操作，那么使用率自然就降低了。

如果你的產品有很多活動是在同時期進行的，那么我給部分產品的建議是放一個活動主題入口，如下圖。（當然，這要視情況而定，并不是通用的。）

搜索框的變化

我們現在看到的搜索框基本都是放在屏幕頂部。

為什么呢？

市面上對這個問題的解釋是這樣的：用戶已經被現在的產品訓練得在界面的頂部必須看到一個搜索框，設計師打破這個常規就要承擔風險。

看完這篇文章，你就已經知道，對于用戶來說，由于屏幕頂部離拇指很遠，處于難以觸達的區域，在體驗上很不好。所以搜索框成了認知上應該在頂部，但操作體驗上又不應該在頂部的一個設計。

但是回想一下，會發現大多數 App 的主要內容都是位于易于觸達的區域。所以當看到高德地圖把搜索框移動到下面來之后，就能知道，拇指驅動設計的概念被越來越多的人認識到其重要性。

地圖類產品把搜索框移到下面來的首創應用不是高德，應該是 Lyft。

瞧，拇指驅動設計，多酷~

總結

《上癮》里有句話：當人們不由自由地做出下一個舉動時，新的習慣就會成為他們日常生活的一部分。

當手勢充分地發揮了作用，輔助用戶操作或實現功能，它就成了用戶不可分割的一部分。

今天通過對手勢意義的解讀，以及拇指驅動設計的解析，再加上這些案例的拆解，我相信你能更好地理解為什么手勢交互這么重要了。

交互設計師對于「觸摸屏」，必須有深刻的認識，才能理解設計背后的邏輯。

如果這篇文章對你有幫助，記得點個贊，后面我好持續輸出。

文章來源：優設

流利說®少兒英語是流利說®為 3-8 歲兒童定制的一款英語啟蒙類產品，本次邀請到 UI 設計師 kelly，從視覺設計與輸出的角度，詳細地介紹該產品游戲題型的設計過程。

流利說®少兒英語，目標是幫助該年齡段的用戶建立發音自信，并且能對英語學習產生持續的興趣?；趦和澩娴奶煨?，自然而然我們會想到使用游戲化的設計，將枯燥的英語學習過程變得更有趣。

△ 收集糖果

△ 警察抓小偷

△ 切水果

△ 消滅細菌

視覺設計

游戲為輔，教育為主。

對于視覺設計而言，游戲題型設計的主要有以下 2 個難點：

• 把握題型趣味性與教學目標之間的平衡；
• 為教學內容找到最適合的游戲展示形式。

接下來我將從視覺表達、視覺層級、反饋這三點分享我的一些思考和經驗。

1. 明確的視覺表達

在開始設計前，我們對 3-8 歲兒童進行了調研，發現處于該年齡段的用戶，大多有以下特性：

• 不識字，且不能進行復雜邏輯操作；
• 易被色彩鮮艷且有動效的對象吸引，并且會主動點擊；
• 僅能理解自己生活中接觸過的事物（比如玩具，食物，游樂園等等）；
• 趣味性是調動他們持續學習的重要動力。

基于以上幾點，我們便總結出以下幾點設計方法。

視覺形式即題型玩法

以拼圖題為例，此題的目標是檢測孩子拼寫單詞的能力。如果僅將單詞挖空再讓用戶選擇，那么孩子會覺得這道題既不會玩，也不好玩。但如果在視覺表現上采用孩子比較熟悉的拼圖，就可以方便孩子更好的理解題目的意思，進而引導孩子的操作。

場景故事要有視覺連貫性

「游戲」（此處的「游戲」代指游戲題型）結束后有一個和故事設定相關的結束畫面，承接前面的操作，讓整個「游戲」過程能呈現出相對比較完整的體驗，以增強小朋友在「游戲」過程中的沉浸感。

△ 游戲操作：切水果

△ 游戲結尾：切水果榨果汁

2. 清晰的視覺層級

由于兒童缺乏成年人所具備的視覺篩選能力，他們往往很難分辨出界面中的重要元素和次要元素。尤其是 3-5 歲的孩子，他們會習慣性地去點擊界面上所有吸引他們的東西。因此我們需要為不同層級的元素設置強烈的視覺區分，明確告訴他們哪些元素是可以點擊的，需要被關注的，哪些元素是不可互動的。

提高教學內容易識別性

游戲題型的設計方法通常是使用游戲的形式去包裝常規的教學題型，讓小朋友感覺是在玩游戲，而不是在做題。因此我們需要設計恰到好處的游戲容器去承載教學內容，使其兼具教學內容的識別性又不會影響「游戲」體驗。此處我們嘗試去拉開游戲元素和教學內容的視覺差距──在畫面中的視覺焦點處擺放教學內容，而游戲元素僅作為背景或者容器，用于襯托教學內容，并且盡量選取不易和教學內容發生沖突的形式。此外，為兼顧游戲畫面的豐富性和多樣性，容器的設計需要有一定的適配性。

△ 適配文字

△ 適配圖片

△ 適配文字和圖片

對于看文本讀單詞的題型，游戲容器則以烘托文字為主要目標。在該場景下，游戲容器的視覺設計重點在于外形的刻畫，簡化內部細節，以此將孩子的視覺重點聚焦在文本，而非容器本身。此外，為平衡字符段不同所帶來的顯示差異，我們對文字的大小也進行了適配。

△ 1-12 個字符──文字大小 88

△ 13-25 個字符──文字大小 76

△ 26-45 個字符──文字大小 62

背景畫面的層級感

在游戲題型中，有不少故事性強，空間延續性高的設定。為加強畫面的運動感和空間感，視覺輸出時，我們額外增加了前景層，利用前景圖片打造視差效果，以增強整個背景的層次感。

前景圖片的設置，同時也能解決適配不同屏幕尺寸時，背景區域顯示差異所帶來的視覺問題。

縱向運動的情況下，兩側的圖形如果設置在背景里，當適配到短屏幕的時候就無法呈現出來。

而單獨設置成前景圖，則可以靈活地適配不同屏幕比例的機型。

克制地使用過于明亮的色彩

用研時，我們發現孩子們容易被顏色醒目的東西所吸引，但如果一個頁面上過度使用明亮的色彩，則會大大分散孩子們的注意力，顏色過載所導致的視覺信息復雜性會增加孩子們的使用難度。

3. 合理的反饋

合理的反饋包括符合交互邏輯的及時反饋和適當的正負反饋。在游戲設計中，設計師大多會通過酷炫的動效來做重要操作的點擊反饋，以增加游戲爽感。這套法則，在兒童世界也同樣適用。

及時反饋制造小驚喜

我們在產品的反饋設計中適時地增加一些有趣的微動畫，給孩子們制造一些小彩蛋。這些小驚喜，不僅能及時地拉回小朋友的注意力，給他們帶來趣味性的同時，對他們而言也是一種鼓勵。

例如：當用戶點擊拼圖題選項時，會出現 IP 相關的卡通元素，這些元素既能加強趣味性，又能加強用戶對品牌的認知。

適當的正負反饋

大約從 4 歲開始，孩子們就會有輸贏的概念，會因為贏而喜悅，因為輸而感到焦慮。──《數字時代兒童設計》

對孩子的正向反饋宜歡呼、表揚性的動畫為主，整個畫面氛圍可處理得熱鬧一點，這對孩子來說是一個很好的刺激點，能讓孩子有繼續玩下去的欲望。

△ 正向反饋1：IP 形象高興地跳出

△ 正向反饋2：IP 形象高興地跳出 + 打分星星

△ 正向反饋3：IP 形象鼓掌

考慮到孩子們會因為輸而感到焦慮，因而在處理負面反饋的時候，需要考慮他們此刻的心態，動效設計應拉開與正向反饋的差別且不能過于消極，消極的反饋容易打擊孩子的積極性，產生挫敗感，鼓勵性的反饋為宜。

△ 負面反饋：IP 形象配合鼓勵性語音做加油的姿勢

反饋動畫的設置也需要考慮用戶的可接受程度，慎用具有攻擊性動效。如下圖，錯誤反饋時 IP 形象會受到攻擊而感冒，上線后發現孩子們對這種反饋表現出了害怕的心理。

以上 IP 動畫由流利說®少兒英語設計團隊傾情制作。

視覺輸出

不會寫代碼的設計也是好開發。

視覺稿如果不能被很好的實現落地，那再好的設計稿也只能是概念，而不是一份有效的方案。在如何更好的把控視覺實現程度這一問題上，我們也走過不少彎路，和開發經過幾輪的探索，最終形成了一份適合我們團隊的輸出模式。

在整個開發環節，設計師主要承擔一部分的動畫開發工作。在和開發對接的過程中，我們主要使用的軟件是：

• CocosCreator：游戲開發軟件，內含動畫編輯器。
• SourceTree：向開發提交動畫代碼。

△ CocosCreator

△ SourceTree

開發搭建完框架后，設計在 CocosCreator上，完成部分元素的動畫，再用 SourceTree 向開發提交動畫代碼。開發最后通過代碼將每個動畫串聯起來形成一個完整的動畫。

△ CocosCreator 動畫編輯器界面截圖

題型動畫連貫且細節多，單靠視頻 demo 是無法協助開發精準實現設計效果的。為了解決這個問題，我們建立了對設計落地具有指導性意義的文檔──適配標注文檔和動畫標注文檔。

1. 適配標注文檔

用戶機型調查結果顯示，使用 0.462、16:9、4:3 這三類屏幕比例的用戶占比最大。為保證不同屏幕比例上的展示效果，我們根據上述三種主流尺寸，分別輸出大小為 780×360，640×360，480×360 的設計稿，并規定以 780×360 為設計基準，對另外兩個尺寸進行適配。

標注內容為三個主屏幕尺寸下的縮放比例、大小位置、特定動畫的起始點或終止點位置等細節調整標注，方便開發在做適配的時候能準確還原設計稿的布局。

2. 動畫標注文檔

該文檔主要是對動畫和音效的詳細說明。每個題型的動畫會被拆分，以最小可拆分動畫為一個標注對象，對其標注時長、具體的動畫效果以及運動曲線數值等，方便開發地還原 demo 的設計效果。詳細的標注文檔不僅方便了開發，更為后續測試和視覺走查降低了不少溝通成本。

總結

游戲化題型的設計，需要更多的從用戶的角度出發去思考和權衡游戲與教學的平衡性。對于兒童產品而言，設計服務于教育，愉悅和多變的體驗是設計的方向，教學才是最根本的設計目標。

文章來源：優設

在年復一年的電商促銷節的渲染下，如今618、雙11儼然成為全國最大的線上狂歡節。而在狂歡節中擔任著重要角色的主會場，承擔著為各分會場分發流量的重要使命。與此同時，大促的頁面設計也越來越趨向于同質化，大多基于以往的經驗沉淀，少有突破。在這樣的背景下，設計師不僅需要考慮如何滿足商業需求，更要兼顧用戶的體驗感受。本文將通過多次主會場設計實戰中沉淀下的經驗與教訓，以京東微信手Q購物入口的年貨主會場為例，深入探討如何在成熟產品中做突破設計。

洞察：發現問題（面臨挑戰）

1. 頁面結構與動線逐漸趨于穩定

主會場設計不斷進化和演變，從以往簡單的會場入口展示，到會場+品牌+單品+關鍵詞的綜合內容展示。雖然視覺風格不同，但無論從結構上還是體驗上來看，本質都相差不大。

2. 需要更豐富的詮釋品牌價值與用戶感知

在消費升級的大環境下，消費者的消費能力/品牌/品質在全面升級，此時需要更加注重品牌價值與內涵的塑造，精準化傳遞用戶感知。而主會場現有模式以大促營銷為主，重點突出促銷賣貨氛圍和類目分流，品牌價值與用戶感知的傳遞較為薄弱。

3. 既要效率分流，也要逛起來（成交）

分流坑位與效率的提升，在一定程度上會降低會場的成交轉化，如何平衡二者之間的關系，在設計上需要平衡把握。

聚焦：設計目標

在電商設計中，我們需要把握很重要的一點就是：平衡商業目標與用戶體驗之間的關系。設計目標的制定，需要我們對主會場的商業訴求與用戶訴求進行深入了解，才能制定有理有據的設計目標。

1. 商業訴求

因電商環境的特點，主會場設計需要以商業訴求為思考起點，為商業價值賦能，輔助其商業目標的達成。因此，在策劃階段，設計師應該提前加入討論，和業務方一起梳理并明確業務訴求。因京東大促節奏時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時間，而針對不同的時期，主會場的業務訴求也會略有變化，但整體差別不大。

會場分流

大促期間，主會場作為流量矩陣中心，若只通過主會場一個頁面來滿足用戶需求是不太可能的，因此的會場分流是核心的商業訴求目標。

提升成交轉化

雖然主會場的核心目標是分流，但隨著大促策劃的逐漸深化，提升流量成交轉化率，賦能主會場價值最大化也是需要考慮的重要因素。

會場預約

京東大促節奏具有時間長的特點，節奏規劃上會分為預熱、品類、高潮三個時期。如何保障品類日-品類會場的流量曝光，為會場預約也是主會場設計需要考慮的重要因素。

2. 用戶訴求

主會場最終面對的還是用戶，服務好用戶才能使其產生價值，并最終實現商業目標。根據對以往大促設計的用戶及數據反饋進行深入剖析，可大致分為新用戶及老用戶兩種類型，并進一步對用戶特征/訴求等方面進分析整理出用戶角色卡。

通過以上分析，總結出以下三大核心用戶訴求。

撿便宜薅羊毛

大促期間，用戶一般通過購物首頁、社交分享、外部投放等入口進入主會場，無目的或半目的型用戶居多。不管新用戶還是老用戶，都是以「閑逛」來尋找折扣，撿便宜薅羊毛心理加重，但也相對理性。

快速篩選

面對越來越復雜的電商大促內容與玩法，用戶需要一個更簡單、更的會場為他們傳達促銷氛圍與優惠。

個性化推薦

個性化算法基礎上，用戶對自己強相關的內容更加感興趣。

3. 核心設計目標

通過對商業訴求與用戶目標的充分解讀，在主會場設計中我們需要在兩者之間找到平衡點，來更好的兼顧商業與體驗。最終將今年京東微信手Q購物入口的年貨主會場的核心設計目標設定為：打造極簡用戶體驗，提升用戶專屬感知。

4. 設計策略

設計策略的制定能夠有效幫助我們始終貫徹核心設計目標來探尋解決方案，根據前面的設計分析，定義出本次年貨節主會場的五大設計策略：用戶專屬感知、化繁為簡，整合、多場景可復用、年味春節、多緯度多場景。

效率 · 化繁為簡，整合

1. 頁面動線設計

主會場作為大促版圖中的流量矩陣中心，堪稱絕對 C 位。在向用戶傳遞大促氛圍及專屬感知的同時，又要滿足效率分流及成交等目標，同時還要引導用戶參與各種互動，這需要構建合理的頁面動線。本次主會場頁面動線設計劃分為三大板塊：頭頸部、中間和尾部，采用總分總的節奏引導用戶瀏覽。

• 頭頸部：氛圍與利益點傳達、高質量個性化推薦傳遞用戶專屬感知；
• 中間：樓層錨點設計，便捷篩選，內容分流；
• 尾部：長尾 BI 商品推薦，深化用戶專屬感知。

2. 首屏-頭部設計

主會場頭部作為門面擔當，承載著向用戶傳遞主題訴說與促銷氛圍的功能。隨著運營需求的不斷增加，以及頭部資源利用率等問題，頭部設計不在單一的追求氛圍打造，而將更多的承載功能型需求，如：會場推薦、活動推薦、預約時間軸、互動入口、優惠券等。在有限的空間里如何進行內容展現和傳達，本次年貨節將通過內容重組和層級劃分來進行實現。

體驗 · 打造專屬感知

1. 首屏-頭部設計

精準化營銷下的千人千面，用戶對自己強相關的內容更加感興趣。大促環境下，他們更期望了解自己感興趣的單品、品牌、品類的促銷折扣信息。在首屏如何向用戶傳遞專屬感知的體驗？我們根據用戶屬性進行新老用戶切分，結合日?；顒訑祿炞C整理出：猜你喜歡商品、購物車降價商品、BI 拼購商品、BI 會場等四類內容，打造用戶專屬年貨節模塊。

2. 中間-樓層設計

類型繁雜、內容眾多的中部樓層設計，承擔著 50+ 分會場曝光分流的重要使命。我們把 50+ 分會場劃分為 9 大品類，每個品類一個樓層進行內容組合設計，包括：優惠券、品類主會場、分會場入口、品牌曝光、單品曝光、熱搜詞等內容。樓層順序根據 BI 進行展示，讓用戶即使在內容繁雜的情況下也能快速定位自己感興趣的內容。

3. 尾部-猜你喜歡設計

長尾理論是網絡時代興起的一種新理論，當商品的銷售成本急劇降低時，幾乎任何以前看似需求極低的產品，只要有賣，都會有人買。這些需求和銷量不高的產品所占據的共同市場份額，可以和主流產品的市場份額相比，甚至更大。簡單了解長尾的含義后，可以清晰的知道主會場頁面中加入長尾設計的原因：利用互聯網移動端頁面無限延長的框架，進行更多貨品的曝光，來留住剩余未跳轉流量，進行商品售賣來實現價值最大化。在長尾內容上加入 BI 推薦，深化用戶專屬感知，提升用戶消費轉化。

規范 · 多場景可復用

1. 今日必買模塊設計

因京東大促品類日節奏性曝光的特點，主會場的今日必買模塊作為這一特性的承接模塊，需要滿足不同品類日之間的差異化需求。如何在滿足個體差異化需求的情況下，又能降低設計、開發成本？本次年貨節主會場對今日必買模塊進行了組件化設計。

除了今日必買模塊，品類樓層的設計也遵循了這一設計原則。

互動 · 多維度多場景

1. 輕互動設計

如何讓用戶深度參與會場并形成記憶點？會場的互動設計是很好的方法。通過輕量的互動方式，引導用戶參與并拿到獎勵的同時，滿足商業價值的需要。本次年貨節主會場從用戶角度出發，通過：做任務贏大獎、分享贏京豆、新年紅包、明星拜年等四個互動玩法，有節奏的投放在年貨節的不同時期，形成用戶記憶點。

效果反饋

有些地方雖略有遺憾，但整體反饋不錯。成交、UV 跳轉率、UV 價值等指標顯著提升，其中 UV 跳轉率、UV 價值均為近兩年大促主會場最高值。因涉及敏感數據，這里就不再一一詳述。

總結

通過對 19 年年貨主會場設計的詳細解讀，相信堅持閱讀到這里的小伙伴們對「如何在成熟產品中做突破設計」已經有了深入的了解，希望我的這些思考能夠給你在工作中帶來一些幫助。

在手機app應用中各種格式的彈窗效果相信大家都看過，也可能反感過某些彈窗，本文就來談談關于app彈窗設計以及彈窗的適用情景。

一. 彈窗的定義

1. 彈窗作用

彈窗是為了讓用戶回應，需要用戶與之交互的窗口。

非模態彈窗一般被設計成用來告訴用戶信息內容，而模態彈窗除了告訴用戶信息內容外還需要用戶進行功能操作。

2. 模態彈窗

會打斷用戶的操作行為，強制用戶必須進行操作，否則不可以進行其他操作。

（Alerts／dialog，Actionbar，Popover）

3. 非模態彈窗

不會影響用戶操作，用戶可以不與回應，通常有時間限制，出現一段時間就會自動消失。

（Toast/HUD，Snackbar）

二. 彈窗分類

以下將以各類彈窗的含義、作用、適用來進行淺析。

1. Alerts/Dialog：警告框與對話框

含義：英文意為警告、對話，跟彈窗屬性非常吻合，就是緊急狀況，打擾用戶的行為。

剖析：iOS中警告框稱之為Alerts，作用是用來傳達重要信息，并伴隨著需要用戶進行操作。

iOS規范中，警告框包含的元素如下：標題（必選）、描述信息（可選）、輸入框（可選）、按鈕（必選）。

必須包含標題、包含一個或多個按鈕。

Android規范中，彈窗交互按鈕需結合實際情況，不用「是/否」原則進行設計。

作用：告知用戶當前發生的狀況，讓用戶主動選擇回應。

適用：重要性較高的操作時，如退出、刪除、清空等。

2. Actionbar（Sheets、Acitivity View）：操作欄、操作列表、活動視圖

含義：英譯為工具欄、操作欄。

剖析：當用戶激發一個操作的時候，出現此窗口。

一般會給用戶提供更多的功能選擇，一般可采用官方控件。

一般都設計有一個默認的「取消」按鈕，點擊取消可以關閉彈窗。

Aciton Sheets和Activity Views是iOS上特有的交互形式。

特性是用戶觸發、包含兩個或以上的按鈕。

△ 以上為今日頭條、iOS系統相冊

作用：操作列表提供一系列在當前情景下可以完成當前任務的操作，而這樣的形式不會永久占用頁面UI的空間。

適用：如分享功能。

3. Popover/Popup：浮出框/浮層彈窗

含義：英意為彈出窗口，浮動于頂層窗口，氣泡。

△ 以上為微博、qq、微信

剖析：當用戶點擊某個控件或者某個區域時浮出的半透明或者不透明的彈窗窗口。

不會對用戶所在位置進行跳轉。

作用：可以在當前頁面進行更多的操作行為，顯示/隱藏頁面中的折疊信息。

適用：首頁位置呈現一些常用操作的快捷入口。

4. Toast/HUD：提示框（iOS沒有Toast，只有HUD）

含義：Toast也被稱為吐司提示，Toast是安卓系統的一個控件名詞，現也應用于iOS系統中。

剖析：提示框屬于一種輕量級的彈窗反饋形式，常以小彈框的形式出現，持續1-2秒自動消失，可以出現在屏幕任意位置，但是建議同一款產品盡量使用相同位置，讓用戶產生統一認知，成為習慣。

提示信息能給予用戶及時反饋，確保用戶知曉自己所處的狀態，并可以做出相應的措施。

iOS用戶更習慣于在頂部感知反饋信息，不干擾用戶瀏覽主體內容。Toast出現在屏幕頂部不會遮擋主體內容。（如花瓣、有道云筆記）

Android正統的規范中Toast：

• 出現在屏幕底部。
• 只能放文字不能帶圖標，文字要精簡不宜太長。
• 不是模態的，可以通過Toast對其他控件進行操作。
• 短時間后會自動消失。
• 不能對Toast進行交互。
• 優先適用于系統提示，不能手動操作讓Toast主動消失。

△ 以上為今日頭條、微博、即刻

HUD與Toast的區別：

• HUD只出現在屏幕的中央，Toast則在底部。
• HUD可以包含icon，Toast只能純文字。
• HUD一般是毛玻璃透明，Toast一般是灰黑或者黑色半透明。
• HUD中內容可以變化（如調節音量時），Toast中內容不可變化。

△ iOS音量調節

優點：

• 占用屏幕空間小。
• 不會打斷用戶操作。
• 使用簡單，適用范圍廣。

缺點：

• 出現時間短，在碎片化時代注意力不集中容易錯過Toast提示。
• 遮蓋其他控件，但不能對Toast進行交互。

適用：提示不需要的反饋信息，如刷新后的成功狀態。

5. Snackbar：底部彈窗

Android特有的交互形式，在Google的MD規范中，將Toast和Snackbars歸為一類。有些時候也有應用在iOS系統中，也可以理解為加強版的Toast。

含義：英譯為快餐、小吃。

剖析：Snackbars與toast一樣是從屏幕底部向上出現，但是Snackbar不同的是可以經過用戶進行其他操作而消失。

適用：較多適用于撤銷操作。

三. 總結

通過分析和了解彈窗的類別、適用范圍，才能更好的在設計中進行優化與改變。用戶體驗設計的重點，是一步步了解用戶，然后設計出適合用戶體驗，滿足用戶心理需求的產品。把握好彈框設計規范，避免彈框設計的誤區，能更好的幫助你完善產品。

但是，沒有十全十美的產品，所以要根據設計趨勢與用戶需求不斷地進行更新迭代，通過用戶反饋，不斷地改良產品體驗，才是做出優秀產品的前提。

從事電商方面的設計師，詳情頁設計可以說是必修課，好的詳情頁會給帶給用戶更流暢的視覺體驗、更直觀的產品信息、亮點等等，也有助于提升交易的達成率。正是因為如此，所以很多商家不惜重金請設計師為其打造爆款產品的詳情頁，由此可見詳情頁在電商設計中的重要程度。本期和大家一起分析總結：如何把詳情頁做的足夠出彩，詳情頁做不好需要從哪些方面進行提升？

目前被認可的一種詳情頁設計形式是分屏式，就是按照手機端設計思維以一屏為單位制作，最后整合成一個完整的詳情頁，這種形式有助于提升視覺流暢度及內容識別度，所以我們可以將每一屏都當作一張海報來制作。而說到海報，就離不開設計構圖。

詳情頁的構圖與傳統的PC端海報有所不同，因為詳情頁設計更注重手機端，所以一屏的內容又可以看做是手機端豎向的海報。而一副出彩的海報，必然需要優質的骨架。那么常見豎向海報構圖形式有哪些？下面為大家總結了幾種在詳情頁設計中比較實用的構圖形式：

如圖所示，這三種構圖形式看似簡單，實則兼顧了手機端的很多必要點，比如：視覺的流暢度、整潔度、辨識度、用戶的接受度等等，詳情頁設計在構圖及板式方面并不需要很復雜，反而干凈整齊的畫面更易于視覺表達，也更利于手機端展示。

這三種構圖形式在詳情頁中使用頻率是非常高的，下面我們看幾組案例：

看似簡單的構圖，反而在詳情頁設計中非常實用，僅靠這三種構圖，完全可以做出很優秀的詳情頁。另外還有一些從這三類衍生的構圖形式，也比較常用：

文案在配圖下半部分的這類構圖相比而言用的少一些、也難把控一些，當然用的好了在版式上會有打破、眼前一亮的視覺感受，只是這類構圖不宜多用，完整的詳情頁中出現1-2次即可。而左右式配圖+文案的形式是比較常用的，下面看組案例：

詳情頁的構圖不易太復雜，這六種構圖形式完全夠日常工作，只需選取其中1-3中構圖形式交替使用即可。以上構圖示例中標識的裝飾元素可以是線條、英文、圖標、數字、實物素材等等，也可以選擇不使用，具體情況根據配圖的留白以及重心靈活使用即可。

所以，詳情頁中每一屏的構圖并不難，完全可以把這六種構圖形式當做公式，需要哪種直接套用其結構就可以（結構類似即可，并非要求1:1）。另外：配圖形式可以分為三種：全屏、半屏、透明圖，具體的構圖形式需要結合畫面整體的重心、留白、美觀度決定。更通俗一些的話，構圖就可以理解為填空，內容就往空的地方填，注意好適量的留白。

補充：當透明圖作為配圖時，不管哪種構圖形式都有可能出現空的現象，這時我們可以用一些具有裝飾性的數字、英文、線條、形狀、文字等等進行填充，舉例說明：

案例中的文字、數字與產品相互結合，既解決了空的問題、提升了整體的飽滿度，又在形式上做到的新穎、有創意。構圖形式與前面所說的皆能吻合。

說到設計素材，浮在腦海中的可能會很多種，而這次要說的主要是三類，即：手勢、植物、肌理（在花瓣搜索關鍵詞“手勢”“植物”“材質”“肌理”就能找到對應素材），這三類素材在詳情頁設計中出現的頻率也是很高的，如果運用得當會將詳情頁的出彩度進一步提升一個檔次，而且對于視覺表達也會更加生動、形象、富有說服力，下面我們逐一來說：

手勢素材

顧名思義，就是各種各樣關于手方面的動作，比如：拿、托、指等等，下面舉個例子來看：

這些手勢在很多詳情頁中都會出現，接下來我們不妨思考這么一個問題：為什么要用這些手勢，只是單純的好看嗎？

其實不然，在視覺上，這些手勢使得畫面更加生動、有立體感、有層次感，讓作品更飽滿、更出彩。而對于用戶而言，能讓其更加深刻的體會到產品是有溫度的、可操作的、更真實、更容易理解，所以對于交易的達成以及加深用戶對產品的了解也更具說服力。

影響詳情頁轉化率的因素有很多種，視覺表達能否真正抓住用戶心理也是很關鍵的一點！

植物素材

這類素材相信大家都不陌生，在很多頁面以及詳情頁出現的頻率都很高，而且裝飾性很強，寓意也很寬泛，比：自然、清新、貼合現實、有生機等等，下面舉個例子：

如圖所示，這里的植物都能很好的與畫面主體形成很好的遮擋關系，在視覺層面顯得更有層次感、畫面也更飽滿；而且植物的運用并不是隨便使用的，而是與海報氛圍、文案都緊密相關，形成了很好的呼應、裝飾作用。

我們常用的植物元素可以是清晰的，也可以模糊處理，只要與畫面整體氣質相符，可以根據實際情況靈活使用。

肌理素材

關于材質、肌理的妙用在前面很多文章中都有提到過，這里簡單的說一下：肌理素材對于提升作品細節感、層次感、出彩度以及飽滿度都有很大的幫助，如果作品碰到上述問題，不妨用肌理素材試試。

單看標題可能很多人不太明白，什么叫做抽象名詞具體化？其實簡單理解就是：將一些比較抽象的名詞通過設計手法表現出來，比如：風、聲音、溫度、輕重、鋒利等等。這樣做的目的不僅可以提升用戶體驗、加快用戶理解，而且在視覺上能生動形象的將抽象化名詞表現出來，對于視覺出彩度的提升也很大。給人留下的印象也更加深刻，間接的提升了視覺傳達的時效性，下面看個例子：

通過案例我們不難發現：將抽象化的名詞通過視覺手法表現出來，對于用戶理解的難易程度以及視覺出彩度而言都有提升。如果一款產品詳情頁中能出現1-2次這樣的處理手法，會使得詳情頁在視覺上更加生動、形象。

補充：在詳情頁設計中，若文案中出現一些LOGO、數字、英文，注意不要放過它，因為它具有裝飾性的特點，對于詳情頁板式的活躍以及設計感提升都有很大的幫助！形式多為：水印、與產品穿插、作為主體信息使用等等！一款詳情頁這種用法可以出現2-3次！

詳情頁設計不可忽視的兩點：視覺的流暢度以及文案辨識度。文章所提到的一些構圖方式、元素使用、視覺表現形式都是為大家提供一個可供參考的方向，落實到工作中要靈活運用、舉一反三。一般情況下，一款詳情頁大概有2-4屏比較出彩的即可，能形成一定的對比，不至于視覺疲勞、千篇一律！

不妨找一些不錯的詳情頁，按照文章中所寫的自己嘗試分析分析，看是否與之吻合。切記詳情頁設計構圖及文字排版不易太過復雜，切記、切記、切記，重要的事情說三遍！

文章來源：站酷