在B端產(chǎn)品設(shè)計中，有效的設(shè)計規(guī)范有利于降低團(tuán)隊溝通成本，提高開發(fā)效率，并在一定程度上保證產(chǎn)品應(yīng)用的一致性，最終推動產(chǎn)品設(shè)計的優(yōu)化。本篇文章里，作者總結(jié)了從0開始搭建B端設(shè)計規(guī)范的注意事項與策略方法，一起來看一下。

前言

哈哈哈哈，最近事情太多了，已經(jīng)快三個月沒更新了，現(xiàn)在也忙的差不多了，咱們更新繼續(xù)~~

今天給大家分享的是關(guān)于如何從零開始搭建 B 端設(shè)計規(guī)范。

時間轉(zhuǎn)眼即逝，掐指一算，我接觸 B 端已有 4 年之久了，當(dāng)年剛接觸的時候，B 端的從業(yè)人員比例還是很少的。近兩年 B 端越來越火熱，無論從設(shè)計風(fēng)格還是產(chǎn)品數(shù)量上，都有了很大的提升。

隨著 B 端的產(chǎn)品越來越完善，要求設(shè)計師的專業(yè)性也要越來越強(qiáng)。設(shè)計規(guī)范作為基礎(chǔ)中的基礎(chǔ)，是大家都要熟練掌握的技能，我們不僅要會運用各種規(guī)范，還要會撰寫適合產(chǎn)品的規(guī)范。

分享開始，敲黑板~~

一、設(shè)計規(guī)范的目標(biāo)

在搭建設(shè)計系統(tǒng)之前，我們要想清楚設(shè)計規(guī)范的目標(biāo)是什么？使用者是誰？

• 目標(biāo)：保持產(chǎn)品風(fēng)格統(tǒng)一性、提高設(shè)計輸出效率、減少無效溝通。
• 使用人群：UI、交互、前端、測試。

二、設(shè)計原則

設(shè)計規(guī)范要符合基本的設(shè)計原則，否則你的規(guī)范會雜亂無章。這里我總結(jié)了 6 條原則供大家參考。

1. Unity（統(tǒng)一性）：頁面風(fēng)格、色彩、布局等要保持全局統(tǒng)一，不可為了某一功能的美觀而去破壞整體性。
2. Accessibility（易用性）：易用是首要考慮的因素，能一步解決的事情絕不兩步。
3. Proximity（親密性）：如果信息的關(guān)聯(lián)性強(qiáng)，則他們的距離就要相應(yīng)的縮短，讓他們看起來是一個視覺單元；反之，則距離要加大。要讓用戶對信息的區(qū)域劃分一目了然。
4. Alignment（對齊原則）：在界面中，將元素進(jìn)行對齊，即符合用戶的認(rèn)知，也可以引導(dǎo)視覺流向，讓用戶更加流暢地閱讀信息。
5. Contrast（對比原則）：對比是增加視覺效果最有效方法之一，同時也能在不同元素之間建立一種有組織的層次結(jié)構(gòu)，讓用戶快速識別關(guān)鍵信息。
6. Repetition（重復(fù)原則）：相同的元素在整個界面中不斷重復(fù)，不僅可以有效降低用戶的學(xué)習(xí)成本，也可以幫助用戶識別出這些元素之間的關(guān)聯(lián)性。

三、框架布局

這里一般采用柵格布局。說到柵格，有好多小伙伴又要再回顧一下知識點了。我今天再把柵格知識幫大家復(fù)習(xí)一遍，如果之前不是很了解柵格的，拿個小本本記下來，要考~~

柵格布局能夠適應(yīng)各種屏幕尺寸及分辨率，確保整體布局的一致性。

柵格建議使用 1、2、3、4、6 切分布局，可以進(jìn)行多種布局組合，并在整個設(shè)計中保持布局的結(jié)構(gòu)的一致性。

頁面中一般采用 24 列自適應(yīng)網(wǎng)格，你可以使用它為各種屏幕尺寸創(chuàng)建靈活的布局。

邊距 Margins、列 Columns、間隔 Gutters 分別是什么？

邊距 Margins：邊距是內(nèi)容與左右邊緣之間的空間。

控制臺內(nèi)容區(qū)的邊距選用 8 的倍數(shù)為設(shè)定值，一般采用 16/24px 的居多。

需要注意的是：

• 減去 margin 后，列在頁面區(qū)域均分，保證每列的寬度是一致的；
• 在區(qū)域有 margin 的情況下，劃分列的區(qū)域不能包含 margin。

列 Columns：在電腦端列的數(shù)量是個常量（24列），每一列寬度的尺寸隨屏幕大小進(jìn)行自適應(yīng)調(diào)整。

間隔 Gutters：間隔是列與列之間的空隙，控制臺產(chǎn)品 gutter 使用固定值也要是 8 的倍數(shù)，一般采用 16/24px。

需要注意的是：

• 布局的左右兩邊的分界線 gutter 可以為 0；
• 必須保證 column 的寬度是一致的。

邊距 Padding：padding 指一個元素的內(nèi)容和其邊界之間的空間，padding 最小值是 4px，然后其余均為 8px 的倍數(shù)，建議值為 8/16/24px。

內(nèi)容區(qū)定寬：此場景常用于用戶歡迎頁、結(jié)果頁等需要將內(nèi)容區(qū)寬度設(shè)置為固定值的頁面。此時 column 和 gutter 保持不變，根據(jù)頁面寬度改變 margin 的值。

四、設(shè)計風(fēng)格

1. Color（顏色）

色彩內(nèi)容主要包含基礎(chǔ)色（如品牌色、黑色、白色）和功能色（如鏈接色、提醒色等）。圖表配色為單獨的配色體系。

在前期制定顏色規(guī)范的時候，精益求精的設(shè)定顏色，切忌顏色過多。

顏色的狀態(tài)色盡量用原色進(jìn)行轉(zhuǎn)換，設(shè)置一個合理的變色公式，讓所有顏色的狀態(tài)色都根據(jù)這個公式進(jìn)行轉(zhuǎn)換。例：

• Hover：H不變 S加10 B減5；
• Click：H不變 S加20 B減10；
• Disable：HSB均不變，不透明度 30%。

在設(shè)計規(guī)范中，盡量把顏色的色值和 rgba 值都寫出來（這里是強(qiáng)迫癥患者要標(biāo)的，因為有時候色值完全一樣，但 rgba 數(shù)值略有不同，雖然效果一樣，但是對于強(qiáng)迫癥的你來說，舒服嗎）。

狀態(tài)色有 4 狀態(tài)色：Normal、Hover、Click、Disable。

在設(shè)定圖表顏色的時候，要考慮不同的使用樣式（柱狀圖、環(huán)形圖、餅圖等……），同時也要考慮它的延展性，比如你設(shè)定 12 個 chart 色值，在使用的時候按著順序來使用，當(dāng)超過 12 個后可以為同一個顏色。

2. Font（文字）

設(shè)定統(tǒng)一的字體規(guī)范，使用非襯線字體在各個操作系統(tǒng)下都有最佳展示效果。

首先，要設(shè)置一個字體家族，保證產(chǎn)品界面的最優(yōu)展示。

例如（僅作為展示，不是建議）：font-family： “Chinese Quote”， -apple-system，BlinkMacSystemFont，“Segoe UI”，“PingFang SC”，“Hiragino Sans GB”，“Microsoft YaHei”，“Helvetica Neue”，Helvetica，Arial，sans-serif，“Apple Color Emoji”，“Segoe UI Emoji”，“Segoe UI Symbol”。

1）字號

現(xiàn)在主流的產(chǎn)品中，主體字為 12px / 14px 的居多，可根據(jù)自身的產(chǎn)品定位以及用戶的習(xí)慣進(jìn)行設(shè)定。字號不要出現(xiàn)奇數(shù)，否則在一些顯示器上會有對不齊像素的狀況發(fā)生。

2）行高

行高常規(guī)的有兩種規(guī)范：

• 字號+8px；
• 1.5倍 / 2倍 * 字號。

我喜歡用第一種，就是字號大小 + 8px 作為行高的規(guī)范。行高是不可被忽略的重要細(xì)節(jié)之一，因為在算間距的時候，行高是要被算進(jìn)去的。

3）字重

字重有很多，但是在真正的產(chǎn)品使用中，字重盡量不要太多種，2~3 種即可。

4）字體顏色

字體顏色數(shù)量建議在 3~4 個，不宜過多，但是每個層級之間區(qū)分要大一些。

文本應(yīng)該保持至少 4.5：1 （基于亮度值計算）的對比度以保持文本清晰；最佳對比度為 7：1。

測試對比度的網(wǎng)站：https://contrast-ratio.com

WCAG 2.0 中將顏色對比等級分為 3 種，A級、AA級、AAA級，等級越高意味著顏色的對比度越高，呈現(xiàn)出來的視覺壓力越大。

• A級：對比度 3：1，是普通觀察者可接受的最低對比；
• AA級：對比度 4.5：1，是普通視力損失的人可接受的最低對比度；
• AAA級：對比度 7：1，是嚴(yán)重視力損失的人可接受的最低對比度。

3. icon（圖標(biāo)）

設(shè)定統(tǒng)一的圖標(biāo)使用規(guī)范，讓視覺效果更和諧。

1）icon 大小

icon 的常用尺寸有很多，需要注意的是 icon 的大小中，相鄰的兩個尺寸至少相差 4px，否則你會在后期用的時候會有選擇困難癥。

同時功能 icon 盡量貼邊或盡量貼邊繪制，保證展現(xiàn)的視覺統(tǒng)一性（操作 icon 除外）。

單獨 icon 使用的時候，盡量不要太小，最小值建議為 12px。

2）icon 熱區(qū)

icon 的熱區(qū)經(jīng)常被設(shè)計師和開發(fā)所忽略，本身 icon 的尺寸一般就很小，再加上如果沒有設(shè)置熱區(qū)的話，操作體驗極差。

所以一定一定要設(shè)置 icon 的熱區(qū)，設(shè)置的值我建議為 icon 大小的 2倍。例：icon 大小為 14 * 14px，則熱區(qū)大小為 28 * 28px。

4. size（尺寸）

頁面內(nèi)布局間、模塊間、模塊內(nèi)的各部件距離。

尺寸大部分規(guī)范中都用的是 8 的倍數(shù)，不用糾結(jié)，直接用就行。我這里有個公式：Sn = 8px * n，n為正整數(shù)。

特殊：最小支持4px。

五、交互

交互我分為兩個方面：交互方式和交互狀態(tài)。

1. 交互方式

交互方式指的是對某一個操作所進(jìn)行的具體行為，比如刷新方式有下拉、上滑、按壓點擊等方式，這就是所謂的交互方式。交互方式有很多種，沒有最優(yōu)，只有最適合。

交互方式要保持產(chǎn)品的統(tǒng)一性，同類別的交互不可有不同的操作感受。同時交互方式要符合大眾的認(rèn)知習(xí)慣，可創(chuàng)新但不可違背潛意識。

隨著時代的發(fā)展，交互方式也在不斷的更新。比如最開始的手機(jī)是按鍵式的，隨著大眾對屏幕大小的需求不斷提升，到了現(xiàn)在的全面屏手機(jī)，如果這個時候你再去做當(dāng)年火爆的按鍵手機(jī)，那你就只能跟市場說拜拜。

總結(jié)交互方式的幾個關(guān)鍵點：創(chuàng)新、統(tǒng)一、緊跟趨勢。

2. 交互狀態(tài)

一個完整的產(chǎn)品生態(tài)是不會遺漏每一個交互狀態(tài)的。

同樣是做售票的軟件，為什么高鐵管家就比 12306 做的好呢？是因為高鐵管家把很多交互狀態(tài)友好地做了展現(xiàn)反饋，而不是冰冷的數(shù)據(jù)吞吐。

同類產(chǎn)品中，每個都有自己獨特的交互狀態(tài)，可能你一直用某個軟件的原因只是有個功能的交互狀態(tài)打動了你，從此你就深深愛上了它。

現(xiàn)在工作中，我們都在講人效，拼命地去更新迭代，去研發(fā)新功能，開拓新產(chǎn)品，往往會忽略交互狀態(tài)這個點，因為很多時候付出收獲比是很低的，但是真正好的產(chǎn)品，這部分是不可或缺的。

交互真的太大了，單獨寫一篇文章都寫不完，這篇我只能拋磚引玉，勾起你的思維，如果有任何要探討的，歡迎來叨擾。

六、引導(dǎo)

引導(dǎo)分為 5 種：Newbie guide（新手引導(dǎo)）、Steps guide（步驟引導(dǎo)）、Help / Operation guide（幫助/操作引導(dǎo)）、New function guide（新功能引導(dǎo)）、Blank guide（空白頁引導(dǎo)）。

1. Newbie guide（新手引導(dǎo)）

新手引導(dǎo)是針對新用戶的，首次進(jìn)入產(chǎn)品的時候，我們要著重地把自己產(chǎn)品的亮點以及操作快速的介紹給新用戶，讓他用最短的時候上手我們的產(chǎn)品。

新手引導(dǎo)要言簡意賅，并且如果非必要的話，盡量給用戶一個可以直接關(guān)閉的按鈕，讓用戶有選擇權(quán)。我就非常討厭有一些產(chǎn)品的新手引導(dǎo)，必須走完全部流程后才能關(guān)閉，惡心得不行。

2. Steps guide（步驟引導(dǎo)）

步驟引導(dǎo)一般用在有固定操作步驟的場景下，指引用戶一步一步地完成想要的結(jié)果。常規(guī)的步驟引導(dǎo)建議在 3~5 步之間為合理。

3. Help/Operation guide（幫助/操作引導(dǎo)）

幫助/操作引導(dǎo)的展現(xiàn)方式是比較豐富多彩的，可以是提示語、輔助性文本、tooltips 等等，它的作用就是輔助用戶去了解并且知道如何操作這個功能。

這個也是在產(chǎn)品中使用頻率最高的，運用好它，可以讓你的產(chǎn)品事半功倍。

4. New function guide（新功能引導(dǎo)）

它就是常用在新功能上線后，用戶第一次登陸相關(guān)頁面后做的一些引導(dǎo)，目的是為了告訴用戶我們做了新東西，你快來試試吧。

5. Blank guide（空白頁引導(dǎo)）

空白頁引導(dǎo)一般用在在缺省頁，對用戶進(jìn)行一些操作指引，讓無信息的頁面變得更有價值。

比如百度在一些缺省頁上就放了一些關(guān)于失蹤兒童的信息，就因為做了這個引導(dǎo)，幫助了千萬個家庭找到了失散的孩子。

七、組件

組件是設(shè)計系統(tǒng)里面最為龐大的東西。組件可以分為了 5 類：

1. Navigation（導(dǎo)航）；
2. Data Entry（數(shù)據(jù)錄入）；
3. Data Display（數(shù)據(jù)顯示）；
4. Feedback（反饋）；
5. Other（其它）。

基本上這幾類已經(jīng)覆蓋了多數(shù)的組件，下面我把我自己整理的這幾類分別都包含哪些組件、以及組件的簡單介紹給列出來，快來保存吧。

1. Navigation（導(dǎo)航）

• Affix（固釘）：將頁面元素釘在可視范圍。
• Breadcrumb（面包屑）：顯示當(dāng)前頁面在系統(tǒng)層級結(jié)構(gòu)中的位置，并能向上返回。
• Menu（導(dǎo)航菜單）：為頁面和功能提供導(dǎo)航的菜單列表。
• Pagination（分頁）：采用分頁的形式分隔長列表，每次只加載一個頁面。
• Steps（步驟條）：引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條。

2. Data Entry（數(shù)據(jù)錄入）

• Checkbox（多選框）：可選擇多個。
• Radio（單選框）：只可選擇一個。
• Switch（開關(guān)）：開關(guān)選擇器。
• Form（表單）：具有數(shù)據(jù)收集、校驗和提交功能的表單，包含復(fù)選框、單選框、輸入框、下拉選擇框等元素。
• Input（輸入框）：通過鼠標(biāo)或鍵盤輸入內(nèi)容，是最基礎(chǔ)的表單域的包裝。
• Select（選擇器）：下拉選擇器。
• Skeleton（加載占位圖）：在需要等待加載內(nèi)容的位置提供一個占位圖。
• Time selectors and sliders（日期時間選擇過濾器）：當(dāng)用戶需要輸入一個時間或日期，可以點擊標(biāo)準(zhǔn)輸入框，彈出時間面板進(jìn)行選擇。
• Transfer（穿梭框）：雙欄穿梭選擇框。
• Upload（上傳）：文件選擇上傳和拖拽上傳控件。

3. Data Display（數(shù)據(jù)顯示）

• Badge（微標(biāo)）：圖標(biāo)右上角的圓形徽標(biāo)數(shù)字。
• Card（卡片）：通用卡片容器。
• Collapse（折疊面板）：可以折疊/展開的內(nèi)容區(qū)域。
• Popover（氣泡卡片）：點擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層（可操作）。
• Tabs（標(biāo)簽頁）：選項卡切換組件。
• Table（表格）：展示行列數(shù)據(jù)。
• Tag（標(biāo)簽）：進(jìn)行標(biāo)記和分類的小標(biāo)簽。
• Timeline（時間軸）：垂直展示的時間流信息。
• Tooltip（文字提示）：簡單的文字提示氣泡框。
• Tree（樹形控件）：文件夾、組織架構(gòu)、生物分類、國家地區(qū)等等，世間萬物的大多數(shù)結(jié)構(gòu)都是樹形結(jié)構(gòu)。使用樹控件可以完整展現(xiàn)其中的層級關(guān)系，并具有展開收起選擇等交互功能。

4. Feedback（反饋）

• Alert（警告提示）：警告提示，展現(xiàn)需要關(guān)注的信息。
• Notification（通知提示框）：全局展示通知提醒信息。
• Drawer（抽屜）：抽屜從父窗體邊緣滑入，覆蓋住部分父窗體內(nèi)容。用戶在抽屜內(nèi)操作時不必離開當(dāng)前任務(wù)，操作完成后，可以平滑地回到到原任務(wù)。
• Modal（對話框）：模態(tài)對話框和非模態(tài)對話框。
• Progress（進(jìn)度）：展示操作的當(dāng)前進(jìn)度。
• Spin（加載）：用于頁面和區(qū)塊的加載中狀態(tài)。

5. Other（其它）

• Button（按鈕）：按鈕用于開始一個即時操作。
• chart（圖表）：圖標(biāo)數(shù)據(jù)顯示。
• Copyright（版權(quán)）：版權(quán)信息。
• Divider（分割線）：區(qū)隔內(nèi)容的分割線。
• logo（標(biāo)志）：logo 的使用。
• LocaleProvider（國際化）：為組件內(nèi)建文案提供統(tǒng)一的國際化支持。
• Text link（文字鏈）：點擊有鏈接跳轉(zhuǎn)的文字。
• Scrollbar（滾動條）：在特定界面區(qū)域內(nèi)進(jìn)行內(nèi)容的更多展示。

以上組件可根據(jù)自己的產(chǎn)品進(jìn)行增刪，把組件規(guī)范設(shè)計完成后，整個設(shè)計規(guī)范就完成了 90% 以上，可以算一個比較完整的設(shè)計規(guī)范了。

八、總結(jié)

每一個設(shè)計規(guī)范都是有靈魂的，規(guī)范是為了更好地做設(shè)計，而不是限制設(shè)計師雙手的枷鎖。

設(shè)計規(guī)范也不是一成不變的，它在落地使用的時候多少都會有問題，需要慢慢地去反復(fù)檢驗規(guī)范的合理性，發(fā)現(xiàn)不合理的及時更正。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

在當(dāng)下市場，年輕人是消費的主力人群。抓住年輕人就等于抓住了市場，不少品牌們也紛紛開始“年輕化”。要想打好品牌年輕化的戰(zhàn)，我們應(yīng)該怎么做呢？

現(xiàn)在我們很多“老”品牌企業(yè)為了能夠抓住年輕人的胃口，都在爭先恐后的討好著年輕消費者。在移動互聯(lián)網(wǎng)的沖擊下，通信路徑、通信方式和文化環(huán)境都發(fā)生了重大變化。

市場不再歡迎我們習(xí)以為常的老辦法。面對新時期的消費者和新市場的消費環(huán)境，品牌也面臨著年輕化的問題。重復(fù)的市場，讓品牌必須處理的手段，就是所謂的八仙過海，各顯神通。

校果在與大部分中小企業(yè)品牌的前期溝通過程中可以發(fā)現(xiàn)，很多品牌都想通過自己不斷地年輕化迭代，保持一個品牌活力，不被“新”時代的消費者拋棄。

傳統(tǒng)品牌洗心革面，不遺余力地爭奪年輕人的市場，但總是做不到自己想做的事情。品牌年輕化固然重要，但許多品牌往往誤解了這件事的實質(zhì)和核心，因為選用品牌年輕化存在一些誤區(qū)。

01 讓年輕用戶看到，所以品牌需要年輕化

品牌通常是年輕人看到、俘獲年輕消費者的年輕化推廣，聽起來合情合理，但其實并不是所有品牌、所有行業(yè)都需要品牌年輕化。

品牌年輕化并不是最終的目的，品牌的年輕化需要甄選行業(yè)。對于品牌而言，品牌年輕化的首要條件就是，確認(rèn)品牌到底有沒有年輕化的必要，年輕化所需要的解決的是什么商業(yè)課題，TO B企業(yè)就不一定會適合做年輕化，因為對于TO B企業(yè)來說給客戶帶來的關(guān)鍵詞是安全感、信任感、專業(yè)度，所以這類品牌做年輕化的意義并不大。

而對于一些快消品來說，品牌的年輕化就格外的重要了，因為年輕化能夠幫TOC端的品牌獲得用戶感知、流量獲取、產(chǎn)品銷售等一系列的問題。

所以說，品牌的年輕化其實是一個偽命題。品牌年輕化只是一個品牌的表面策略而已，核心技術(shù)仍然是企業(yè)品牌在新的內(nèi)部控制外部市場環(huán)境下的商業(yè)述求。

在年輕消費者購買力越來越強(qiáng)，資訊信息接收更廣的背景下，品牌不論是社交平臺的親民互動，營銷活動的事件熱點，潮流風(fēng)向的跟進(jìn)，情感與態(tài)度的表達(dá)等等這一整套的傳播動作背后所要解決的商業(yè)課題是：如何讓品牌的產(chǎn)品提升新增且值得的溢價。

02 品牌年輕化就是傳播現(xiàn)代化

對于普通用戶而言，能感知到的品牌年輕化動作通常在傳播層面上，但對于整個品牌而言，傳播的年輕化可能是最表面的一個維度。衛(wèi)詩媒體認(rèn)為，消費者對品牌復(fù)興的感知有三個維度：

1. 第一個維度便是傳播維度，我們今天所認(rèn)識的“雙微一抖”的內(nèi)容輸出

社交網(wǎng)絡(luò)平臺上品牌人格化的定位等等，都是一個基于信息傳播層面上的東西。

傳播層面也是品牌首先調(diào)整的層面，在互聯(lián)網(wǎng)信息大爆炸的時代，年輕消費者每天接觸的信息往往一掃而過，這就要求著品牌在傳播和營銷策略上有著高質(zhì)量+高頻+有態(tài)度的輸出，這樣用戶才會去主動的關(guān)注你傳播的內(nèi)容。

2. 第二個維度是視覺維度，也就是產(chǎn)品的吸引力

這個維度可以讓消費者感覺更直觀，比如產(chǎn)品包裝，各種視覺表達(dá)效果等。在營銷中，內(nèi)容的情感表達(dá)是到位的，他們看到產(chǎn)品的那一瞬間是不能被打亂的，所以前面所有的辛苦營銷都是白做的。

年輕的包裝可以給消費者帶來不同的感官體驗，如果你的品牌包裝或十多年的美學(xué)包裝，年輕的消費者可以直接感受到品牌的變化…當(dāng)然，如果能像椰汁一樣可以堅持發(fā)展自我，獨樹一幟形成具有強(qiáng)烈的品牌設(shè)計風(fēng)格那更好。

所以，傳統(tǒng)文化品牌在視覺上的煥然一新并不是一個追求一種視覺上的顛覆，品牌企業(yè)一方面我們需要進(jìn)行更新自己產(chǎn)品的視覺體驗，同時教師也要保留品牌曾有的獨特性，更需要的是在品牌價值屬性上做視覺審美的升級，而不是全盤否定過去社會形態(tài)。

3. 第三個維度是產(chǎn)品維度，也就是真正決定年輕消費者買不買賬的關(guān)鍵

品牌的年輕化發(fā)展不僅可以僅是企業(yè)營銷、包裝的文章，而是讓你的產(chǎn)品進(jìn)行更加的符合學(xué)生新用戶群體的需求。比如食品行業(yè)，年輕人將需要更多的綠色、環(huán)保、健康的食品，品牌年輕化是為人們提供當(dāng)前生活方式和價格的關(guān)鍵。

其實，品牌年輕化也會涉及到企業(yè)的管理、過程，因為對于品牌的年輕化而言，問題不僅僅是指傳播或者審美變革。

甚至?xí)紤]，品牌產(chǎn)品進(jìn)行年輕化發(fā)展改革，品牌管理公司員工年輕化的變革等等的細(xì)枝末節(jié)，真正的年輕化往往會選擇需要傷筋動骨。但只要狠得下心，往往會涅槃重生。

正因為如此，當(dāng)我們幫助品牌走向年輕化的時候，通常從三個方面幫助消費者：

1. 從品牌戰(zhàn)略和營銷戰(zhàn)略進(jìn)行調(diào)整和改革；
2. 有助于品牌年輕化的設(shè)計，同時保留品牌的獨特性；
3. 從傳播層面進(jìn)行傳播策劃，搭建與年輕人交流的平臺。這樣才能找到自己的公司進(jìn)行全方位的轉(zhuǎn)型升級。

與客戶的對話和反饋是產(chǎn)品成功的關(guān)鍵要素。然而，研究表明，42% 的公司不調(diào)查其客戶或收集反饋。

偉大的產(chǎn)品不是憑空打造的——您需要一個持續(xù)的過程來從用戶那里獲取反饋，以指導(dǎo)您的產(chǎn)品路線圖、調(diào)整消息傳遞并保持滿意度水平的脈搏。

什么是產(chǎn)品反饋？

產(chǎn)品反饋是您的用戶分享的有關(guān)他們對產(chǎn)品的體驗和滿意度的任何信息。您可以通過各種研究方法收集產(chǎn)品反饋，例如用戶訪談、客戶調(diào)查、評估客戶支持票等。

產(chǎn)品反饋的 3個主要好處

雖然積極收集和分析產(chǎn)品反饋有很多好處，但可以總結(jié)為三個主要好處：

A. 改善客戶體驗和滿意度

B. 優(yōu)先考慮產(chǎn)品路線圖并驗證新想法

C. 打造成功的產(chǎn)品

讓我們更詳細(xì)地看看它們。

1. 提升客戶體驗和滿意度

為用戶提供出色的客戶體驗不再是一種獨特的優(yōu)勢——這是意料之中的。產(chǎn)品發(fā)布后，收集產(chǎn)品反饋可幫助您識別任何問題，收集有關(guān)要添加或改進(jìn)的新功能的信息，并找到幫助用戶充分利用其體驗的方法。

支持票通常擅長揭示需要盡快解決的重復(fù)問題。如果一個問題多次出現(xiàn)，那么您就會知道它困擾著您的大部分客戶群。此外，凈推薦值 (NPS)或客戶滿意度得分 (CSAT) 等調(diào)查是產(chǎn)品反饋的重要來源，可以幫助您了解如何改善客戶體驗。

2. 優(yōu)先考慮產(chǎn)品路線圖并驗證想法

收集用戶的反饋有助于產(chǎn)品經(jīng)理確定產(chǎn)品路線圖的優(yōu)先級，并根據(jù)實際用戶需求做出明智的決策。

您可以收集關(guān)于功能想法的反饋并量化數(shù)據(jù)以了解哪些是最需要的。

3. 打造成功的產(chǎn)品

如今，最好的產(chǎn)品是基于與日復(fù)一日使用您產(chǎn)品的人（您的客戶）的持續(xù)互動和用戶體驗而構(gòu)建的?？蛻羝谕纳仙馕吨髽I(yè)必須不斷收集和識別客戶需求，以構(gòu)建能夠解決實際存在的問題的產(chǎn)品。

產(chǎn)品反饋是一種很好的機(jī)制，通過它可以從用戶那里獲取見解，并將其納入您的決策過程。無論是通過征求還是主動提供的反饋，傾聽用戶的意見將確保您能夠始終如一地交付價值。

產(chǎn)品反饋：類型和方法

您可以使用多種產(chǎn)品反饋方法來設(shè)置產(chǎn)品反饋循環(huán)并讓您的客戶與您取得聯(lián)系。

通常，產(chǎn)品反饋可以是征求的，也可以是主動提出的：

A. 征求反饋是指您要求用戶提供反饋。這可能是向您的客戶群發(fā)送調(diào)查或與用戶進(jìn)行訪談。

B. 不請自來的反饋是用戶在沒有被要求的情況下分享的任何類型的反饋。例如，他們可能會在網(wǎng)上發(fā)表評論或在社交媒體上分享評論。

當(dāng)用戶在您的產(chǎn)品中遇到問題、要求新功能或需要幫助完成某事時，通常會出現(xiàn)不請自來的反饋。

另一方面，通過征求反饋，您需要為用戶提供背景信息并提出正確的研究問題。根據(jù)您的團(tuán)隊需要反饋的內(nèi)容，以下是您可以用來收集征求的產(chǎn)品反饋的方法的概要：

1) 調(diào)查

2) 客戶訪談

3) 產(chǎn)品分析

4) 專門小組

5) 客戶支持對話

6) 銷售和客戶溝通電話

讓我們更詳細(xì)地看一下前三個。

1. 調(diào)查

調(diào)查是一種有效的研究工具，可為您提供針對各種用例的特定產(chǎn)品反饋：分析新發(fā)布的性能、在開始構(gòu)建過程之前驗證想法和新概念、測試產(chǎn)品消息傳遞等。

大多數(shù)反饋調(diào)查使用開放式和封閉式問題的組合。在創(chuàng)建和發(fā)送調(diào)查時要記住幾個最佳實踐，即：

A. 避免引導(dǎo)性問題，例如“您有多喜歡使用該產(chǎn)品？” 相反，請讓您的用戶提供有關(guān)他們體驗的詳細(xì)信息，而不要引導(dǎo)他們做出肯定或否定的回答。

B. 保持簡短：注意受訪者提供反饋的時間和意愿。在調(diào)查中包含的問題不超過五到七個，以使其相對簡短，并且仍然可以獲得可操作的反饋。

C. 使用開放式和封閉式問題的組合。太多的開放式問題將導(dǎo)致調(diào)查時間過長，因為參與者必須為每個問題輸入答案。另一方面，僅由封閉式問題（如是/否問題）組成的調(diào)查只會為您提供定量數(shù)據(jù)，而不會揭示參與者給出這些答案的原因。將這兩種類型的問題結(jié)合起來可以創(chuàng)建有效的調(diào)查。

2. 客戶訪談

客戶訪談是一種通用的研究方法，可以在整個產(chǎn)品開發(fā)過程中獲得有見地的反饋。從進(jìn)行最初的設(shè)計研究到獲得發(fā)布后的反饋——與用戶交談總能產(chǎn)生新的見解。

對于產(chǎn)品營銷人員來說，訪談是一種有用的方式來獲取有關(guān)新產(chǎn)品或功能的消息傳遞的信息。

3. 產(chǎn)品分析

產(chǎn)品分析是了解產(chǎn)品性能和改進(jìn)方式的絕佳來源。產(chǎn)品分析對產(chǎn)品經(jīng)理和營銷人員都很有用，可以幫助您了解用戶在做什么與他們所說的相比，這可能并不總是相同的。

如果您在發(fā)布之前進(jìn)行了定性測試，產(chǎn)品分析可以幫助您驗證您的初始假設(shè)。

此外，產(chǎn)品分析是識別產(chǎn)品中嚴(yán)重問題的良好來源。例如，衡量留存率之類的分析可以讓您隨著時間的推移跟蹤它或?qū)⒈嚷逝c行業(yè)標(biāo)準(zhǔn)進(jìn)行比較。當(dāng)任何異常發(fā)生時，數(shù)據(jù)是進(jìn)行更多研究以了解問題所在的起點。

創(chuàng)建產(chǎn)品反饋循環(huán)的重要性

您可以使用多種方法來收集產(chǎn)品反饋，從我們上面看到的三種方法到社交媒體監(jiān)控、客戶支持票、銷售電話、客戶溝通電話等其他方法。更重要的是創(chuàng)建一個流程，通過該流程，反饋始終如一地到達(dá)您的組織并被采取行動，從而征求更多用戶反饋。這也稱為產(chǎn)品反饋循環(huán)。

反饋循環(huán)是一個迭代過程，其中從客戶反饋中收集的見解被實施到產(chǎn)品開發(fā)過程中，并用于在一致的基礎(chǔ)上為產(chǎn)品決策提供信息。隨著新的反饋影響新的產(chǎn)品策略，這個過程會無限重復(fù)，而變化會促使客戶提供額外的反饋。

這種持續(xù)不斷的客戶反饋將幫助您把握客戶滿意度的脈搏，并在您和您的客戶之間建立一個開放的渠道。

如何收集好的反饋

并非所有反饋都是平等的，或者就此而言——有用。就像進(jìn)行任何其他研究方法一樣，收集很好的反饋需要理解并遵循關(guān)鍵的最佳實踐。這是你應(yīng)該知道的。

建立明確的目標(biāo)

在您開始收集反饋之前，第一步是定義您的目標(biāo)并建立明確的衡量方法。

一個好的起點是查看您負(fù)責(zé)的 KPI。對于產(chǎn)品團(tuán)隊來說，這可能意味著激活或用戶保留。對于產(chǎn)品營銷人員，這也可能是合格的注冊和使用指標(biāo)。

此外，您建立的目標(biāo)還將幫助您選擇正確的方法來收集反饋。例如，客戶訪談非常適合在進(jìn)行初步發(fā)現(xiàn)研究時獲得定性反饋。另一方面，原型測試最適合在開發(fā)前與用戶一起驗證設(shè)計。確立目標(biāo)是獲得做出明智決策所需的反饋的第一步。

提出正確的問題

其次，提出正確的研究問題是獲得有效、可靠反饋的關(guān)鍵步驟。確定目標(biāo)后，下一步是制定您需要發(fā)送給用戶的調(diào)查或為客戶訪談準(zhǔn)備研究計劃。

在制定研究問題時，需要牢記一些重要的指導(dǎo)方針。其中一些是：

A. 避免引導(dǎo)參與者尋找答案

B. 避免封閉式問題，尤其是在客戶訪談中

C. 參考特定時刻，例如使用功能或新產(chǎn)品

總結(jié)

產(chǎn)品反饋是洞察客戶行為和痛點的重要來源，可幫助您在整個產(chǎn)品開發(fā)過程中做出明智的決策。

今天在產(chǎn)品和營銷領(lǐng)域工作的每個人都將從與客戶交談和傾聽他們的意見中受益。隨著產(chǎn)品的成熟和客戶需求的變化，這些對話不應(yīng)該是一次性的，而是構(gòu)建偉大產(chǎn)品的關(guān)鍵部分。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：對啊分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

人們是如何組織信息的？

在 Ant Design 的界面設(shè)計中，會包含大量的信息組織和編排工作，我們常常會遇到這樣的問題：

• 一個詳情頁面里應(yīng)該包含哪些信息？

• 什么樣的信息應(yīng)該放在卡片里，什么樣的信息應(yīng)該平鋪顯示？

• 一個頁面內(nèi)的信息該怎么讓用戶快速找到重點？

• ···

信息組織是我們在日常生活中經(jīng)常會遇到的問題，商場里的樓層導(dǎo)航、機(jī)場車站的標(biāo)志指引、餐桌上的菜單、手機(jī)里的通訊錄等等，各式各樣的信息是如何被組織編排到一起，又是以何種方式把信息呈現(xiàn)給用戶呢？

在解答這些關(guān)于頁面設(shè)計的問題之前，我想先給大家講一個生活中的小案例：

動線設(shè)計

逛過宜家的人，應(yīng)該會注意到宜家類似迷宮的動線設(shè)計，這種動線設(shè)計能夠讓消費者不知不覺逛完商場的各個角落。踏入宜家門口時，就會被一條隱形“向?qū)А蹦匾龑?dǎo)著向前走：一條曲折宛轉(zhuǎn)的主線依次引導(dǎo)至客廳家具、客廳儲物室、臥室、書房等各個主區(qū)域，直到一個不落地走完才抵達(dá)出口。但在這個主線之外，為了確保一些消費者在購物中，能夠快速離開或快速去往感興趣的區(qū)域，每個主區(qū)域間都有一些較隱蔽的捷徑作為輔動線。

這種動線設(shè)計一方面能夠把所有商品按照路徑有效的串聯(lián)起來，另一方面又能讓消費者不知不覺的沿著這個路徑去了解商品。

商品布局

動線布局是宜家的隱形骨架，而真正讓宜家賣場豐富起來的，還是琳瑯滿目的商品。宜家的賣場和大部分零售賣場不一樣，它不會把同類型產(chǎn)品進(jìn)行大集合，而是根據(jù)人們的正常生活場景來分類，不同類型的產(chǎn)品在同一區(qū)域組合陳設(shè)，構(gòu)成生活中的一個小場景，一方面能達(dá)到對各個商品功能的完美詮釋，另一方面，一個產(chǎn)品盡量不會重復(fù)出現(xiàn)，盡可能減少商品展示的復(fù)雜性。

在整體商品布局上，有兩個很有意思的地方：第一，在居家體驗中心，樣板間的陳列順序完全是按照消費者回家后的場景而布置：客廳、餐廳、廚房、書房、臥室、衛(wèi)生間......，第二，在家居用品中心，則會根據(jù)消費者在家的日常起居行為進(jìn)行擺放：做飯、休息、讀書、收納......

現(xiàn)實生活中的這些例子，對我們的界面信息組織有什么啟發(fā)呢？

關(guān)于動線和布局的思考

在宜家的案例中，關(guān)于動線，映射到人的行為上，有一個比較專業(yè)的概念叫做“流”（flow）。 Mihaly Csikszentmihalyi 的著作《心流：最優(yōu)體驗心理學(xué)》中對“流”的定義：當(dāng)人們?nèi)硇耐度氲侥硞€活動中時，會對周邊干擾視而不見，這種狀態(tài)被稱為“流”。宜家的動線設(shè)計很好的營造了這種狀態(tài)，讓消費者完全沉浸于商品瀏覽，并且盡量不去打斷這種行為流。

經(jīng)過研究發(fā)現(xiàn)，構(gòu)成“流”的行為動作，其前后必然存在某種連續(xù)性或者關(guān)聯(lián)性，例如回家的行為動線，日常起居的行為關(guān)聯(lián)等。這個概念在界面設(shè)計中依然適用，很多界面設(shè)計都在有意無意的去創(chuàng)造“流”的狀態(tài)，帶給你用戶沉浸式體驗，例如各類短視頻應(yīng)用會根據(jù)用戶瀏覽習(xí)慣推薦相關(guān)聯(lián)的視頻內(nèi)容，讓用戶沉浸其中無法自拔。

關(guān)于商品布局，映射到信息組織上，《韋氏大詞典》 中提到一個詞“編配”（orchestration），對應(yīng)的解釋為“和諧的組織”。這個詞能比較好的表達(dá)信息組織的含義，宜家的商品和諧的組織構(gòu)成一個場景，它向消費者傳遞的不僅僅是商品本身的功用性，更是在傳遞一種搭配建議或者一種生活方式。這種商品組織方式能非常有效的降低消費者對信息篩選的復(fù)雜程度。而在界面設(shè)計上，表單頁的和諧組織能夠幫助用戶快速完成信息錄入，詳情頁的和諧組織能夠幫助用戶快速理解一個描述對象......

各種各樣的信息總能以某種關(guān)系組織到一起，而如何根據(jù)這種流為用戶去組織和呈現(xiàn)信息呢？

“流”的本質(zhì)其實是一系列具有關(guān)聯(lián)性的行為動作串聯(lián)，而“編配”的目的則是為了降低串聯(lián)信息呈現(xiàn)的復(fù)雜程度。有了這兩個基礎(chǔ)的概念之后，我們可以做一個初步假定：所有的信息是否都可以通過關(guān)聯(lián)性和復(fù)雜度來進(jìn)行組織編排？針對著這兩個維度，我們又進(jìn)行了更深層次的研究和驗證，并得到基本定義：

• 信息復(fù)雜度：信息量的大小，包括種類、數(shù)量等。

• 信息關(guān)聯(lián)性：信息之間的潛在關(guān)聯(lián)或者相互影響。

我們設(shè)想，這兩個維度能否運用到界面設(shè)計上的信息組織呢？

頁面信息的組織方式

信息關(guān)聯(lián)性

界面信息之間的潛在關(guān)聯(lián)或者相互影響，通常體現(xiàn)在「邏輯關(guān)聯(lián)」和「視覺關(guān)聯(lián)」兩個層面。

邏輯關(guān)聯(lián)

顧名思義是指一個事件中的所有信息之間的關(guān)系，在界面設(shè)計中，無論什么樣的信息，總能以某種方式進(jìn)行分類和編排在一起，例如手機(jī)通訊錄中的人名，可以按照字母順序從 a 到 z 進(jìn)行排列，電商網(wǎng)站的商品導(dǎo)航會根據(jù)類別進(jìn)行分組，待辦事項可以根據(jù)時間進(jìn)行排序等。

如何找出信息之間的邏輯關(guān)聯(lián)性呢？

被稱之為信息架構(gòu)之父的 Richard saul wurman 在《信息焦慮》一書中將信息組織方式用“五頂帽架”來概括：

• 地點（Location）

• 字母（Alphabet）

• 時間（Time）

• 類別（Category）

• 層級（Hierarchy）

簡稱LATCH。這五種方式基本可以涵蓋所有的信息組織策略，信息是無限的，但是信息組織方式卻是有限的。

視覺關(guān)聯(lián)

任何一個界面呈現(xiàn)給用戶的時候，用戶都會下意識的去判斷界面上什么信息是最重要的，接著會去關(guān)注這些信息都有什么關(guān)聯(lián)，因此，除了按照邏輯去組織信息之外，還應(yīng)該合理的去呈現(xiàn)信息的視覺層級關(guān)系。

視覺層級關(guān)系有幾種常見的區(qū)分方式：

• 強(qiáng)調(diào)：使用基本視覺元素（顏色、形狀、大小等）區(qū)分層級

• 親密性：位置接近的元素通常是有關(guān)系的，而且位置越近，關(guān)系越強(qiáng)

• 圖勝于言：視覺符號和對象關(guān)聯(lián)，例如：齒輪或扳手=設(shè)置，垃圾桶=刪除

• 瀏覽順序：根據(jù)瀏覽順序，從左到右（部分地區(qū)）或從上到下信息重要程度依次減弱

• ···

如何驗證界面元素的視覺關(guān)聯(lián)性是否合理呢？

瞇眼測試

《About Face 4: 交互設(shè)計精髓》 中提到了一個很有意思的測試，為了確保界面視覺信息有效的拉開層次關(guān)系，圖形設(shè)計師經(jīng)常會用到一個方法“瞇眼測試”（squint test）。閉上一只眼睛，瞇著另外一只眼睛看屏幕，看看哪些元素突出，哪些元素模糊，哪些元素看上去成組，哪些元素看上去零散。從多個角度去觀察，總能夠發(fā)現(xiàn)之前沒有注意到的布局和構(gòu)成問題。

信息復(fù)雜度

通常以信息量的大小或樣式多少來衡量，這兩個維度實際決定了信息的瀏覽時長。例如一個詳情頁面內(nèi)都是純文本信息，但是信息量較大（超過三屏），則認(rèn)為這個頁面的復(fù)雜度較高，或者一個詳情頁面內(nèi)同時包括文本、表格、代碼展示、圖表等元素，也會認(rèn)為這個頁面的復(fù)雜度較高。

信息的復(fù)雜度和關(guān)聯(lián)性并不是兩個完全獨立的維度，根據(jù)關(guān)聯(lián)性去組織信息，本身就是為了降低信息呈現(xiàn)出的復(fù)雜程度。而對復(fù)雜度的研究，可以幫助我們?nèi)绾芜x擇合適的方式把信息呈現(xiàn)給用戶。

頁面信息組織實踐 - 詳情頁設(shè)計

具體到界面設(shè)計層面，信息體量大、復(fù)雜度高常常是中后臺界面設(shè)計的難題之一。以詳情頁為例，詳情頁內(nèi)的信息該如何合理的組織信息并有效的傳達(dá)給用戶呢？

根據(jù)關(guān)聯(lián)性和復(fù)雜度的概念，我們抽象出一個簡單的「復(fù)雜度模型」，用來判斷信息復(fù)雜程度和關(guān)聯(lián)性對頁面結(jié)構(gòu)的影響。

橫坐標(biāo)表示頁面信息之間的關(guān)聯(lián)性，縱坐標(biāo)表示信息的復(fù)雜程度，兩者交叉組成的色塊代表不同的信息等級?？拷c最淺的色塊，代表復(fù)雜程度低且關(guān)聯(lián)性強(qiáng)的內(nèi)容，例如一段純文本的產(chǎn)品描述信息；遠(yuǎn)離原點顏色最深的色塊，代表復(fù)雜程度高且相互獨立的信息，例如一個發(fā)布流程中的集成測、預(yù)發(fā)環(huán)境測試、灰度測試、上線等各個階段信息展示。

與之對應(yīng)的，我們對信息展示方式也進(jìn)行了維度劃分，用來解決在復(fù)雜的企業(yè)級產(chǎn)品界面設(shè)計中，何時使用卡片區(qū)分，何時拆分為 tab 等布局問題。

根據(jù)承載信息復(fù)雜程度的不同，我們對容器組件也進(jìn)行復(fù)雜度劃分，用來解決在不同頁面布局中，不同類型的信息用何種方式呈現(xiàn)的問題。

這個模型可以幫助設(shè)計者在決策布局組件時，有章可循。最終讓用戶感知，當(dāng)用戶來到一個頁面時，即可對頁面的信息量、信息的搜尋方式有統(tǒng)一的預(yù)期。我們嘗試將復(fù)雜度和關(guān)聯(lián)性模型在界面布局中落地：

關(guān)于以上的模型在實際設(shè)計中該如何操作，這里提供一個推薦步驟可以參考：

• 「復(fù)雜度判斷」明確設(shè)計對象信息量的大小

• 「關(guān)聯(lián)性判斷」判斷各個信息之間的關(guān)聯(lián)性，并合理分組

• 「組件選擇」選擇合適的容器組件來呈現(xiàn)信息

• 「模板選擇」選擇合適的頁面模板，組織編排信息

• 「瞇眼測試」檢查整體布局是否合理（僅參考）

結(jié)語

大到一個系統(tǒng)，小到一個按鈕，背后的每一條規(guī)則既要從人的角度去思考設(shè)計的易用性，同時也要從信息本身去推敲組織的合理性。作為設(shè)計規(guī)范的制定者，不能憑感覺簡單了事，而是需要找到一套通用的模式，幫助用戶快速找到并理解信息幫助用戶提效，同時提升用戶的瀏覽體驗，是我們一直在探索的課題。

虛擬界面的信息組織和現(xiàn)實世界一樣，既需要符合人們對事物的認(rèn)知，也需要遵循人們的行為習(xí)慣，這些認(rèn)知和行為習(xí)慣，構(gòu)成了自然交互的基礎(chǔ)，這也是我們一直在探索方向。當(dāng)然，信息組織除了以上這種思路，還有更多的思路和方向等待挖掘，期待大家的反饋和建議，幫助我們一起完善。

很多網(wǎng)站仍然在使用老舊的頁面設(shè)計，比如國內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計不能說是不好的設(shè)計，很實用，用戶能夠預(yù)測展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因為可預(yù)測，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗的網(wǎng)頁設(shè)計。

接下來是精彩的UI設(shè)計賞析

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

  藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  更多精彩文章：

       ui界面設(shè)計之網(wǎng)站設(shè)計案例欣賞(一)

       超贊的創(chuàng)意頁面排版設(shè)計，打造“視”不可擋的網(wǎng)頁設(shè)計

      超贊的網(wǎng)頁設(shè)計+精美流程圖賞析

       超贊的網(wǎng)站設(shè)計賞析

前言：一直總覺得td的寬度好難駕馭，但萬事萬物總是有規(guī)律的。就像亮劍說的：不用因為怕八路就敬而遠(yuǎn)之，應(yīng)該靠上去，熟悉他們，了解他們。

正文：

• Table只有Table的寬度是可以設(shè)置的，并且各個瀏覽器理解一致

• 1.原則上應(yīng)該講table的寬度設(shè)置成一個固定的值，而不應(yīng)該設(shè)置成一個根據(jù)屏幕變化的值
  Table的寬度為600px,Table的td所有寬度總和不到600px,瀏覽器會自動按照td的寬度的比例算出寬度

  <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 200px;">我是200px</td> <td style="width: 200px;">我也是200px</td> </tr> </table>  
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
              
  
                  5
              
  
              
  
                  6
              
  
          
  

  運行結(jié)果：兩個td都是300px;

• 2.Table的寬度為600px,前兩個td的寬度已經(jīng)為600px,那么第三個td的寬度沒有指定，這樣的話第三個td的寬度是根據(jù)內(nèi)容出現(xiàn)寬度的，然后前兩個再按照比列計算、
  前兩個td小于table寬度，那么最后一個td就起到補全的作用

   <table style="width: 600px;border-collapse: collapse;" > <tr> <td style="width: 300px;">我是200px</td> <td style="width: 300px;">我也是200px</td> <td >我是根據(jù)內(nèi)容的</td> </tr> </table>  
          
  
  
              
  
                  1
              
  
              
  
                  2
              
  
              
  
                  3
              
  
              
  
                  4
              
  
              
  
                  5
              
  
              
  
                  6
              
  
              
  
                  7
              
  
          
  

• 3.Table中的td內(nèi)，如果放置塊狀元素超過td的寬度，并且table的table-layout: fixed;(fixed表示td的寬度是定長的，不隨td內(nèi)容變化而變化)。
  這樣盡量不要再td里寫overflow: auto; 因為這樣在IE6,7不會出現(xiàn)滾動條的，最好的辦法是套一個div，寬度設(shè)置成100%

  <table style="width: 600px;border-collapse: collapse;table-layout: fixed;" > <tr> <td style="width: 200px;"><div style="width: 100%;overflow: auto;"><div style="width: 300px;height: 100px;background-color: red;"></div></div></td> <td >我是自由寬度</td> </tr> </table>
          
  
              藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
          
  
          
  
               
          
  
          
  
              
  
  
          
  
          
  
              轉(zhuǎn)自：csdn 
          
  
          
  
              分享此文一切功德，皆悉回向給文章原作者及眾讀者.
          
  
          
  
              免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
          
  
          
  
              藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
          
  

本次活動中，嘉賓通過眾多豐富、有趣的案例介紹了數(shù)據(jù)可視化的概念、作用和設(shè)計方法，信息量滿滿。

分享框架：

嘉賓首先分享了2個數(shù)據(jù)可視化案例：

1. 設(shè)計師把閱讀困難癥患者普遍能看到的東西進(jìn)行實體化、視覺化，讓別人能進(jìn)入他們的世界。
   
2. Aaron Koblin的作品《Flight Patterns》，讓人眼突破視域的界限，以“鳥瞰視角”來看北美居民的遷徙過程。
   

活動筆記：

1. 什么是數(shù)據(jù)視覺化？

其實它就是把不可見的數(shù)據(jù)轉(zhuǎn)化為可間接被觀察數(shù)據(jù)的過程。它不提供回答，只是提供一種觀察的新方式。

舉例一個來自小數(shù)據(jù)觀察的自我探索項目：太極。

將太極拳的動作進(jìn)行數(shù)據(jù)采集完成了第一張數(shù)字國畫，有人質(zhì)疑說好看但無用，嘉賓解釋由于好看吸引了人群，從人群的行為進(jìn)行觀察可能會有意想不到的發(fā)現(xiàn)。

數(shù)據(jù)視覺化的初衷并不是為了解決問題，而是為了探索。

前田約翰（John Maeda）曾經(jīng)說過：“好藝術(shù)的使命是喚起思考，好設(shè)計則是讓事物變得清晰，并能解決實際的問題！”

2. 數(shù)據(jù)視覺化有什么用？

介紹兩張數(shù)據(jù)視覺化歷史上教科書級別的神圖：

1. 《拿破侖東征》誕生于1861年，由法國工程師查理·米蘭德繪制，描述了1812年拿破侖東征俄羅斯的失敗戰(zhàn)役。圖中透過2個維度呈現(xiàn)了6類資料：拿破侖軍的人數(shù)、距離、溫度、經(jīng)緯度、移動方向，讓人在一個靜態(tài)的平面上同時觀察多種數(shù)據(jù)變成可能。
   
2. 另一位南丁格爾女士，是一名護(hù)士。作為軍醫(yī)，她清楚地知道大部分士兵都不是戰(zhàn)死沙場，而是死在醫(yī)療環(huán)境極差的軍營里，她自己懂，可是怎樣才能影響國會呢？她發(fā)明了玫瑰圖，用以表達(dá)軍醫(yī)院季節(jié)性的死亡率，對象是那些不太能理解傳統(tǒng)統(tǒng)計報表的公務(wù)人員。她的方法打動了當(dāng)時的軍官統(tǒng)領(lǐng)和維多利亞女王本人，于是醫(yī)事改良的提案才得到大力支持。為了紀(jì)念她的貢獻(xiàn)，后來她的頭像被印在了英鎊上。
   

數(shù)據(jù)可視化研究的不僅僅是“數(shù)據(jù)如何能被看清”，還有“數(shù)據(jù)如何能被看懂”。

2.1 數(shù)據(jù)如何被看清？

可以通過顏色，大小，方向去提高數(shù)據(jù)的差異性。最簡單的例子就是報表中的標(biāo)紅。

1. 有效標(biāo)紅的第一步：去顏色干擾，第二步：去分隔線干擾；
2. 去掉沒有用的東西，例如框框、加粗；
3. 對齊很重要：數(shù)據(jù)右對齊、信息左對齊，注意表頭對齊；
4. 間隔和行距也很重要；
5. 單位很重要，盡量減少數(shù)字本身的長度，不超過4位；
6. 去重非常重要（盡可能減少畫面里的重復(fù)信息，可以讓重要的信息更突出）；
7. 字體修正（看個人喜好）。

2.2 數(shù)據(jù)如何被看懂？

嘉賓介紹了4個項目：

項目1：國內(nèi)外藝術(shù)院校的數(shù)據(jù)可視化展示。

由于經(jīng)常會有同學(xué)問各大美院或藝術(shù)類院校之間的區(qū)別。嘉賓抓取了17所國內(nèi)國外院校的數(shù)據(jù)來做展示，藍(lán)色是代表“設(shè)計類”，白色代表“純藝術(shù)類”。從中也可以看到院校的結(jié)構(gòu)是否扁平。

項目2：嘉賓基于wikidata數(shù)據(jù)庫編寫的小工具。

最初只是用來快速查找藝術(shù)家的基礎(chǔ)信息，后來加入視覺化功能，把所有查詢到的人排列到一根時間軸上，橫向觀察她所關(guān)注的藝術(shù)家的生活年代及壽命。

通過可視化的展示，她發(fā)現(xiàn)自己關(guān)注的都是集中在某一個時期的藝術(shù)家，除了看到自己的喜好之余還很有效地發(fā)現(xiàn)自己的知識盲區(qū)（只有看到了自己知道什么，才能知道自己還不知道些什么）

我們可以發(fā)現(xiàn)在人類歷史上，很多人物在時間即便在空間上沒有交集，卻在時間上相遇了。

比如Jackson Pollock，藝術(shù)史上動態(tài)藝術(shù)里面用身體的律動去做油畫的一個非常重要的藝術(shù)家，他和計算機(jī)之父圖靈原來都是同一年出生的，酒鬼Jackson Pollock居然比圖靈還多活了兩年。

我們還能八卦一些愛情故事，原來搖滾界的神話列儂跟小野洋子是姐弟戀，而且列儂只陪伴了洋子生命的一小段時間。

我們可以清楚地看到“看得見”的魅力。

很多信息的缺失并不是不存在，而是無法被看見，被觀察。

因為看不見，很多信息甚至是完全錯誤的。在測試代碼的過程中作者更意外地發(fā)現(xiàn)愛迪生的生日被錯寫為2016。

項目3：紐約大都會藝術(shù)博物館做的Unfinished項目。

Unfinished是大都會藝術(shù)博物館別館在首次開幕時的處女展，Unfinished討論的是“藝術(shù)很重要”的話題：在藝術(shù)的世界里，什么是未完成，展期為半年。嘉賓認(rèn)為這個線下展展期太短非?？上ВＭ梢酝ㄟ^技術(shù)的手段延長展期，更希望能降低門檻，讓更多世界各地?zé)o法前來觀展的人可以有機(jī)會參與討論。

于是嘉賓將Unfinished展做成了Google的插件，安裝插件之后，當(dāng)新打開空白頁的時候，空白頁會自動被Unfinished的作品填滿，把一個簡單的空白窗口變成藝術(shù)之窗，同時讓人不需要任何搜索便進(jìn)入展覽。

此外嘉賓賦予了這次改造更多的交互空間，讓人可以實現(xiàn)在傳統(tǒng)線下博物館沒有的體驗，讓他們自由地在“未完成”的作品上進(jìn)行創(chuàng)作并分享，延長了作品的壽命，讓藝術(shù)品重回人們的生活中，賦予其新的價值和靈魂。

項目4：通過整理全國美展的數(shù)據(jù)總結(jié)的一些獲獎規(guī)律

得到的3個有趣的結(jié)論是：

1. 高亮的紅色、黃色很受歡迎
2. 1999年，30多、40多的藝術(shù)家容易獲獎
3. 畫一張少數(shù)民族在沙發(fā)上抱著一頭牛的作品在數(shù)據(jù)上是很可能獲獎的

3. 數(shù)據(jù)如何被視覺化？

在實際工作里，大部分人會接觸到的數(shù)據(jù)視覺化實際上是信息圖表，關(guān)于信息圖表的一些規(guī)范和小技巧嘉賓也有提及到：

在做圖表時，動機(jī)往往比較重要。

下圖是為了說明布什總統(tǒng)下臺的話，居民稅收會增長多少，其實只有不足5%的區(qū)別，但對圖表做了去零線處理，使得看起來差異很大。

作圖的時候要先說明結(jié)論。

比如下面的表格是員工為了向老板說明自從少了兩位員工之后，單子處理不過來了，意思就是說老板你得給我加人。

千萬不要出現(xiàn)彩虹柱狀圖，折線圖在多周數(shù)據(jù)對比的時候會非常實用。

最后是一些推薦的網(wǎng)站和資源：

• https://informationisbeautiful.net/
• http://giorgialupi.com/
• 作者常用工具：Processing、D3.js等
  

最后釋疑：

• 問：是不是只有學(xué)會了寫代碼才能做數(shù)據(jù)視覺化的作品？
• 答：Dear Data就是一個很好的反例，它說明了手繪也可以是一種很靈活的創(chuàng)作方式。
  
  
  

  
  藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

  

  
  文章來源：UXRen   作者：寶珠
  

  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
  

  藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

  
  

首先，我們怎么去理解在作品集版面中的“精致度”。我覺得可以將其轉(zhuǎn)化為“質(zhì)感”，“細(xì)節(jié)”，“細(xì)膩”這樣的詞匯。其實“精致度”不足這個問題大部分同學(xué)也是能有所感知的，只是不知道哪里出了問題，也就無從下手。當(dāng)然還有一小部分同學(xué)，可能并不覺得自己有什么問題，也無法體會修改前后的差別，這樣的同學(xué)，我建議你平時應(yīng)該多看一些優(yōu)秀的設(shè)計作品，多沉淀一下，這樣的方式對你幫助更大。

很多同學(xué)經(jīng)常把“精致度”理解為形式感不夠，或者是不夠酷炫，這么理解是不準(zhǔn)確的。這就好像一個產(chǎn)品，它的精致和它的外觀設(shè)計并沒有什么直接聯(lián)系，而是更多的取決于這個產(chǎn)品的做工和材質(zhì)。做工體現(xiàn)在接縫的處理，邊角的打磨等等，而材質(zhì)決定了其質(zhì)感的好壞。那么同理，版面的“精致度”實際上和你的設(shè)計感也是沒有直接聯(lián)系。那么從哪些方面體現(xiàn)版面中的“精致度”呢？我結(jié)合自己的經(jīng)驗總結(jié)了以下幾個方面：

1.舒適的間距。一個合適的，讓人舒適的間距特別重要。無論是文字與的，或者說認(rèn)為不重要的事情?；靵y的，不統(tǒng)一的，不舒適的間距會讓版面變的排布變的無章，這就好像一個產(chǎn)品各個部件的拼接接縫大小不一，會導(dǎo)致“精致度”下降。

2.大小比例。版面中所有元素的互相之間，以及相對于整個版面的大小比例問題。這個也是非常重要的一個體現(xiàn)“精致度”的地方。所有內(nèi)容都過于傻大粗，無疑會讓版面看起來非常粗糙。

3.層次感。層次感實際上是一個非常好的提升質(zhì)感從而體現(xiàn)出“精致感”的手段。缺乏層次感的版面會顯得非常的寡淡，以及在內(nèi)容較多時可能會在視覺上造成較亂的感覺。那么如何提升層次感，主要是靠對比的強(qiáng)弱。比如：深與淺，粗與細(xì)，大與小，疏與密等等。

4.字體。選擇一個精致好看的字體，對版面的精致度有一定的提升，不過還是要注意，字體的與版面之間的大小比例要注意。

5.配圖。配圖的質(zhì)量也一定程度上影響了版面的精致度。無論是你自己做的圖，比如分析圖，效果圖等，還是你網(wǎng)上找的圖，如參考圖等，都很大程度上決定了你這一頁的精致度。

通過以上幾點的提升，我相信你的版面“精致度”一定會有較為顯著的提升，而版面效果也會看上去更為高級。不過這里還是要再次提醒，精致度和設(shè)計感是兩回事兒，如果只有精致度，而設(shè)計感較差，那也是不行的。希望本期的內(nèi)容對你的版面有所幫助。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)