午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

在互聯(lián)網(wǎng)領(lǐng)域中，人機之間的互動過程就是交互。交互也有一些可預(yù)測的、重復(fù)出現(xiàn)的規(guī)律，作者總結(jié)了其中常見的七種C端交互模式，可以提高大家的工作效率，分享給大家。

前段時間有個產(chǎn)品童鞋，他剛加我就問了一大串問題。

什么是模式（Pattern）？什么是模版（Template）？這兩個概念有什么區(qū)別？

作為一個熱心好學(xué)、樂于助人的產(chǎn)品仔，我當(dāng)然和他暢聊了一個多小時，順便總結(jié)下聊天內(nèi)容。

你是不是也經(jīng)常在生活工作中，碰到類似“行為模式、設(shè)計模式、語言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區(qū)別，搞懂了又有什么用？

別急，我們花幾分鐘，先來嘮嘮什么是模式。

一、什么是模式？

可預(yù)測、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律，通過歸納總結(jié)，就變成了某一種模式。

我們的生活中，就有許多模式的影子。

比如常見的商業(yè)模式、營銷模式、行為模式、數(shù)學(xué)模式、語言模式等。

舉個例子：

簡單說下行為模式，它分為了“習(xí)慣模式、消費模式、學(xué)習(xí)模式”等等。

苦逼打工仔普遍的消費模式，一般是工作日花錢少，到了周末都愛到商場逛街和購物。

但又有特例，我有個朋友就特別宅，他只喜歡在上班的時候，摸魚逛淘寶下單，簡直離譜~

做交互設(shè)計10年，我為何轉(zhuǎn)崗到產(chǎn)品經(jīng)理？

真正轉(zhuǎn)崗之后，我發(fā)現(xiàn)很多工作還是超出了自己的想象。產(chǎn)品經(jīng)理的工作確實比較雜。理論上，產(chǎn)品經(jīng)理的工作包括了產(chǎn)品的方方面面，從市場研究、用戶調(diào)研、數(shù)據(jù)分析...

查看詳情 >

掌握模式，有什么用？

當(dāng)你掌握了模式的概念，并嘗試在生活中使用，相信你一定能感受到這 7 個好處。

1. 信息壓縮：把信息精簡成特定的模式，記憶傳播更容易了，教給別人更是輕輕松松；
2. 知識萃取：通過學(xué)習(xí)模式，掌握系統(tǒng)化的知識，就像搭樂高拼積木，簡單易懂、一學(xué)就會、舉一反三；
3. 簡化問題：用模式來解決問題，意味著它不再是一團亂麻，成為了可分割的部分，原來苦惱的事，現(xiàn)在輕松搞定；
4. 識別規(guī)律：當(dāng)你摸清了模式的現(xiàn)象規(guī)律，就像旅游帶著地圖，走到哪里都不慌；
5. 提高效率：把模式進行泛化使用，可以大大提高你的工作產(chǎn)出，蓋章可比畫圖快太多了；
6. 組合創(chuàng)新：試著把你學(xué)會的各種模式，打亂排序、重新組合，說不定會拼出一些新玩意；
7. 預(yù)測未來：搞懂了特定領(lǐng)域的模式，意味著你熟知并能運用自如，自然而然學(xué)會了推演未來。

二、C 端交互設(shè)計的 7 種常見模式

我們試著再舉個例子，加深下對模式的理解，順便學(xué)學(xué)交互設(shè)計。

什么是交互？

簡單來說，交互指的是在互聯(lián)網(wǎng)領(lǐng)域中，人、機之間的一系列互動過程。

我還提煉了 3 種常見模式（簡單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷），比較粗糙湊合也能用。

現(xiàn)在試著再系統(tǒng)總結(jié)下，我常用的 7 種 C 端交互模式，主要有：導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。

學(xué)完就能用，趕緊卷起來~

有人就問了，還有更多交互模式嗎？

確實可以有，等我有時間再編幾個。。

話說回來，如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則，可能會涉及到 N 個交互模式的任意組合。

1. 導(dǎo)航模式

常見的導(dǎo)航模式有按鈕組合、標簽菜單、宮格布局、列表視圖等。

導(dǎo)航模式的主要作用是，告知用戶當(dāng)前在網(wǎng)站的位置，以及接下來到哪些頁面，這有點像地圖 APP。

上面這張圖中，包含了幾種導(dǎo)航組件呢？

2. 搜索模式

搜索，是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關(guān)鍵詞，然后系統(tǒng)返回搜索結(jié)果。

打個比方，這有點像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是，查詢大于 18 歲的用戶信息，包含序號、名稱、年齡。

3. 反饋模式

常見的反饋模式組件，涉及了對話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場景是，告知用戶一些信息或提示，比如“輸入密碼錯了、展示訂單取消的注意事項”等。

4. 輸入模式

輸入模式主要用于新數(shù)據(jù)創(chuàng)建，例如淘寶下單時，你新增了一個收貨地址。

打開美團叫個外賣，整個訂單創(chuàng)建流程，也是輸入模式。

5. 編輯模式

有很多人可能會把輸入模式和編輯模式搞混。

區(qū)別它們的一個方法是，交互流程涉及新數(shù)據(jù)創(chuàng)建，還是改舊數(shù)據(jù)。

改數(shù)據(jù)的話，那就是編輯模式。

6. 分享模式

我們在看到一些干貨文章，或好用的小程序想要轉(zhuǎn)發(fā)給朋友，那就要用到分享模式。

分享模式可以很簡單，也可以往復(fù)雜了做，看產(chǎn)品階段去實現(xiàn)。

7. 引導(dǎo)模式

引導(dǎo)模式和反饋模式有點像，都是展示特定的內(nèi)容。

那怎么分辨它們呢？

以設(shè)計師視角來看，反饋模式需要用戶觸發(fā)，系統(tǒng)被動顯示。

而要讓用戶特別關(guān)注的信息，那就是引導(dǎo)模式。

三、總結(jié)

模式，即抽象的規(guī)律。——好夕雷

說了這么多概念和例子，你是不是對模式的認知更清晰了呢？

模式運用在產(chǎn)品領(lǐng)域，就有了這 7 種交互模式，分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。

如果學(xué)會了模式，那么無論生活還是工作，相信你一定能輕松應(yīng)對、事半功倍。

這些是一些創(chuàng)新和不同尋常的B端系統(tǒng)界面設(shè)計思路，可以根據(jù)具體的業(yè)務(wù)需求和用戶群體的特點進行定制和調(diào)整。希望這些思路能夠為您帶來新的靈感和想法！

前面的文章我們分享了交互設(shè)計思維，這篇文章，我們來看看用戶目標與交互目標。交互設(shè)計的核心，就是幫用戶拆解這些目標并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。

一、用戶需要達成什么目標

在交互設(shè)計中，用戶的目標可以理解為他們希望通過使用產(chǎn)品完成的事情。換句話說，就是用戶打開你的產(chǎn)品時“心里想要達成的事”。這個目標可能是很直接的，比如在外賣App上訂一份喜歡的午餐；也可能是抽象的，比如通過一款學(xué)習(xí)軟件提升自己的外語水平。無論目標是什么，用戶都期望在操作的過程中高效、順暢且愉快地達成目標。

交互設(shè)計的核心，就是幫用戶拆解這些目標并找到最優(yōu)路徑，讓他們覺得“這事兒沒那么難”。比如，如果用戶的目標是查找一條航班信息，設(shè)計師需要確保他們可以快速找到搜索入口，并在最短的時間內(nèi)完成查詢，而不是在復(fù)雜的頁面中迷路。

除了完成任務(wù)，用戶還有情感上的目標，比如體驗愉悅感、安全感或滿足感。舉個例子，當(dāng)用戶在付款時，他們的功能性目標是完成支付，而情感性目標可能是確認交易安全或者支付方式簡單快捷。這就是為什么很多支付產(chǎn)品會在完成支付后彈出一個愉快的提示動畫，比如一個小勾或一個成功的笑臉——它不僅告訴用戶任務(wù)完成了，還讓他們感到一種心理上的正反饋。

因此，交互設(shè)計思維的本質(zhì)是站在用戶的視角去思考：他們想要完成什么，他們需要如何完成，以及我們?nèi)绾巫屵@個過程變得簡單、高效和愉悅。滿足用戶目標，才是設(shè)計的成功所在。

二、產(chǎn)品需要傳遞什么信息

在交互設(shè)計中，產(chǎn)品不僅是幫助用戶完成任務(wù)的工具，更是一個信息傳遞的媒介。那么，產(chǎn)品需要傳遞的信息到底是什么呢？簡單來說，就是**“我是什么”“我能做什么”“你現(xiàn)在在哪兒”“接下來該怎么做”**這幾大核心信息。

首先，產(chǎn)品需要明確地告訴用戶“我是什么”。比如，你打開一個外賣App，頁面上醒目的美食圖片和“搜索餐廳”的提示，就在告訴你，這個App的核心功能是幫助你找到食物并下單。如果用戶對產(chǎn)品的功能感到困惑，那設(shè)計就失去了它的基礎(chǔ)價值。

 

接著，產(chǎn)品要傳遞“我能做什么”的信息。也就是說，用戶需要很清楚地知道，這個產(chǎn)品能為他們提供哪些服務(wù)，或者有哪些功能可以用。比如在拍照App中，用戶可能會關(guān)心是否有濾鏡或編輯功能。設(shè)計師要通過直觀的界面布局和易識別的圖標來傳遞這些功能信息，避免用戶四處尋找。

再來是“你現(xiàn)在在哪兒”。用戶在使用產(chǎn)品的過程中，需要隨時了解自己在操作流程中的位置，比如是剛開始填寫訂單信息，還是已經(jīng)進入支付環(huán)節(jié)。這種清晰的路徑感，可以通過導(dǎo)航欄、進度條等設(shè)計元素來實現(xiàn)，讓用戶有一種“掌控感”。

最后，也是最重要的，產(chǎn)品需要告訴用戶“接下來該怎么做”。交互設(shè)計的一個關(guān)鍵點，就是要引導(dǎo)用戶完成操作，避免他們卡在某一步不知所措。例如，當(dāng)用戶填寫表單時，如果某項信息漏填了，產(chǎn)品需要用清晰的提示信息，比如紅色邊框或彈窗，告訴用戶哪里需要修正。通過明確的反饋，用戶會感到流程是流暢的，而不是無頭緒的。

總結(jié)來說，產(chǎn)品傳遞的信息是為了讓用戶明白自己的位置、了解操作步驟、感受到控制感和安全感。一個設(shè)計得當(dāng)?shù)漠a(chǎn)品，會像一位貼心的向?qū)В粩嘤煤线m的方式傳遞這些信息，讓用戶有條不紊地完成目標，同時享受使用的過程。

三、如何鏈接用戶目標與產(chǎn)品目標

在交互設(shè)計中，找到用戶目標與產(chǎn)品目標之間的平衡點就像搭建一座橋——一邊是用戶的需求和期望，另一邊是產(chǎn)品的商業(yè)目標和核心價值。設(shè)計的任務(wù)，就是讓這座橋既穩(wěn)固又通暢，讓用戶愿意通過產(chǎn)品實現(xiàn)他們的目標，同時產(chǎn)品也能達成自己的目標。

1. 理解雙方的目標。用戶目標往往是具體的、個人化的，比如通過一個購物App快速買到需要的東西，而產(chǎn)品目標可能更關(guān)注商業(yè)利益，比如提高銷量或用戶粘性。要平衡二者，設(shè)計師需要深刻理解用戶的真實需求和行為，同時清楚產(chǎn)品的發(fā)展方向和核心價值。
2. 用設(shè)計讓雙方目標對齊。最理想的狀態(tài)是用戶的需求與產(chǎn)品的目標能在設(shè)計中自然地融合。比如，外賣平臺的用戶希望快速點餐，而平臺的目標是提高訂單量。設(shè)計師可以通過優(yōu)化首頁推薦系統(tǒng)，讓用戶快速找到喜歡的餐廳；同時引入組合優(yōu)惠功能，既滿足了用戶省錢的需求，又推動了平臺的銷售增長。
3. 關(guān)注用戶體驗的同時實現(xiàn)產(chǎn)品價值。有時候，產(chǎn)品目標可能會和用戶體驗產(chǎn)生沖突，比如產(chǎn)品希望通過廣告增加收入，但廣告過多會讓用戶反感。此時，設(shè)計師需要通過策略性設(shè)計找到平衡點，比如在不打擾用戶核心任務(wù)的地方投放廣告，或者提供“去廣告”的付費選項，讓用戶自己選擇。
4. 通過數(shù)據(jù)和用戶反饋持續(xù)優(yōu)化。平衡用戶目標和產(chǎn)品目標不是一蹴而就的，需要在實際使用中不斷調(diào)整。通過用戶測試、數(shù)據(jù)分析和用戶反饋，設(shè)計師可以發(fā)現(xiàn)哪些地方做得好，哪些地方需要改進。比如，如果發(fā)現(xiàn)某功能讓用戶覺得復(fù)雜，那么優(yōu)化后的設(shè)計既能提升用戶滿意度，也可能間接增加產(chǎn)品留存率。

總結(jié)來說，設(shè)計師的職責(zé)是成為用戶和產(chǎn)品目標之間的“調(diào)解員”，用設(shè)計語言找到兩者的共贏點。一個成功的設(shè)計，不僅能讓用戶滿意，還能幫助產(chǎn)品實現(xiàn)長遠的發(fā)展目標。這種平衡并不容易，但通過不斷洞察、嘗試和優(yōu)化，就能讓產(chǎn)品和用戶之間建立起良性連接。

編輯導(dǎo)語：設(shè)計師如何創(chuàng)建一個大放異彩的UI？好的UI設(shè)計不僅是讓軟件變得有個性有品位，還要讓軟件的操作變得舒適簡單、自由，充分體現(xiàn)軟件的定位和特點。本文詳細地給大家整理了UI設(shè)計的四大原則。一起來看看吧。

是什么讓一個好的 UI 設(shè)計易于閱讀？是什么讓用戶輕松瀏覽？設(shè)計師如何創(chuàng)建一個大放異彩的UI？用戶界面是任何軟件產(chǎn)品的關(guān)鍵部分。

好的UI設(shè)計，用戶甚至?xí)雎运?/p>

如果做得不好，會成為用戶使用產(chǎn)品路上的絆腳石。

為了更高效地設(shè)計能滿足用戶使用的UI，大多數(shù)設(shè)計師都遵循界面設(shè)計原則。

本期我們就帶你了解UI設(shè)計四大原則！

一、美學(xué)性

為了創(chuàng)建視覺美學(xué)UI通常有以下這些小規(guī)則：

1. 規(guī)則 1：光來自天空

陰影是告訴我們正在查看哪些用戶界面元素的寶貴線索。

當(dāng)光從天而降時，它照亮事物的頂部并在其下方投下陰影。

事物的頂部較輕，底部較暗。UI 也是如此。

就像我們所有面部特征的所有底面都有小陰影一樣，幾乎每個 UI 元素的底面都有陰影。

我們的屏幕是平面的，但細節(jié)設(shè)計會讓屏幕上幾乎所有東西看起來都是立體的。

2. 規(guī)則 2：黑白優(yōu)先

在添加顏色之前進行灰度設(shè)計可以簡化視覺設(shè)計中最復(fù)雜的元素，這樣設(shè)計師可以專注于間距和布局元素。

首先設(shè)計黑白。從更難的問題開始，讓應(yīng)用程序在各個方面都美觀且可用，但不需要顏色的幫助，最后再添加顏色。

這是讓應(yīng)用程序看起來“干凈”和“簡單”的可靠的簡單方法。在太多地方有太多顏色是往往容易搞砸設(shè)計。

而在此之后，向灰度站點添加一種顏色可以簡單有效地吸引眼球。

通過修改單一色調(diào)的飽和度和亮度，可以生成多種顏色——深色、淺色、背景、強調(diào)色、引人注目的顏色，但這樣不會讓人眼花繚亂。

使用一種或兩種基本色調(diào)中的多種顏色是突出或中和元素且不會使設(shè)計混亂的可靠方法。

3. 規(guī)則 3：將空白加倍

為了使 UI 看起來很有設(shè)計感，需要增加很多喘息的空間。

空白是構(gòu)成出色視覺布局的最容易被忽視和未充分利用的元素之一。

很多時候，空白被視為空白空間，因此浪費了屏幕空間。

空格對于制作更好和簡化的布局是必要的，因為它最終使用戶專注于本來打算看到的內(nèi)容。大量的空白可以使一些雜亂的界面看起來簡單又容易吸引人。

4. 規(guī)則4：為每個屏幕創(chuàng)建一個焦點

強調(diào)是一種策略，是想要將觀眾的注意力吸引到特定的設(shè)計元素上。這可能是內(nèi)容區(qū)域、圖像、鏈接或按鈕等。

我們看到大多數(shù)設(shè)計領(lǐng)域都會注重焦點的創(chuàng)建，包括建筑、景觀設(shè)計和時裝設(shè)計。

二、清晰

為了通過視覺元素傳遞給用戶信息并導(dǎo)航準確，不讓用戶迷失方向，通常有以下幾點規(guī)則：

1. 規(guī)則1：避免不必要的復(fù)雜性

始終以盡可能少的步驟和屏幕為目標。

使用諸如底部工作表和模式窗口之類的覆蓋來壓縮數(shù)據(jù)并減少應(yīng)用程序的占用空間。同時，確保自主和獨立的方式組織信息。可以將將任務(wù)和子任務(wù)組合在一起。

重要的是，不要將子任務(wù)隱藏在用戶想不到的頁面上。根據(jù)清晰且合乎邏輯的分類組織屏幕及其內(nèi)容。

同樣，始終將完成任務(wù)所需的步驟數(shù)量減少到最小值。

當(dāng)只需要一兩個操作時，不要讓用戶經(jīng)歷繁瑣的點擊障礙。三擊規(guī)則是最實用的 UI 設(shè)計原則之一，它指出用戶應(yīng)該能夠通過在應(yīng)用程序內(nèi)的任何位置單擊不超過 3 次來實現(xiàn)任何操作或訪問他們需要的任何信息。

最重要的是，永遠不要要求用戶重新輸入他們已經(jīng)提供的信息。這可能讓用戶扔掉他們的設(shè)備，直接放棄使用。

2. 規(guī)則2：提供清晰的標示

這條原則涉及直觀的布局和清晰的信息標簽。瀏覽應(yīng)用程序不應(yīng)以任何方式令人困惑，即使初次使用的用戶也是如此。

相反，對界面的探索應(yīng)該是有趣的，并在不知不覺中舒適地學(xué)會。

確保頁面架構(gòu)簡單、合乎邏輯且有清晰的標示。

用戶永遠不應(yīng)該懷疑他們在軟件中的位置，也不應(yīng)該不斷思考才能確定如何到達他們想去的位置。

3. 規(guī)則3：促進視覺清晰度

良好的視覺組織提高了可用性和易讀性，使用戶能夠快速找到他們正在尋找的信息并更有效地使用界面。

設(shè)計布局時，避免一次在屏幕上顯示太多信息。構(gòu)建網(wǎng)格系統(tǒng)設(shè)計以避免視覺混亂。

應(yīng)用內(nèi)容組織的一般原則，例如將相似的項目組合在一起、對項目進行編號以及使用標題和提示文本。

三、隱喻

簡化視覺認知，讓用戶能盡快“認識”界面，圖形元素符合用戶對真實世界的聯(lián)想，更符合用戶對于界面的慣性認知。

在 UI 設(shè)計中使用隱喻可以讓用戶在現(xiàn)實世界和數(shù)字體驗之間建立聯(lián)系。

好的隱喻會與用戶腦海中真實世界的過去體驗產(chǎn)生強烈的聯(lián)系。隱喻常用于使不熟悉的事物變得熟悉。

以桌面上的回收站為例，它包含已刪除的文件——但它不是真正的垃圾箱，它以一種可以幫助用戶更輕松地理解概念的方式進行可視化表示。

在為 UI 選擇隱喻時，選擇能夠讓用戶掌握概念模型最精細細節(jié)的隱喻。

例如，在詢問用于支付處理的信用卡詳細信息時，可以參考現(xiàn)實世界的實體卡作為示例。

四、用戶控制

視覺設(shè)計要讓用戶感受到是用戶在控制界面，而不是被界面所控制。

1. 規(guī)則1：讓行動可逆

用戶應(yīng)該始終能夠快速回溯他們正在做的任何事情。這允許用戶探索產(chǎn)品而不必擔(dān)心失敗，當(dāng)用戶知道錯誤可以很容易地撤消時，這鼓勵了對不熟悉的選項的探索。

相反，如果用戶必須對他們采取的每一個動作都非常小心，這會導(dǎo)致探索速度變慢且令人不安。

當(dāng)用戶錯誤地選擇系統(tǒng)功能時，“撤消”會非常有用。在這種情況下，撤消功能用作“緊急出口”，允許用戶離開不需要的狀態(tài)。

例如，當(dāng)用戶意外刪除電子郵件時，Gmail 的通知消息帶有撤消選項。

2. 規(guī)則2：適應(yīng)不同水平的用戶

不同技能水平的用戶應(yīng)該能夠與不同水平的產(chǎn)品進行交互。不要為了新手或臨時用戶的易于使用的界面而犧牲專家用戶。

相反，要嘗試針對不同用戶的需求進行設(shè)計，因此，用戶是專家還是新手并不重要。

添加教程和解釋等功能對新手用戶非常有幫助。

一旦用戶熟悉了產(chǎn)品，用戶就會尋找快捷方式來加快常用操作的速度。

設(shè)計師應(yīng)該讓有經(jīng)驗的用戶使用快捷方式，從而為他們提供快速路徑。

作者：格格學(xué)姐

本文由 @空兩格 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于CC0協(xié)議。

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

在B端產(chǎn)品設(shè)計中，中后臺UI設(shè)計規(guī)范的建立對于提升設(shè)計效率、保證用戶體驗一致性以及優(yōu)化開發(fā)流程至關(guān)重要。本文從設(shè)計規(guī)范的意義、原子設(shè)計理論、后臺設(shè)計系統(tǒng)搭建以及Design Token應(yīng)用實踐四個方面，詳細總結(jié)了B端中后臺設(shè)計的要點和方法，供大家參考學(xué)習(xí)。

今天從以下4個方面，結(jié)合7年B端設(shè)計工作經(jīng)驗，為大家分享原子設(shè)計理論和中后臺設(shè)計系統(tǒng)搭建的應(yīng)用實踐。

01 搭建設(shè)計規(guī)范的意義

分別站在整個產(chǎn)品設(shè)計研發(fā)流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：

由此，體現(xiàn)出搭建設(shè)計規(guī)范的作用和意義：

① 產(chǎn)品側(cè)

?個產(chǎn)品不同分?多個團隊完成的時候，可以保證產(chǎn)品團隊使?同?份設(shè)計規(guī)范快速完成產(chǎn)品原型設(shè)計。保證可復(fù)?模塊的交互體驗的?致性。

② 設(shè)計側(cè)

通過設(shè)計規(guī)范去解決?部分需求，極?提?效率解放雙?，讓設(shè)計師能去做?些更發(fā)揮創(chuàng)意和想象?的設(shè)計。

③ 開發(fā)側(cè)

形成開發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護成本。開發(fā)?程師?需再重復(fù)開發(fā)同?個組件，只需要去組件庫?調(diào)?即可，配合業(yè)務(wù)邏輯，?效完成界?開發(fā)，做到開箱即?。

什么是B端產(chǎn)品經(jīng)理？和C端產(chǎn)品經(jīng)理有什么區(qū)別？

B端產(chǎn)品經(jīng)理中的B是Business，商業(yè)的意思，B端產(chǎn)品經(jīng)理首先就要理解這個職位的重要性，要設(shè)計出更適合這個項目需求的產(chǎn)品方案，B最終產(chǎn)品經(jīng)理在日常工作中...

查看詳情 >

④ 測試側(cè)

標準化的設(shè)計規(guī)范，是測試?員最喜歡看到的。例如，設(shè)計規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試?員只要測到不居右，就可以給產(chǎn)品提優(yōu)化建議了。

02 原子設(shè)計理論

設(shè)計規(guī)范中具像化的環(huán)節(jié)是設(shè)計組件化，最早可以追溯到?業(yè)?命時期，福特創(chuàng)造的流?線?產(chǎn)?式。福特將汽?分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極?的提?了?產(chǎn)效率。

根據(jù)資料顯示，T型?是世界第?款?量使?通?零部件，并進??規(guī)模流?線裝配的汽?。這種?式極?地提?了T型??產(chǎn)效率，降低了?產(chǎn)成本。

1914年，福特已經(jīng)可以做到93分鐘?產(chǎn)?輛汽?，?同期其他所有汽??商的?產(chǎn)能?總和也不及于此。

到了1920年代，T型?的價格甚?降到300美元?輛（問世之初T型?的售價僅需850美元，?同期的競爭對?則通常為2000-3000美元?輛）。

原子設(shè)計理論最初來源于化學(xué)領(lǐng)域，這一點從名字可以聽出來。在化學(xué)中，所有的物體都是由原?構(gòu)成，原?組合構(gòu)成分?，分?組合構(gòu)成有機物，最終形成了宇宙萬物。

2013年前端?程師 Brad Forst將此理論運?在界?設(shè)計中，形成?套設(shè)計系統(tǒng)，包含 5 個層?：原?、分?、組織、模板、??。當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴?時，我們就需要制定?套完整的設(shè)計系統(tǒng)，提升設(shè)計和開發(fā)的協(xié)作效率，統(tǒng)?所有設(shè)計師的輸出物。

總之，將設(shè)計拆分成?些基本元素，例如?個按鈕、?個彈窗，再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝，形成最終的產(chǎn)品，這就是原?設(shè)計理論（組件化設(shè)計），區(qū)別于整體設(shè)計制造的?種新的?作流程。

03 后臺設(shè)計系統(tǒng)搭建

① 設(shè)計系統(tǒng)搭建—原子

原?是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計系統(tǒng)的最基礎(chǔ)元素。

在界?中以「元素」的形式存在，例如：顏?、?字、圖標、分割線、間距、圓?、陰影等。

色彩體系

中后臺產(chǎn)品的?彩體系主要分為3類：品牌?、功能?、中性?。

• 品牌色：大型公司往往都會有專屬色號的品牌色，比如阿里橙色、美團黃色和騰訊藍色，以體現(xiàn)產(chǎn)品特性、傳播理念。在界面中主要體現(xiàn)在關(guān)鍵行動點、選中狀態(tài)、重要信息和插畫元素等。
• 功能色：旨在表示某種狀態(tài)提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
• 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。

B端網(wǎng)站體現(xiàn)理性和效率特性，往往會使中性色占據(jù)九成以上，應(yīng)用在背景、邊框、文本和分割線。下圖為顏色定義示例（考慮暗色模式）。

文字體系

B端產(chǎn)品的?字系統(tǒng)設(shè)計?標：增強閱讀體驗、提升信息獲取效率，字體是體系化界?設(shè)計中最基本的構(gòu)成之?。

字體的??、字重、?彩區(qū)分體現(xiàn)界?信息的層級關(guān)系。

• 整體思路：在同?個系統(tǒng)的 UI 設(shè)計中先建?體系化的設(shè)計思路，對主、次、輔助、標題、展示等類別的字體做統(tǒng)?的規(guī)劃，再落地到具體場景中進?微調(diào)，最終確定建?體系化的設(shè)計思路，有助于強化字體落地的?致性。
• 少即是多：在視覺展現(xiàn)上能夠?盡量少的樣式去實現(xiàn)設(shè)計?的。避免毫?意義的使??量字階、顏?、字重強調(diào)視覺重點或?qū)?關(guān)系，提?字體應(yīng)?的性價?，減少不必要的樣式浪費。
• 拉開對?：在需要拉開差距的時候可以嘗試在字階表中跳躍地選擇字體??，會令字階之間產(chǎn)??種微妙的韻律感。

下圖為字階應(yīng)用規(guī)范示意：

陰影、圓角、線條

陰影：在B端界?中，有些特殊的元素會使?到陰影，從陰影中我們可以看出物體距離平?的?度，距離平?越?的物體陰影越?；

圓角：從直?到圓?給?帶來從嚴謹冰冷到柔和親切的?理感受，在B端界? 中，常?2-8px圓?；

線條：分割模塊及輔助定位。

② 后臺設(shè)計系統(tǒng)搭建—分子

在界?中，分?是按照規(guī)律組合起來的元素，如：按鈕、搜索框、選擇器等。

以按鈕為例，?字、?塊、圖標和間距這些抽象的原?產(chǎn)?關(guān)聯(lián)組合成分?：圖標、?字傳達含義；顏?、圓?傳遞特性；間距、尺?定義規(guī)范。

③ 后臺設(shè)計系統(tǒng)搭建—組織

分?+原?組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡?列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計區(qū)等。

④ 后臺設(shè)計系統(tǒng)搭建—模板

由原?+分?+組織構(gòu)成的更復(fù)雜更具拓展性的模塊，構(gòu)成了典型??模板，如列表?、詳情?、異常?、Dashboard等。模板在設(shè)計系統(tǒng)中承載的作?就是保證設(shè)計?案在原型各階段的?致性，專注??底層架構(gòu)，并?具體??。

⑤ 后臺設(shè)計系統(tǒng)搭建—頁面

帶業(yè)務(wù)邏輯的場景案例，如標注場景、權(quán)限管理、詳情設(shè)置等，將??模板填充真實的?字、圖?后形成??，即帶交互邏輯的?保真原型圖，真實內(nèi)容使設(shè)計系統(tǒng)有了“?命” 。

04 Design Token應(yīng)用實踐

雖然通過設(shè)計規(guī)范可以對產(chǎn)研流程提效，但在開發(fā)還原中還是會經(jīng)常遇到?些棘?的問題。

開發(fā)還原準確度難以保證，走查幾輪還有有細節(jié)問題沒有修復(fù)；

領(lǐng)導(dǎo)要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；

設(shè)計一處變更，涉及多個頁面模塊，維護工作量大。

為了解決和優(yōu)化上述的問題，Design Token 應(yīng)運??。它可以解決產(chǎn)品設(shè)計和開發(fā)過程中的細節(jié)、變更和?格?致性的問題，有效提?產(chǎn)研團隊設(shè)計質(zhì)量和協(xié)作效率。

① Design Token介紹

“Token”原本的意思是“令牌，指令”，與 Design 連在?起指“設(shè)計變量”。在?程邏輯中?于?戶身份與服務(wù)器端進?驗證，?在設(shè)計體系中，Design Token 則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過?套符合設(shè)計師、?程師理解的統(tǒng)?的命名規(guī)則，為這些樣式參數(shù)的定義名稱。

Design Token優(yōu)勢

設(shè)計語義更易理解：幫助設(shè)計師和開發(fā)建?統(tǒng)?語?，設(shè)計?案更加?致。從下到上的Design Token命名思路。

主題?膚?鍵替換：主題?膚的替換可以?在兩個維度，?是淺?模式和暗?模式的替換，?是不同品牌?之間的替換。我們可以將不同主題的同?個場景下的顏?使?同?個 Token 命名，達到?鍵換膚的效果適配不同客戶?案。

設(shè)計變更?效維護：替代傳統(tǒng)?作流?鍵替換效果。例如修改二級文本的顏色，傳統(tǒng)工作流需要先修改設(shè)計規(guī)范，修改設(shè)計稿，然后輸出給開發(fā)，開發(fā)逐一更新代碼，完成后提交給設(shè)計師進行走查驗收。而當(dāng)使用Token之后，只需要更新Token參數(shù)，就可以直接導(dǎo)出JSON給開發(fā)，一鍵自動更新。提高效率不止一點點。

設(shè)計效果精準還原：代碼編輯器?動化提示顏?選擇，如不正確則產(chǎn)?報錯。

總結(jié)一下使用Token開發(fā)的優(yōu)勢：

• 設(shè)計語言 更易理解
• 主題皮膚 一鍵替換
• 設(shè)計變更 高效維護
• 設(shè)計成果 精準還原

② Design Token應(yīng)用流程

第一步：提煉token元素；

第二步：定義命名規(guī)則；

第三步：整理Design Token資產(chǎn)表；

第四步：開發(fā)與應(yīng)用。

接下來具體說說如何為Design Token命名，命名方式目前并沒有絕對統(tǒng)一的要求，不過有一定的邏輯規(guī)則，可以由設(shè)計師找前端開發(fā)一起商量出一個都能通俗易懂便于理解的命名規(guī)則，

舉個例子：

1.Token名稱由大到小排序，中間用“-”分隔；

2.Token前綴可自定義添加公司簡稱，如“–el-xx” 、“–ant-xx”、“–td-xx”。

為了更好的統(tǒng)一規(guī)范，應(yīng)用Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。

最后

以上就是從四個方面歸納的B端設(shè)計規(guī)范定義和總結(jié)，希望對你有所幫助！

編輯導(dǎo)語：我們平常會使用很多APP，久而久之我們會發(fā)現(xiàn)一些APP的設(shè)計非常的相似；一個有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對產(chǎn)品的形象也有一定的幫助；本文作者分享了關(guān)于如何提升UI設(shè)計的高級感的方法，我們一起來看一下。

在互聯(lián)網(wǎng)產(chǎn)品日趨成熟的今天，你會發(fā)現(xiàn)所有的App越來越像，似乎是同一套模版設(shè)計出來的產(chǎn)品；而這種普適化的設(shè)計會導(dǎo)致同質(zhì)化嚴重，使得設(shè)計不精致，產(chǎn)品沒有氣質(zhì)和品牌感。

一個App設(shè)計是否精致，是否富有設(shè)計感，在于它的細節(jié)，這就意味著我們在進行設(shè)計的時候，要從細微之處著手，從多方面去鉆研如何創(chuàng)造出打動人心的UI設(shè)計。

本文總結(jié)了12個簡單直觀的提升設(shè)計感的小細節(jié)，一起來學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對UI 文本進行樣式控制的時候，最常見的錯誤莫過于過度依賴字體大小差異來營造對比；單純使用字體大小對比，所營造的對比并不夠，嘗試結(jié)合色彩和字重來營造更好的對比效果。

每種顏色都有一個視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過使用顏色的深淺，為元素賦予不同的重要性。

如果可以的話，你甚至可以采用兩到三種顏色：

• 主要內(nèi)容使用深灰色（諸如標題，但是不要用純黑）；
• 次要內(nèi)容使用灰色（比如商品介紹）；
• 輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）；

類似的，在UI設(shè)計的時候，通常兩種不同的字重足以營造出優(yōu)秀的層次感：

• 大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）；
• 對于需要強調(diào)的文字采用較重的字重（600到700，具體取決于字體）；

▲主標題字重為600，其他標綠點的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因為這一部分字體本身尺寸已經(jīng)較小，低于400會使得可讀性不佳。

如果你依然需要降低字重，那么不妨讓字體色彩更淺一點，或者替換成其他識別度較強、字重相對較小的字體。

灰色文字在無彩/彩色背景下要分開處理：

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯的淡化其視覺效果的做法。

但是在彩色背景下，想要降低和背景色之間的對比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設(shè)計師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長篇內(nèi)容時，大面積的深色粗體字會給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個問題，使文字更容易被識別。

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡；設(shè)計時避免用過多的顏色。如果項目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡單的方式為設(shè)計增加一致性。

三、干凈的陰影

陰影是UI設(shè)計中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時也能增強畫面的視覺層次感。

相比于采用大范圍的擴散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。

陰影不一定是黑色的，還有一種擴算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。

在UI設(shè)計中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會讓人眼花繚亂。

四、個性的圖標設(shè)計

合格的設(shè)計師能夠繪制風(fēng)格統(tǒng)一的圖標，而優(yōu)秀的設(shè)計師能夠創(chuàng)造風(fēng)格獨特的圖標。

我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標設(shè)計，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。

標簽欄作為一個App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計影響著整個產(chǎn)品的視覺風(fēng)格。

通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計樣式（默認灰色，選中填充品牌色），這樣的設(shè)計太普通，太常見了；要想讓標簽欄圖標設(shè)計精致和富有個性，可以豐富每一個選中態(tài)圖標的視覺表現(xiàn)，例如給圖標加上背景和表情，即顯得生動有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標設(shè)計是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會讓人產(chǎn)生輕微的視覺疲勞，同時因其復(fù)雜的結(jié)構(gòu)會增加用戶的認知成本，一般在外賣美食類應(yīng)用中比較常見。

五、Tab的設(shè)計感

Tab是App設(shè)計中最常見的控件之一，它源自Material Design的設(shè)計規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進行設(shè)計，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。

在視覺表現(xiàn)形式上，Tab和標簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計較為簡單，通常是使用一組文字標簽，通過顏色或在標簽下加上小長條來區(qū)分兩者的狀態(tài)；因為它簡單，卻越難設(shè)計出彩，要發(fā)揮極大的設(shè)計想象力，跳脫出設(shè)計規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對比，一個富有設(shè)計感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個絕佳的來源。

從品牌形象中提取具有獨特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計上，既讓界面視覺獨一無二，又進一步強化了用戶對品牌形象的認知。

六、無框設(shè)計 去繁從簡

在UI設(shè)計中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個元素的好辦法，但是它不是唯一的方法；使用過多會讓整個布局的設(shè)計感降低，或多或少都會干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。

我們可以通過以下幾個方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

1）使用陰影

陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會顯得突兀，不會分散用戶的注意力，讓內(nèi)容更聚焦。

2）使用不同的背景色來區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對他們進行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因為你根本不需要它。

3）增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了，通過留白和間距來實現(xiàn)元素分組是UI設(shè)計中的常用手法。

七、統(tǒng)一設(shè)計元素

在App中的每一個界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計樣式。

通常個人中心的標簽欄圖標是一個人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

如果圖形擁有獨特的外觀，如橢圓矩形，也可以作為視覺符號的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個界面就被統(tǒng)一的設(shè)計元素聯(lián)系起來了，給用戶始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識。

雖然默認字體可以滿足大多數(shù)App 的設(shè)計需求，但會出現(xiàn)一個問題就是——系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運動類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢上就變?nèi)趿撕芏唷?/p>

九、第三方圖標風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊的時間成本。

通常是在注冊登陸頁的底部展示第三方圖標入口，這也是設(shè)計師最常忽略的內(nèi)容，往往是直接將第三方圖標調(diào)整一致大小和擺放整齊位置，沒有針對它們再設(shè)計；一個設(shè)計精致的App不應(yīng)漏過任何的細節(jié)，我們可以以自家App的圖標風(fēng)格為依據(jù)，對第三方圖標進行優(yōu)化設(shè)計。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計樣式；為了減少復(fù)雜圖片背景對文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級和富有設(shè)計感。

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會瞬間拉低App的質(zhì)感。

在App設(shè)計中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會變得美觀、整潔。

十二、卡片式設(shè)計

現(xiàn)在的UI界面設(shè)計中，卡片式設(shè)計已經(jīng)是一種非常常見的設(shè)計形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實現(xiàn)復(fù)雜內(nèi)容的簡化處理，提高空間利用率；同時卡片式設(shè)計通常很依賴視覺元素，很強的視覺元素正是卡片式設(shè)計的一種優(yōu)勢，也是提升設(shè)計品質(zhì)感的良方。

作者：Fyin印跡；公眾號：印跡拾光

本文由 @Fyin印跡 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進群請加藍小助微信ben_lanlan

Bento UI其實流行已經(jīng)有一段時間了，但是近一兩年來才展現(xiàn)出發(fā)展的勢頭，Bento UI的體驗和用戶友好性在設(shè)計中的價值不斷被認識與驗證。本文就Bento UI設(shè)計風(fēng)格進行分析總結(jié)，希望能給你一些啟發(fā)。

Bento UI的流行已經(jīng)有一段時間，但直到最近一兩年，它才真正展現(xiàn)出強勁的發(fā)展勢頭。這是因為設(shè)計師們逐漸認識到，Bento UI的體驗和用戶友好性在設(shè)計中的價值。

關(guān)于Bento UI的起源存在一些爭議，就像許多設(shè)計趨勢一樣。有人認為Bento UI的成功應(yīng)歸功于蘋果公司，因為蘋果在其UI元素中采用了類似的風(fēng)格。另一些人則指出，微軟的Metro UI實際上就是Bento UI的一種體現(xiàn)。不管它的來源如何，毋庸置疑，Bento UI正變得越來越受歡迎。隨著其使用量的增加，它作為一種UI風(fēng)格的可靠性也在不斷得到驗證。

一、什么是Bento UI ？

Bento UI 的靈感來自便當(dāng)盒（一種精心布置且視覺上吸引人的日本料理）概念，提供了令人耳目一新的設(shè)計。它不僅僅是一個設(shè)計框架，而是一種兼顧用戶需求和視覺吸引力的整體理念。這篇文章讓我?guī)闵钊胙芯恳幌?Bento UI 如何實現(xiàn)實用性與美觀的相互融合。

二、Bento UI設(shè)計有什么優(yōu)點 ？

Bento UI設(shè)計的優(yōu)點多種多樣，它將實用性和美學(xué)完美融合，為用戶帶來出色的體驗。

B 端產(chǎn)品經(jīng)理如何快速成長？

產(chǎn)品與業(yè)務(wù)架構(gòu)主要是將整個業(yè)務(wù)工作流進行分層，梳理，然后抽象出一個個需求，將業(yè)務(wù)需求與產(chǎn)品合情合理的映射起來，最終使業(yè)務(wù)數(shù)據(jù)在產(chǎn)品中流動，執(zhí)行，記錄，使用。

查看詳情 >

1. 強調(diào)模塊化和可重用性： Bento UI將界面元素拆分為模塊化的組件，使得設(shè)計師可以輕松地組合、調(diào)整和重用這些組件，從而提高了設(shè)計效率和一致性。

2. 簡潔而美觀的外觀： Bento UI注重簡約、現(xiàn)代和美學(xué)的結(jié)合，帶來干凈、清晰且視覺吸引人的界面。這有助于提升用戶的第一印象，增加用戶停留時間和參與度。

3. 良好的用戶體驗： Bento UI注重用戶導(dǎo)向，通過清晰的布局、直觀的導(dǎo)航和有趣的交互元素，為用戶創(chuàng)造出愉悅和流暢的瀏覽體驗。

4. 強化品牌形象： Bento UI可以根據(jù)品牌的風(fēng)格和價值觀進行定制，從而增強品牌在用戶心中的形象和認知。一致的設(shè)計元素有助于塑造品牌的獨特性。

5. 強調(diào)交互和動畫： Bento UI強調(diào)微交互和動畫效果，為用戶創(chuàng)造出更加生動和有趣的互動體驗。這不僅吸引用戶的注意，還增強了用戶的參與感。

6. 提升移動設(shè)備體驗： Bento UI通常是響應(yīng)式的，可以自適應(yīng)不同的屏幕尺寸和設(shè)備類型。這為移動用戶提供了更好的體驗，無論是在手機、平板還是桌面電腦上。

三、我該如何在我的項目中使用Bento UI？

要設(shè)計出成功的Bento UI，首先需要理解其核心原則。簡約、模塊化和活力交互是Bento UI的靈魂。簡約的設(shè)計風(fēng)格能夠使界面更加清晰明了，而模塊化的組件則讓設(shè)計師能夠靈活構(gòu)建頁面，快速滿足不同需求。活力交互，包括動畫效果和微交互，能夠增強用戶與界面的互動感，提升用戶體驗。

1. 構(gòu)建清晰的布局

在Bento UI中，清晰的布局是至關(guān)重要的。界面元素應(yīng)該有明確的排列，避免過于擁擠和混亂。通過合理的分區(qū)和對齊，可以將信息有序地呈現(xiàn)給用戶，使其能夠快速獲取所需信息。此外，清晰的布局還能夠增強用戶的舒適感，使其更樂意與界面互動。

2. 運用鮮明的顏色和圖標

Bento UI倡導(dǎo)使用鮮明的顏色和獨特的圖標設(shè)計。色彩可以傳達情感和品牌特點，因此選擇適合項目風(fēng)格的顏色是至關(guān)重要的。同時，圖標作為界面的視覺元素，能夠直觀地傳達信息，提高用戶的使用效率。確保顏色和圖標的使用既美觀又有意義，能夠為用戶帶來更好的視覺體驗。

3. 創(chuàng)造有趣的交互效果

Bento UI的動畫效果和微交互是設(shè)計中的亮點之一。動畫可以增強用戶與界面的互動感，使用戶感受到界面的活力。微交互則能夠提供反饋，引導(dǎo)用戶完成操作。設(shè)計師可以巧妙地運用過渡效果、淡入淡出和其他動畫元素，使界面變得更加生動有趣。

4. 保持一致性和用戶友好性

在整個設(shè)計過程中，保持一致性和用戶友好性至關(guān)重要。界面的風(fēng)格、字體和元素應(yīng)該保持統(tǒng)一，以確保用戶在瀏覽不同頁面時能夠感受到一致的視覺效果。另外，界面的導(dǎo)航和操作也應(yīng)該簡單明了，讓用戶能夠輕松找到所需內(nèi)容。

一些案例：

iPhone 14 Pro介紹頁面中，您將看到以這種方式呈現(xiàn)的高級功能介紹，并通??過多種視覺處理來保持有趣。雖然有不同的視覺處理，但由于使用大小和漸變文本有效地引導(dǎo)用戶的眼睛，內(nèi)容不會相互沖突。

Bolt對每個圖塊使用了更加一致的視覺方法，以使內(nèi)容更易于瀏覽。這對于傳達功能并引導(dǎo)他們在最后查看更多內(nèi)容非常有用！

Linear的設(shè)計師也采用了Bento UI的設(shè)計風(fēng)格，我個人很喜歡他們這樣的設(shè)計。

Iconwerk使用Bento UI風(fēng)格來展示他們最好的圖標設(shè)計。每個內(nèi)容框都保持得非常小，這樣當(dāng)它們?nèi)糠旁谝黄饡r，就不會感到擁擠。
Traf使用Bento UI以時尚的深色主題設(shè)計來布局他的作品集作品。

四、我應(yīng)該為我的項目使用Bento UI嗎？

是否選擇應(yīng)用Bento UI取決于您的項目需求和目標。如果您追求引人入勝的界面、活力的交互和用戶友好性，Bento UI可能是一個理想的選擇。特別是對于品牌展示、產(chǎn)品推廣和互動性強的網(wǎng)頁，Bento UI能夠為您的項目增添獨特的魅力和吸引力。然而，設(shè)計師應(yīng)該根據(jù)項目特點，靈活運用Bento UI的元素，以確保最終的設(shè)計能夠滿足用戶需求并達到預(yù)期效果。

但是Bento UI并非適用于所有項目。它最適合于擁有簡潔層次結(jié)構(gòu)的項目，因此，如果您的項目層次結(jié)構(gòu)較為復(fù)雜，Bento UI可能并不適合。不過，如果您的項目存在復(fù)雜層次結(jié)構(gòu)，或許是時候改變這一現(xiàn)狀了。

Bento UI的設(shè)計和感覺極具現(xiàn)代氛圍，我預(yù)測它將在未來一段時間內(nèi)持續(xù)受歡迎。隨著蘋果等專業(yè)設(shè)計團隊的使用還有諸如Vision Pro等新技術(shù)的出現(xiàn)，它甚至可能發(fā)展成我們目前尚未能夠預(yù)見的新形態(tài)。

結(jié)語

Bento UI是一種引人注目的設(shè)計風(fēng)格，簡約美學(xué)、動感交互和模塊化創(chuàng)造力為設(shè)計帶來了新的可能性。作為一種新興的設(shè)計趨勢，Bento UI正在成為越來越多設(shè)計師和品牌的選擇。

通過將Bento UI的理念融入設(shè)計中，我們能夠為用戶創(chuàng)造出令人難忘的體驗，將品牌價值傳達得更加生動而深刻，從而實現(xiàn)更好的用戶參與和品牌傳播效果。