AI 行業(yè)的爆發(fā)始于2022年 ChatGPT 和 Midjouney 的發(fā)布，到現(xiàn)在已經(jīng)快4年了，整個發(fā)展過程用突飛猛進、日新月異形容一點都不過分。

但不管它過去還是現(xiàn)在，發(fā)展得有多迅猛，都依舊處于行業(yè)早期的開荒和發(fā)展階段，離真正成熟的理想形態(tài)還有很長的一段路要走，這是我們首先要達成的共識。

而之所以有這樣的結(jié)論，原因就是 AI 的發(fā)展速度是超過現(xiàn)實世界匹配它的速度的，這造成了一種經(jīng)濟和機會成本上的巨大阻力。

簡單來說，我們可以把 AI 技術(shù)的應(yīng)用拆分成上、中、下游三個層，上層是 AI 的核心，主要是算法、大模型，中游是負(fù)責(zé)運行AI模型的硬件和支撐，即 AI 芯片、光模塊 CPO、高速內(nèi)存 HBM、服務(wù)器液冷、特高壓電路等，下游即 AI 具體的應(yīng)用工具，包括 AI 軟件、硬件、智能體等。

這是一個非常龐大且復(fù)雜的產(chǎn)業(yè)鏈，它們之間是需要相互耦合，才能順利應(yīng)用到具體的使用場景中。

簡單來說，就是 AI 模型廠商需要根據(jù)技術(shù)路線和成本選擇硬件并購買算力中心，以及消耗海量的電力來訓(xùn)練自己的模型并維持它的正常運轉(zhuǎn)。雖然這些背后的基建作為普通用戶可能感受不深，但頭部廠商的競爭已經(jīng)到了白熱化的階段。

比如大模型的開發(fā)必然要關(guān)注硬件規(guī)格和架構(gòu)，大洋彼岸除了英偉達外，還陸續(xù)推出了谷歌 TPU、微軟 Maia、英特爾 Gaudi 等芯片，它們代表了不同的技術(shù)方案，應(yīng)用在了不同的模型上。

而因為貿(mào)易和地緣政治的因素，國內(nèi)是無法進口這些高端芯片，所以我們只能自研生產(chǎn)以滿足國產(chǎn)大模型的需求。如阿里在自研并應(yīng)用自家的真武系列芯片， DeepSeek 近期更新緩慢的重要原因就是因為要適配華為的昇騰系列芯片等。

之所以要提這點，是因為 AI 大模型的發(fā)展也適用馬太效應(yīng)，贏家通吃。在接近性能和水平下誰家應(yīng)用的算力、電力成本最低，誰就具備了最大的優(yōu)勢。

而每家大模型廠商都要面臨技術(shù)路線的選擇，并投入海量的成本孤注一擲做基建，很難走回頭路。這種發(fā)展路徑注定會讓行業(yè)發(fā)展充滿波折和動蕩，會有很多企業(yè)倒在半路上，連帶著它們提供的產(chǎn)品和服務(wù)一起逐漸消亡。

比如文生圖的 OG Midjounery，已經(jīng)無法跟上大廠的技術(shù)和訓(xùn)練規(guī)模掉隊，在今天已經(jīng)無人問津，而一年多前網(wǎng)上還到處都是用 MJ 生成UI界面設(shè)計，UI 設(shè)計師要下崗的帖子。

強如 OpenAI，也要應(yīng)對 Google、X AI、Anthropic、Seedance 的沖擊和成本管理失控（GPT5 訓(xùn)練量需要消耗一個中等規(guī)模城市1年用電量），也在近期放棄旗下的文生視頻工具 Sora。

模型和硬件端都充滿了巨大的不確定性，因為技術(shù)的發(fā)展是需要“試”出來的，總有前浪會被拍死在沙灘上。至于誰會被拍死在沙灘上就不是站在今天的視角上能回答的。

再回到我們今天的主角 Anthropic，這是一家非常務(wù)實的 AI 公司，專注于開發(fā)有商業(yè)應(yīng)用場景的大模型，是寫作、編程等領(lǐng)域中的最佳選擇。與之相對的則是類似 ChatGPT、Gemini 這類全能多模態(tài)大模型。

因為其模型可用性極高，所以從去年開始付費用戶量暴增，在今年初預(yù)估年化收益已經(jīng)超過300億美元，不僅用戶付費率遠高于 OpenAI，且運行成本也遠比它低。

而這家公司想要年底要上市（估值8000億美金），產(chǎn)品矩陣的拓展就成為非常重要的資本策略。通過發(fā)布 Claude Design，能很好的和 Claude Code 實現(xiàn)聯(lián)動，完成使用 AI 開發(fā)軟件的閉環(huán)。

至于現(xiàn)階段 Claude Design 夠不夠用不重要，畢竟故事和邏輯是成立的，作為初版它也有后續(xù)升級迭代和優(yōu)化的空間。在我們目前的試用中，它的生成效果也就那樣，但消耗的 Token 量（你最好確保自己有個足夠鼓的錢包）……

Claude Design 有新上市的光環(huán)風(fēng)頭正盛，那是否還記發(fā)布也還不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。

再往前是否還記得使用 StableDiffusion 訓(xùn)練 Lora 和 Checkpoint 的工作流？

工具一直在更新，即使今天還很粗糙。但用發(fā)展的眼光看問題的話，終有一天它生成的質(zhì)量會足夠高足夠智能足夠可控，甚至通過腦機接口 BMI 實現(xiàn)所想即所得的水平（又到了做夢的時候）。

但是，那天是什么時候？

以及，和你現(xiàn)在設(shè)計的界面有什么關(guān)系？

作為設(shè)計師一定要搞清楚的邏輯，就是 AI 生成界面和圖像的過程，只是一種工具的發(fā)展和進步，提升了設(shè)計師的設(shè)計效率。就像人類發(fā)明了電腦和軟件，取代了尺規(guī)作圖，同樣也大幅度降低了設(shè)計的效率和成本，但設(shè)計師這個崗位并沒有消失。

因為使用工具的人之間的差異，會直接影響最終的輸出效果，就像用同一個 AI 生成工具你可能就是做不出網(wǎng)上高贊帖子的案例，都用美圖秀秀不用 PS 去 P 圖你也 P 不過有一定專業(yè)積累的攝影師。

而且任何工具使用都有門檻，就一個簡單的 Claude Design、Google Stitch 安裝和使用都需要學(xué)習(xí)和適應(yīng)，生成結(jié)果還要做大量的調(diào)節(jié)和校準(zhǔn)，這些就不是工作量，老板和產(chǎn)品經(jīng)理也一定能閑得每天學(xué)習(xí)新工具并且直接自己干？

我相信有很多公司現(xiàn)在都很熱衷于擁抱 AI，強行推進 AI 的工作流，從企業(yè)戰(zhàn)略和發(fā)展的角度來講是能夠理解的，但在實際執(zhí)行層面上卻不會像想的那么美好。其中最大的問題就是前面提到的整個產(chǎn)業(yè)的不確定性，產(chǎn)品還都有各自的局限。

每個團隊在搭建 AI 工作流的時候需要做技術(shù)的選型，以及圍繞自己的實際生產(chǎn)場景優(yōu)化工具的使用方式。往往為了一個簡單的工作結(jié)果就要耗費大量的精力去搭建工作流，而這個工作流很可能是一次性的，因為之后的工作場景發(fā)生改變這套工作流就用不了了。

有些同學(xué)可能心態(tài)好點覺得這種過程可以收獲寶貴的經(jīng)驗，但最不幸的，就是工具的升級和更新（甚至關(guān)閉）可以直接顛覆掉原來的做法，讓原先的成果毫無意義。

在我朋友中普遍得到的反饋，就是在稍微復(fù)雜的專業(yè)場景中，強行適配 AI 的結(jié)果往往只有增加工作量，原先目標(biāo)的降本增效，實際導(dǎo)致了更長的工作時間和更晚下班，從去年到現(xiàn)在在不同 AI 工具中做研究疲于奔命。

換個角度思考，其實就是工作過程變成今天用 PS，明天用 Figma，后天用 Excel 或 PPT 進行設(shè)計，每一陣子換個工具設(shè)計相同的東西，而它們又不能解決設(shè)計過程中最復(fù)雜的決策部分。

也就是我們一直在使用充滿不確定性的工具去尋求相對確定的結(jié)果。

這就是今天 AI 工具在 UI 行業(yè)中應(yīng)用的真相，不管我們怎么用邏輯還是格局去判斷未來 AI 要實現(xiàn)一切，但起碼不是今天和最近，就是變得更強了，也依舊需要有人去操作和控制。

而我們現(xiàn)在要做的是關(guān)注最終輸出的結(jié)果，而不是和別人炫耀 Figma 用的好，還是 Sketch、XD、即時、Pixso 用的好。等到市場競爭格局基本確認(rèn)，通用的工具也普及以后，再去掌握和學(xué)習(xí)也不會低人一等（門檻不會高到哪里去）。

轉(zhuǎn)載自 優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

談?wù)?AI 就繞不開大模型，它是 AI 技術(shù)應(yīng)用的核心。

簡單解釋 AI 大模型，就是一個通過特定方法和大量數(shù)據(jù)訓(xùn)練出來的 “自主化程序”，這個程序可以根據(jù)用戶輸入的指令自己做出 “判斷和思考” 后再進行回復(fù)。

傳統(tǒng)程序雖然也可以執(zhí)行用戶的指令，但回復(fù)的內(nèi)容和方式不會超出一開始預(yù)設(shè)的范圍，非常有限。

而 AI 大模型則大大拓展了這個邊界，我們不用提前預(yù)設(shè)各種條件和邏輯，它就會自己去理解問題再決定給出什么結(jié)果。

當(dāng)然，這個邊界只是不能生成圖片(截止到2026年初)。而 Google 開發(fā)的 Gemini 大模型則是多模態(tài)模型，可以生成圖片和視頻等內(nèi)容。

不同模型會有不同的表現(xiàn)和優(yōu)劣，但因為大模型的開發(fā)需要尖端的技術(shù)和龐大的規(guī)模（訓(xùn)練），門檻極高，所以市面上主流的大模型數(shù)量并不多，可以簡單分為國內(nèi)和國外兩個陣營。

國外的主流大模型包括 OpenAi 開發(fā)的 ChatGPT，Google 開發(fā)的 Gemini，Anthropic 開發(fā)的 Claude，xAI 的 Grok 等。

國內(nèi)的主流大模型則包括字節(jié)開發(fā)的豆包，阿里開發(fā)的千問 Qwen，深度求索開發(fā)的 Deepseek，月之暗面開發(fā)的 Kimi 等。

因為前面說過大模型的局限性，所以為了應(yīng)對不同的應(yīng)用場景，團隊就會將它們裂變出不同的版本。比如千問既有 Max 語言大模型，還有 Omni 全模態(tài)（文字、圖片、音頻、視頻）大模型，針對處理問題的難易度又分成了 Max、Plus、Flash、Lite 等版本。

完整的大模型體積和參數(shù)都非常龐大，需要部署到專屬的算力中心，并通過云服務(wù)來實現(xiàn)用戶的訪問和使用。也就是需要聯(lián)網(wǎng)使用，但因為國內(nèi)網(wǎng)絡(luò)服務(wù)的限制（不可抗力），我們無法通過國內(nèi)電信訪問國外的主流大模型。

雖然說國內(nèi)大模型的水平在這幾年突飛猛進，但離國外的大模型還有一定的差距，在實際工作場景中多數(shù)應(yīng)用的也是國外大模型，所以訪問它們就需要大家自己發(fā)揮主觀能動性解決了。

順便再解釋一個基礎(chǔ)的問題，大模型除了遠程訪問以外，也可以在本地進行安裝。部分團隊（如千問）會在網(wǎng)上開源自己的大模型供其它人下載和使用，當(dāng)我們下載到本地后就可以用 GPU 來運行它。但因為大模型對性能的要求極高（旗艦顯卡起步），所以本地運行的效果要大打折扣。

而一些企業(yè)內(nèi)部或行業(yè)專屬的大模型，往往都是使用這些開源大模型進行二次訓(xùn)練和調(diào)試后的結(jié)果。還有一些針對特定硬件（如手機、眼鏡）和特殊應(yīng)用場景開發(fā)的小模型，就暫時不在我們的討論范圍之內(nèi)。

三、AI 相關(guān)工具的認(rèn)識

前面講過大模型可以類比成一種 “程序”，且它還是后端服務(wù)器上運行的程序。想要對這個程序?qū)崿F(xiàn)命令的輸入并返回它處理的結(jié)果，就需要應(yīng)用前端的工具來實現(xiàn)。

比如我們打開豆包的官網(wǎng)，就可以使用這個網(wǎng)頁對豆包大模型提出問題和要求，然后網(wǎng)頁上就會返回它處理后的結(jié)果。這個網(wǎng)頁就是使用大模型的工具，而這只是 AI 工具的其中一種形式，還可以是本地應(yīng)用程序、手機 APP、小程序、硬件定制系統(tǒng)等等。

我們大多數(shù)人開始接觸 AI 大模型，都是從這些官方的工具開始，它們最基本的功能就是根據(jù)指令返回文字或圖片信息，我們會把它們當(dāng)成是一種可以對話的人工智能客服。

但實際上它們可以發(fā)揮的作用遠不止于此，比如幫你整理本地的文件夾清理重復(fù)的文件，幫你自動修圖并完成動態(tài)相片的剪輯，幫你編寫程序并自己運行和檢測等等。想要實現(xiàn)對話以外的其它功能，就需要借助特定的工具才能實現(xiàn)。

所以除了最基礎(chǔ)的對話工具外，行業(yè)還衍生出了很多激發(fā)大模型潛力的 AI 工具。它們可以借助大模型完成程序開發(fā)、視頻剪輯、操作托管、熱點整理、消息推送等等。

到這里我們就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具體表現(xiàn)和應(yīng)用形式。

我們更進一步認(rèn)識 AI 工具，就可以把AI工具分成官方工具和第三方工具兩個種類。

官方工具就是 OpenAI、Google 等大模型企業(yè)自己開發(fā)并綁定自家大模型的產(chǎn)品，而第三方工具則是其它團隊開發(fā)，再接入到大模型進行使用的工具。

比如本地聊天機器人 Cherry Studio，它本身只是個簡單的聊天對話工具，可以自己創(chuàng)建對話角色/助手，但需要接入大模型以后才能進行對話。還有著名的AI編程工具 Cusror，只有接入大模型以后，它才可以實現(xiàn) AI 編程和代碼管理。還有前陣子火遍全球的龍蝦 Openclaw，也只是個本地工具，需要接入大模型后才能識別本地的文件和執(zhí)行命令。

官方能提供的 AI 工具與服務(wù)往往很有限，所以在真實項目流程中，我們就會混合使用多種工具來完成工作。就像以前做一套項目除了用 Figma以外，還要結(jié)合使用 Adobe PS、AI、C4D、AE 等軟件。

而第三方工具和官方不同的是，官方工具默認(rèn)連接自家的大模型，用戶直接登錄就能使用。而第三方工具要接入大模型，就需要進行額外的配置，也就是添加大模型的 —— API。

API 就是接口，是前端工具連接后端服務(wù)器的通道，而這個通道默認(rèn)是上鎖的，還需要提供對應(yīng)的密鑰（API Key）才能正常訪問。

部分工具會自己接入各大模型的 API，用戶只能選擇它提供的模型，并只需要對這個工具進行付費即可。

另一部分工具則需要用戶自己選擇模型和配置 API，需要我們訪問大模型的 API 開放平臺進行申請，然后再將它們生成的 API Key 填入到工具中完成連接。

API Key 就像是一個電話號碼，當(dāng)我們申請完并進行使用，就會產(chǎn)生一定的 “流量”，而 AI 產(chǎn)生的流量用專業(yè)術(shù)語形容叫詞元 Token。

使用 API 完成的任意 AI 服務(wù)，都會消耗 Token，且因為 AI 的計算成本極高，所以主流大模型都會針對 Token 消耗量進行收費。就像電信運營商一樣，既有包月服務(wù)附帶一部分流量，超出部分還要按量計費。

在實際的 AI 工具使用過程中，Token 的消耗是極其巨大的，往往會造成沉重的成本，而這個市場也遵循一分錢一分貨的真理，越好的大模型價格就越貴。以最適合編程的大模型 Claude Opus 為例， 一個程序員高頻使用消耗的 Token 賬單可以從數(shù)千到數(shù)萬元不等。所以我們也會從性價比的角度出發(fā)，來搭配不同的模型進行使用。

總結(jié)我們應(yīng)用 AI 的本質(zhì)，就是通過工具來操作大模型。而工具的作用不同，大模型本身的特性和價格也不同，就導(dǎo)致我們在面對一個復(fù)雜的任務(wù)時，需要選擇多種 AI 工具和不同大模型來實現(xiàn)。

學(xué)習(xí)使用 AI，和傳統(tǒng)的單一軟件教學(xué)不同，不是只學(xué)會某個工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通過組合它們來實現(xiàn)自己目標(biāo)的方式。這不是設(shè)計或產(chǎn)品思維，而是工程思維的具體應(yīng)用。

轉(zhuǎn)載自 優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

做UI/UX設(shè)計的同學(xué)幾乎每天都要和切換類組件打交道，但很多人總會在開關(guān)、復(fù)選框、單選按鈕之間踩坑——要么用錯場景，要么給用戶造成認(rèn)知混淆，甚至引發(fā)操作失誤。

蘋果HIG (人機界面指南) 里明確把開關(guān)、復(fù)選框、單選按鈕這三類，都?xì)w為「切換開關(guān)」組件。它們的核心共性是讓用戶在對立的狀態(tài)間做選擇，通過差異化的視覺形態(tài)清晰區(qū)分選中/未選中的狀態(tài)。

一、開關(guān)（Switch）

開關(guān)是用來瞬間切換單個功能/設(shè)置的開啟/關(guān)閉狀態(tài)的組件，一次只能控制一個設(shè)置的開關(guān)，工作邏輯和我們家里的物理電燈開關(guān)完全一致，能讓用戶一眼看清當(dāng)前的生效狀態(tài)。

1. 開關(guān)核心結(jié)構(gòu)

開關(guān)的結(jié)構(gòu)非常簡潔，核心分為3個部分：

1. 軌道（背景）：開關(guān)的背景區(qū)域，也是手柄滑動的路徑，通常會用顏色差異區(qū)分開/關(guān)狀態(tài)，直觀告訴用戶當(dāng)前是否激活
2. 手柄：用戶可以點擊、拖動的可交互按鈕部分，手柄上可添加對勾、叉號、圓圈等輔助圖標(biāo)
3. 圖標(biāo)（可選）：用來強化狀態(tài)認(rèn)知的輔助元素

2. 開關(guān)使用規(guī)范

如果要添加輔助圖標(biāo)，必須選表意清晰、強二元對立的樣式，千萬別用含義模糊、沒有明確正反屬性的圖標(biāo)（比如月亮、編輯圖標(biāo)），用戶沒法一眼對應(yīng)開/關(guān)狀態(tài)。

開關(guān)的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認(rèn)按鈕，切換狀態(tài)時，可配合手柄尺寸的微動效強化操作反饋。

開關(guān)必須和描述控制功能的標(biāo)簽搭配使用，標(biāo)簽要簡潔直白，不要把文字放到開關(guān)內(nèi)部。這樣會壓縮視覺空間，還會破壞組件通用性，增加用戶識別成本。

二、復(fù)選框（Checkbox）

復(fù)選框的核心定位，是支持用戶對一組關(guān)聯(lián)選項，做單項或多項的選中/取消操作。

記住一個核心原則：當(dāng)用戶可以在一個列表里選擇多個選項時就用復(fù)選框，不用開關(guān)或單選按鈕。單選按鈕的語義是「請選其中一個」，而復(fù)選框的語義是「可以選多個，也可以全不選」，二者的底層邏輯不同。

1. 復(fù)選框核心結(jié)構(gòu)

復(fù)選框的結(jié)構(gòu)清晰，核心就是選擇容器+選中狀態(tài)圖標(biāo)，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結(jié)果。

2. 復(fù)選框使用規(guī)范

如果選項列表較長，建議添加「全選父復(fù)選框」提升操作效率，它的交互邏輯有明確的行業(yè)規(guī)范：

1. 父復(fù)選框勾選，所有子復(fù)選框自動全部勾選；
2. 父復(fù)選框取消勾選，所有子復(fù)選框自動全部取消勾選；
3. 子復(fù)選框僅部分被勾選時，父復(fù)選框需顯示「半選（不確定）」?fàn)顟B(tài)，點擊半選的父復(fù)選框，會自動全選所有子項。

   

處理一組有關(guān)聯(lián)的多選項時優(yōu)先用復(fù)選框，而非一堆獨立的開關(guān)。

一方面，復(fù)選框能天然傳遞「選項之間互相關(guān)聯(lián)」的語義，另一方面，它比開關(guān)占用的視覺空間更小，頁面會更整潔有序。

三、單選按鈕（Radio Button）

單選按鈕的核心是互斥單選。在一組選項里，用戶有且只能選擇一個，選中新選項后之前選中的選項會自動取消。

它的語義非常明確：這一組選項里，「你必須、只能選一個」和復(fù)選框的「可多選、可全不選」形成了清晰的邊界。

1. 單選按鈕核心結(jié)構(gòu)

單選按鈕的結(jié)構(gòu)核心是選中/未選中的狀態(tài)圖標(biāo)+對應(yīng)的選項標(biāo)簽。行業(yè)通用的視覺規(guī)范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。

2. 單選按鈕使用規(guī)范

不能打破互斥單選的核心邏輯，更不能讓單選按鈕出現(xiàn)布局重疊，否則會完全顛覆用戶的固有認(rèn)知，造成操作混亂。

如果選項數(shù)量較多、屏幕空間有限，可用下拉菜單替代單選按鈕。

但要注意：下拉菜單需要用戶多一步點擊展開的操作，會增加交互成本，也沒法讓用戶一眼看到全量選項，降低認(rèn)知效率。因此選項較少時，優(yōu)先用單選按鈕。

單選按鈕優(yōu)先垂直排列，不建議水平排列。

垂直排列時每個選項的圖標(biāo)和標(biāo)簽對應(yīng)關(guān)系更清晰，用戶不會看錯；水平排列不僅容易讓頁面擁擠、可讀性下降，還會破壞布局一致性，在響應(yīng)式適配中也更容易出問題。

四、一張表搞懂：三者到底怎么選？

前面講了每個組件的細(xì)節(jié)，這里給大家整理了最簡使用規(guī)則，設(shè)計時直接對照即可。

開關(guān)、復(fù)選框、單選按鈕，都是設(shè)計里最基礎(chǔ)、最常用的組件。設(shè)計時要先看場景、定語義，再選對應(yīng)的組件，而不是憑感覺、看顏值隨便亂用。

當(dāng)然，我們也會看到一些特殊的設(shè)計案例，比如iOS在深色模式的選擇里，用了圓形復(fù)選框，和我們今天說的常規(guī)用法不一樣。這種情況，要么是為了整個系統(tǒng)的設(shè)計語言統(tǒng)一，要么是有特殊的產(chǎn)品考量，不建議盲目照搬。對于設(shè)計師來說，先搞懂這些基礎(chǔ)組件的用法、可用性底層邏輯，才是做好設(shè)計的根基！

轉(zhuǎn)載自 優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

大家一定經(jīng)常聽說 UI 設(shè)計師需要具備產(chǎn)品思維，但又不知道產(chǎn)品思維具體是什么，尤其是很多同學(xué)只把產(chǎn)品思維當(dāng)成是產(chǎn)品經(jīng)理做需求的能力。

蘭亭妙微UI設(shè)計公司：今天我們的主題就是分享產(chǎn)品思維的具體思考方式和應(yīng)用

產(chǎn)品思維一句話總結(jié)，就是——通過規(guī)劃產(chǎn)品形式來解決產(chǎn)品問題的思考模式。

這里我們先明確 “產(chǎn)品問題” 是什么，它是一個非常寬泛的概念，可以說所有產(chǎn)品相關(guān)的問題都可以是產(chǎn)品問題，包括但不局限于功能、交互、體驗、視覺、技術(shù)、服務(wù)等領(lǐng)域。

在產(chǎn)品的研發(fā)和運營過程中，產(chǎn)品團隊總會發(fā)現(xiàn)和積累出各式各樣的問題，比如功能太簡陋不能滿足用戶需求、交互太復(fù)雜用戶用不懂、邏輯太復(fù)雜技術(shù)實現(xiàn)不出來等等。這些問題當(dāng)然需要被解決，而解決的方式有兩種，一種就是直接使用相關(guān)領(lǐng)域的 “技術(shù)方案” 解決，另一種就是提供新的 “產(chǎn)品方案” 來解決。

這里技術(shù)方案是泛指，指產(chǎn)品以外的其它類崗位使用自身專業(yè)技能來解決問題的方案。比如用戶覺得頁面信息混亂，設(shè)計師通過布局、尺寸、間距、色彩的視覺調(diào)整，就能解決這個問題。或者某些交互設(shè)計需要非常復(fù)雜的編程方案，前端自己通過鉆研技術(shù)，來實現(xiàn)這個效果。

比如下面這些就是純粹的視覺優(yōu)化方案：

產(chǎn)品方案則是指通過制定或調(diào)整產(chǎn)品的功能、服務(wù)、表現(xiàn)形式，來解決相關(guān)的問題。比如上面覺得信息混亂，不再是改設(shè)計，而是直接優(yōu)化和增減字段信息。交互設(shè)計開發(fā)起來太難，那就直接調(diào)整產(chǎn)品功能，分拆交互步驟降低開發(fā)難度。

比如下面這個就是對產(chǎn)品的形式做出了一定的調(diào)整：

兩種方案各有優(yōu)劣，但在真實項目中，產(chǎn)品是先于設(shè)計和開發(fā)的，好的產(chǎn)品方案不僅能提高產(chǎn)品的實際表現(xiàn)，同時還可以大大降低技術(shù)實現(xiàn)的成本。所以在解決問題時，團隊必然會傾向先使用產(chǎn)品思維來創(chuàng)建產(chǎn)品方案，然后再去實施。

總結(jié)起來，產(chǎn)品方案就是涉及對產(chǎn)品本身的調(diào)整方案。原則上，這種方案是由產(chǎn)品經(jīng)理提供，設(shè)計師只要跟著產(chǎn)品的要求去做設(shè)計就好了。

但在真實項目中，產(chǎn)品不可能考慮到所有問題，尤其是和體驗、交互、視覺高度相關(guān)的部分。

每當(dāng)我們每做界面或功能時，碰到所有和產(chǎn)品有關(guān)的問題，都需要反饋給產(chǎn)品經(jīng)理再等它做決策，那么他必然是處理不過來的，項目肯定也做不下去。所以設(shè)計師需要在自己力所能及的范圍里，盡量自己去解決這些問題，提高項目整體運轉(zhuǎn)的效率和質(zhì)量。

尤其在一些對視覺要求不是特別嚴(yán)苛的環(huán)境中，UI設(shè)計的成果往往“能看”就夠了，領(lǐng)導(dǎo)或者面試官對設(shè)計價值的定義就不會在視覺上，往往會聚焦在產(chǎn)品方案上。就是因為設(shè)計師自己有產(chǎn)品思維具備解決產(chǎn)品問題的能力時，可以極大的填補產(chǎn)品經(jīng)理層面的空缺，還可以提高產(chǎn)品質(zhì)量和研發(fā)效率。

但是，產(chǎn)品方案不是只提供解決方案就行了，還需要合理、有效，所以就要綜合各方面的制約與影響，才能輸出優(yōu)質(zhì)的結(jié)果，這就是一個非常綜合性的分析過程，我很難用簡單的語言進行歸納和總結(jié)。

所以，下面就通過前面的案例，來展示產(chǎn)品思維的具體思考過程

在原有兩步路路線詳情頁中，頂部的大圖和信息區(qū)域是我重點調(diào)整的區(qū)域之一。

之所以重點關(guān)注，不僅僅是因為它 “不好看”，而是這個大圖的缺陷很多。作為瀏覽用戶，圖片的關(guān)注度不是沒有但絕對不是重點，往往只是草草快速瀏覽一遍就夠了，但現(xiàn)在的輪播形式就沒辦法高效看完相關(guān)圖例，且占據(jù)的篇幅又過大，擠占下方的其它關(guān)鍵信息點。

當(dāng)然也有同學(xué)可能會覺得看圖怎么會不重要，你們看小紅書找旅游地不就是被圖吸引然后再點擊進入做出選擇的嘛？

不排除這種情況是存在的，但這不是小紅書，這是一個比較硬核的徒步社區(qū)，不是給用戶看大圖就有問題，而是在發(fā)布用戶這一側(cè)，硬核優(yōu)質(zhì)的分享者（是去走或跑幾十公里不是到打卡點自拍）大多不具備那種拍“美照”的能力，最終呈現(xiàn)的路線圖景多數(shù)就是隨手一拍的質(zhì)量，瀏覽用戶壓根沒必要仔細(xì)欣賞。

再進一步考慮，有很多經(jīng)典線路本身景色就不是特別好，尤其是偏越野跑的線路往往雜亂又逼仄，照片帶來的作用更多是一種對路線的概括（功能性），而不是作為吸引人的美照。在這個限制下面，大篇幅展示封面就不會獲得常規(guī)以圖片為導(dǎo)向的應(yīng)用的結(jié)果。

這些就是針對問題的分析，而這里面既有體驗的問題，也有產(chǎn)品的問題，甚至還有運營的問題，但具體去區(qū)分它們沒有意義，只要它們不是純粹的視覺問題我們都可以統(tǒng)一歸納為它們是產(chǎn)品問題。

基于這些問題去思考解決方案時，就可以問自己一個簡單的問題，是不是只做視覺調(diào)整，如優(yōu)化布局、更改尺寸、添加投影、增加圓角之類操作就能解決。如果不能，那就要涉及到對產(chǎn)品形式的調(diào)整了，也就是涉及功能、信息的改動。

這里我們先看改完之后的結(jié)果：

為了減少圖片的面積和提高觀看效率，我選擇縮小圖片并做成左右滑動的列表，把發(fā)布用戶信息做到上面，合理利用空間且突出收藏、分享等操作。但光改這個依舊只是一個簡單的視覺調(diào)整，缺乏深度和細(xì)節(jié)，沒有什么解釋的空間。

所以再往深一點挖掘，一屏只能展示一張圖多一點，理由不是圖片比例的問題，而是因為用戶發(fā)布路線最小可以添加的封面圖只有一張。如果只有一張，那么右側(cè)留空顯然是不能接受的，這樣的方案也就做不了。而且只展示圖片實在是有點不夠看。

我會再想到鏈家之類看房軟件的頂部區(qū)域，除了展示攝影圖以外，還會添加固定的房型圖，應(yīng)用了多種圖片類型。而在兩步路中，如果發(fā)布路線，除了封面圖外，路線圖本身肯定也是能直接生成圖片的，可以生成類似跑步軟件的那種路徑圖。

頂部圖片也可以不止有用戶自己拍的攝影圖，還可以添加路線生成圖，同時這張圖因為是靜態(tài)的，就可以在生成過程中添加一些數(shù)據(jù)信息或標(biāo)注內(nèi)容等，和下方可交互的地圖路線展示區(qū)分開來。并且在下方區(qū)域添加一個類似電商中 “商品圖/視頻” 切換的標(biāo)簽快速選擇。

甚至再仔細(xì)想想，當(dāng)我進入路線詳情頁時其實更關(guān)注的是路線本身，第一張圖直接放路線圖而不是放在最后，可能對相當(dāng)一部分用戶來說也是更實用的做法。但這么做就有點激進，需要給出初步設(shè)計以后再套一些真實內(nèi)容做出頁面看效果，這就是內(nèi)部評審或用戶測試要做的事情了。

到這里這個模塊基本解釋的就差不多了，而我們?yōu)榱藘?yōu)化它已經(jīng)做出了一些超出視覺設(shè)計外的變更，且需要考慮盡可能多的細(xì)節(jié)，照顧到方方面面，這就是產(chǎn)品思維應(yīng)用的過程。

再往下的路線模塊改動也同理，我就不多做展開，你們可以自己深入解構(gòu)一下：

設(shè)計過程中對產(chǎn)品思維的應(yīng)用，不是成為產(chǎn)品經(jīng)理構(gòu)思新的功能需求，而是維持原先目標(biāo)的不變的情況下，給出新的、更完整、更合理的產(chǎn)品方案。

而產(chǎn)品方案當(dāng)然不是你們想怎么輸出就怎么輸出，這些方案還需要再后續(xù)經(jīng)過團隊的評審（我要驗牌），也就是說服其他人同意你的設(shè)計方案。而光看圖肯定不夠，所以要進行解釋說明，從一開始的問題分析出發(fā)，到如何完成這個結(jié)果的考慮過程。

在這個場景中只看設(shè)計圖效果是最沒價值的，如果你能說服團隊通過，那這套方案就是好方案，如果不行，那不管你想的如何天花亂墜還是視覺做得多花里胡哨都沒用。所以方案構(gòu)建邏輯性是非常重要的，因為沒有邏輯就沒有說服力。

產(chǎn)品思維本身就是一種比較抽象的思維，提升這種底層思維能力需要通過自己大量的積累。我們后續(xù)還會陸續(xù)做一些相關(guān)的案例分享（這應(yīng)該才是最有用的）。

同時，面對真實工作場景里產(chǎn)品思維很多時候會淪為一種過稿的武器，是一種職場“詭辯”的技術(shù)，畢竟上線有沒有用無所謂，領(lǐng)導(dǎo)、客戶覺得好，才是真的好……

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、列表頁的基本認(rèn)識

列表頁就是以展示列表 List 為主的頁面，所以我們需要先理解列表是什么。

列表源自編程術(shù)語，是一種數(shù)據(jù)結(jié)構(gòu)，即按照線性順序排列的數(shù)據(jù)項集合（有限序列）。說人話，就是按照一定順序展示數(shù)據(jù)的形式。

我們再用UI設(shè)計的角度來理解它，可以把它分為 “列” 和 “表” 兩個部分。我們先理解表，表就是“表格”的意思，這也是計算機中存儲數(shù)據(jù)最基礎(chǔ)的形式（關(guān)系型），我們在頁面中看見的多數(shù)內(nèi)容都以這種形式記錄。

列則是動詞 “排列” 的意思，用一定的邏輯、方法、順序?qū)⒈砀衽帕谐鰜怼＿@種排列是要經(jīng)過設(shè)計和調(diào)整的，不會和原來的表格完全一致。

也就是說，列表設(shè)計是種對表格的轉(zhuǎn)換，是種對數(shù)據(jù)的可視化呈現(xiàn)形式。

之所以要強調(diào)這個，就是因為想要做好列表設(shè)計就離不開對數(shù)據(jù)的理解，一個專業(yè)的列表設(shè)計不是做一個好看整齊的重復(fù)性組件，而是將數(shù)據(jù)表格清晰有效的反映出來。

數(shù)據(jù)表格對列表的影響包含下面幾個要素：

1. 屬性字段
2. 字段值
3. 字段狀態(tài)

1. 屬性字段的影響

屬性字段就是列表內(nèi)要放的具體信息點，也就是數(shù)據(jù)表格中的表頭。比如一個商品列表中，要放商品圖片、商品名、品牌標(biāo)簽、節(jié)日標(biāo)簽、營銷標(biāo)簽、銷售量、好評率、價格、原價……每個獨立的信息就是一個字段。

而一個真實的項目列表內(nèi)，往往會包含非常多的字段，所以開始設(shè)計前要先搞清楚數(shù)量和明細(xì)，以及它們各自的含義。一方面是設(shè)計中不能有字段的缺失，另一方面是字段中包含對應(yīng)的權(quán)重、分類，是設(shè)計前必須要確定的信息。

比如下面的列表內(nèi)容，就包含了大量的字段信息，而這些字段既有權(quán)重的強弱，也有分類的整理，是經(jīng)過設(shè)計師的專業(yè)分析和設(shè)計的結(jié)果。

2. 屬性值的影響

屬性值就是每個屬性具體放什么內(nèi)容，有什么限制。比如商品名，肯定是放商品名稱的文本，但文本一般是什么樣的，最長支持多少字，這些就是屬性值的基本信息。

屬性值在開發(fā)環(huán)境中只能是文本（字符串），但在設(shè)計中這個值就不一定只是文本，可能還是圖片、圖標(biāo)、符號等內(nèi)容，中間會有轉(zhuǎn)化過程。比如用戶列表中，用戶有不同的 VIP 等級，數(shù)據(jù)中記錄的等級肯定是文本性質(zhì)的，而展示出來卻可能是專屬的黃金、白銀、青銅圖標(biāo)。

屬性值的認(rèn)識同樣非常重要，決定了列表的設(shè)計是否準(zhǔn)確，符合產(chǎn)品的規(guī)劃。

3. 字段狀態(tài)的影響

最后字段的狀態(tài)，就是字段展示的邏輯，簡單解釋起來就是字段什么情況下出現(xiàn)，什么時候隱藏，出現(xiàn)的時候顯示什么內(nèi)容這三個問題。

比如美團的列表中，有美團商家列表中，運輸標(biāo)簽有美團快送、專送、全城送、商家自配等不同類型，而下方的配送時間也在樣式上會有差異，這就是對字段狀態(tài)的表達。

而越是復(fù)雜的列表，包含的字段狀態(tài)差異就越大，往往會直接影響列表的樣式，所以設(shè)計過程中就要體現(xiàn)盡可能多的樣式狀態(tài)，也就是設(shè)計它的不同變體，確保在各種場景中它們能正確顯示。

想要設(shè)計好列表，就要面對上面提到的三個問題。優(yōu)秀的列表不止是一種視覺結(jié)果，而是一種能兼容相關(guān)數(shù)據(jù)展示的容器規(guī)則。

二、列表頁的框架布局

接著我們來理解列表頁的主要框架和布局形式，入門它的基本設(shè)計要點。

首先列表頁不是只有列表一種組件，多數(shù)還會包含對列表數(shù)據(jù)進行搜索、篩選、排序的組件。

除此之外，部分重要的列表頁還可能在頂部放運營模塊，用來展示一些熱門推薦內(nèi)容或單純作為廣告位。

運營內(nèi)容放頂部且篇幅較小是因為頁面形式的限制，不能在頂部放太多內(nèi)容讓列表被頂?shù)降诙寥ァＫ阅壳暗脑O(shè)計為了更好的塞入內(nèi)容，就會選擇在列表中插入其它數(shù)據(jù)，比如純運營廣告，也可能是內(nèi)容推薦，或者是模塊入口等。

總結(jié)起來，列表頁的主要框架就是頂部搜索欄、特殊模塊、篩選排序欄、列表區(qū)域的組合。

而最關(guān)鍵的列表區(qū)域，可以使用不同的列表來展示信息，我們可以簡單分成“單列”和“多列”兩個布局大類。下面我們就分別對這兩個分類類型做個解析。

1. 單列列表

單列列表就是一行只有一個數(shù)據(jù)對象的列表形式。而單列列表模式中還區(qū)分兩種類型的列表，一種是引導(dǎo)型，一種是展示型。

引導(dǎo)型就是引導(dǎo)用戶點擊進入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內(nèi)容點擊進入詳情頁面。

而展示型，就是直接在列表中展示主要信息，讓用戶直接順著列表的順序查看主要的內(nèi)容，而不是進入到詳情頁查看。最有代表性的展示型列表，就是朋友圈這類動態(tài)列表了。

單列列表對單個數(shù)據(jù)對象的展示空間較大，但是單屏瀏覽數(shù)據(jù)量就會減少，適用于數(shù)據(jù)對象字段較多的場景。

2. 多列列表

多列列表就是一行會展示多個數(shù)據(jù)對象的列表形式。通常移動端的多列列表只有兩列，在少數(shù)情況下才會出現(xiàn)三列。而兩列模式中，也包含兩種布局形式，一種是等高展示，一種是瀑布流。

等高展示就是列表內(nèi)數(shù)據(jù)對象的高度是保持一致的，每個數(shù)據(jù)對象的尺寸統(tǒng)一左右對齊，適用于字段類型、內(nèi)容相對統(tǒng)一變化小的場景。

而瀑布流，則是數(shù)據(jù)對象高度不一致的多列布局形式，相對更靈活適用面更廣，適合字段類型、內(nèi)容變化較大，不同數(shù)據(jù)對象的差異極大的場景。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、全文速覽圖

我想這是很多新手設(shè)計師都有過的感受，明明懂了很多設(shè)計知識，但到真正設(shè)計的時候還是會出現(xiàn)迷茫或者沒思路的情況。

1. 看了很多內(nèi)容/審美在線，但拿到需求沒想法
2. 設(shè)計技法VS設(shè)計原理
3. 平面能力差
4. 學(xué)習(xí)路徑推薦

二、原因分析

造成這種情況的主要原因是，雖然我們每天看了大量的設(shè)計文章或者技法，但沒有第一時間應(yīng)用到設(shè)計實踐中。

換句話說就是，我們每天看的設(shè)計內(nèi)容可能跟我們實際做的工作需求不夠搭邊，這樣就很容易造成拿到一個新需求后沒有想法，感覺之前看了很多設(shè)計圖或者文章都沒派上用場，不得不重新找競品找參考才能展開設(shè)計。

就像學(xué)了一節(jié)新課程，如果沒有第一時間做配套的練習(xí)題，等過了一周再做練習(xí)題發(fā)現(xiàn)根本不會做，因為之前學(xué)的課程早都忘得差不多了。

北京蘭亭妙微UI設(shè)計公司：下面展開講講如何避免這種情況，建立自己的設(shè)計成長體系。

三、設(shè)計技法VS設(shè)計原理

對于設(shè)計技法vs設(shè)計原理的問題，我覺得對于設(shè)計師來說同等重要，但具體要結(jié)合你現(xiàn)在的工作情況找到一個側(cè)重點。

舉個例子，比如當(dāng)前的工作偏UI視覺多一點，需要常做一些運營活動圖，那么日常就可以多側(cè)重練練技法，多做視覺練習(xí)；如果當(dāng)前的工作偏向純UI，那么就可以多重視設(shè)計理論，多思考產(chǎn)品規(guī)劃、交互流程、用戶使用體驗等等這些產(chǎn)品交互相關(guān)的知識，用理論支撐起我們的設(shè)計方案。

這樣既能保證我們能很好地勝任當(dāng)前的工作，還能讓我們在持續(xù)的工作中不斷有進步有提高。

四、如何看待平面能力

對于平面能力差的問題，我覺得平面設(shè)計能力是基礎(chǔ)。可能很多同學(xué)在大學(xué)時有過這種體驗，無論你的專業(yè)是視傳、數(shù)媒、產(chǎn)設(shè)，甚至攝影，都需要經(jīng)歷平面設(shè)計這一關(guān)。排版、手繪、字體、后期合成等等這些平面能力需要我們不斷練習(xí)實踐。

現(xiàn)在AI繪畫工具的出圖效果都不錯，大家可以好好利用起來輔助出圖，補齊UI設(shè)計師在平面設(shè)計上的短板。

總的來說，平面能力要多練習(xí)多積累，日常工作中還是建議靈活運用“AI+設(shè)計”的形式，也能打造出好的效果圖，沒必要為了某個視覺效果死磕PS而浪費太多工作時間。

五、可復(fù)制的學(xué)習(xí)路徑

針對看了很多設(shè)計但做需求還是沒想法，以及到底怎么學(xué)UI、建立自己的設(shè)計體系這些情況，我結(jié)合自己的經(jīng)歷總結(jié)一下，希望能對你有幫助：

首先還是多積累，多看好的設(shè)計，審美需要一直提高。比如每天早上我都會拿出半小時的固定時間去Pinterest或者花瓣里去看各種各樣的設(shè)計圖。

需要注意的是，這里的看也分為兩個方向：一個是日常看圖，一個是專項看圖。

1. 日常看圖，就是我在網(wǎng)站里隨便瀏覽，看到好的圖就隨手采集下來。這是一種沒有目的性的，無論是APP設(shè)計、運營海報還是3D圖標(biāo)，看著好的設(shè)計圖就存下來。
2. 專項看圖，就需要根據(jù)接下來要設(shè)計的需求，提前有目的地去看一些圖，找各種競品，去體驗這些競品有哪些好的地方，哪些可以用到我們的設(shè)計上。這時需要結(jié)合需求，有針對性地去看圖。

其次，每天看的圖很多，就需要把圖都整理一下，這個時候就需要建立一個系統(tǒng)性的設(shè)計素材庫。

拿花瓣舉個例子，在花瓣里可以創(chuàng)建各種各樣的分組。

比如APP是一個大的分組，在這個APP的分組里面可以建各種各樣的畫板，像APP-首頁、APP-導(dǎo)航欄、APP-標(biāo)簽設(shè)計等等；再比如網(wǎng)頁設(shè)計是一個大的分組，我可以在網(wǎng)頁設(shè)計底下創(chuàng)建網(wǎng)站首頁設(shè)計、網(wǎng)站登錄頁設(shè)計這些畫板。

這樣整理的好處一個是讓我們每天看的圖更加清晰有條理；另一個是有了分組/畫板后，接到新的設(shè)計需求后就可以直接定位到某個分組里，看看我們之前創(chuàng)建的畫板里有沒有類似的一些參考圖，省去了從0~1再重新找參考圖的這種過程。

而且看到自己采集的參考圖突然派上了用場的過程，對于設(shè)計師來說特別棒！這說明我們每天看的內(nèi)容有價值，不只是在收藏夾里吃灰。

比如要設(shè)計一個UI標(biāo)簽，我們可能需要反復(fù)去創(chuàng)建的素材畫板里看各種各樣的標(biāo)簽設(shè)計，這樣不止一次地反復(fù)看收集的素材，看的多了之后我們就對這些素材圖特別熟悉，這樣就不怕后面的設(shè)計再沒思路。

現(xiàn)在每天網(wǎng)絡(luò)上都有特別多的零碎信息，所以這種清晰的整理是一個特別有效的成長方法。經(jīng)過這種「先整理再回看再設(shè)計」反復(fù)練習(xí)的過程，會有一個更清晰的設(shè)計體系和工作流，設(shè)計能力肯定會有一個質(zhì)的提升。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一、異形容器

通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環(huán)境中凸顯出來，自然成為視覺焦點。

引導(dǎo)用戶注意力優(yōu)先落在關(guān)鍵信息或操作點上，這就是對比原則，我們可以通過形狀的對比讓卡片突出，增加視覺表現(xiàn)力：

在一些視覺頁面中，也可以用異形容器增加視覺表現(xiàn)力，可以結(jié)合主題設(shè)計容器，例如下方就是一個以紙質(zhì)火車票造型作為卡片背景的例子：

也可以結(jié)合內(nèi)容設(shè)計容器，例如頁面的內(nèi)容是感謝用戶，就可以從感謝信或者信紙的角度設(shè)計容器：

二、背景

在設(shè)計中，想要為卡片或頁面增加形式感，豐富背景是直接且高效的方式，可以從顏色、底紋、裝飾元素這三個核心維度展開，讓背景不再單調(diào)，為整體設(shè)計加分：

1. 優(yōu)化顏色增加背景的形式感

可將背景的無彩色（如黑白、灰度色）替換為帶有明確色相的有彩色（如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等）

借助 “無彩色與有彩色” 的屬性差異，讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比，快速從整體布局中跳脫出來：

也可以將卡片的單一純色設(shè)計，升級為多種顏色的漸變效果 —— 通過這種漸變色，讓卡片與周圍的背景、其他組件形成鮮明對比

從而快速從整體布局中凸顯出來，成為視覺焦點，快速抓住用戶注意力：

2. 給背景增加底紋

在背景中增加底紋（如低透明度的幾何紋理、輕微的肌理質(zhì)感等），不僅可以強化視覺層次，還可以向用戶傳遞頁面的風(fēng)格氛圍，增強記憶點。

例如科技類產(chǎn)品用細(xì)線條網(wǎng)格底紋增強科技感，古風(fēng)類產(chǎn)品可以用紙張等營造復(fù)古的氛圍感：

下面列舉了一些常見的底紋元素，可搭配圖層的混合模式、不透明度使用：

3. 在背景上增加裝飾

可以根據(jù)頁面/活動添加合適的裝飾元素，裝飾可以是圖形、文字等與頁面相關(guān)的元素。

裝飾元素主要是為了平衡界面視覺，優(yōu)化整體協(xié)調(diào)性：當(dāng)界面存在 “大面積空白” 或 “元素分布不均” 時，裝飾元素可起到 “視覺平衡” 作用。

三、文字

這里的文字不僅是卡片標(biāo)題，也可以是活動標(biāo)題或者頁簽導(dǎo)航，那么文字的設(shè)計感可以怎么加呢？我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設(shè)計感：

1. 圖形裝飾

將圖形放在標(biāo)題空白處增加標(biāo)題的設(shè)計感：

也可以用來填補標(biāo)題的空白區(qū)域，平衡視覺：

用圖形代替文字的某一個筆畫，傳遞產(chǎn)品的氛圍：

2. 線條裝飾

用簡單的線條突出標(biāo)題，輔助信息分層，突出重點信息，降低認(rèn)知成本：

3. 文字裝飾

用風(fēng)格獨特的字體寫一句英文作為標(biāo)題的裝飾：

另一種方法是將文字放大起到裝飾作用：

4. 背景裝飾

在標(biāo)題后面增加背景，不僅可以保證標(biāo)題的可讀性，還能讓標(biāo)題抓住用戶的眼球，進一步強化視覺表現(xiàn)力：

總結(jié)

盡管上面的案例分別展示了不同的提升形式感的方法，但在實際設(shè)計中，不必局限于單一形式。

將多種手法靈活組合（比如為卡片搭配有彩色背景的同時，疊加輕量底紋并點綴細(xì)節(jié)裝飾），更能放大視覺表現(xiàn)力，讓界面擺脫單調(diào)感，呈現(xiàn)出更豐富的層次與質(zhì)感。

如果這篇內(nèi)容對你有啟發(fā)，或是你有其他提升形式感的實用思路，歡迎在評論區(qū)分享交流，一起探索更多設(shè)計可能性～

轉(zhuǎn)載：優(yōu)設(shè)

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

一般用戶在登錄后臺管理系統(tǒng)后，后臺首頁就成為了用戶與產(chǎn)品交互的第一個頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺管理系統(tǒng)的首頁設(shè)計可以遵循哪些策略？本文作者結(jié)合實戰(zhàn)項目發(fā)表了他的想法，一起來看看吧。

很久沒有更新文章了，一方面文章選題困難，公眾號的閱讀量真是有點慘不忍睹，寫作的動力有所下降。另一方面工作確實比較忙，時間精力有限，最近參加了多個工作項目一直在加班。

今天總結(jié)下項目過程中，關(guān)于后臺管理系統(tǒng)首頁設(shè)計引發(fā)的一些思考。

主要的內(nèi)容包括：

1. 后臺首頁的作用；
2. 首頁的設(shè)計方向；
3. 首頁內(nèi)容的思考。

一、后臺首頁的作用

后臺首頁是用戶登錄后，與產(chǎn)品交互的第一個頁面，信息內(nèi)容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統(tǒng)的整體運行狀態(tài)，洞察業(yè)務(wù)問題。另一方面可以幫助用戶快速處理業(yè)務(wù)問題，不需要到專門的功能頁面操作，縮短用戶的操作路徑。

后臺首頁需要依托整個產(chǎn)品的功能體系，根據(jù)用戶角色的職能、權(quán)限、業(yè)務(wù)范圍，提取關(guān)鍵的用戶關(guān)心的業(yè)務(wù)功能點搭建頁面內(nèi)容。所以一般是在業(yè)務(wù)功能完成之后再進行首頁設(shè)計。這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶和場景，才能做出有效的設(shè)計方案。

另外首頁不屬于具體的業(yè)務(wù)領(lǐng)域，所以一般不會安排固定的產(chǎn)品經(jīng)理，而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設(shè)計沒有整體規(guī)劃，首頁就容易被忽略，成為「三不管」地帶。

二、首頁設(shè)計的方向

根據(jù)以往的設(shè)計經(jīng)驗，我總結(jié)了以下四點：

1. 內(nèi)容與用戶角色

首頁設(shè)計要求產(chǎn)品經(jīng)理對用戶角色的分類、業(yè)務(wù)職能有比較深入的了解，否則產(chǎn)品設(shè)計就可能變成內(nèi)容堆砌。

通常后臺系統(tǒng)需要面向管理層和執(zhí)行層兩類用戶，他們對于信息需求存在比較大的差異。管理層更關(guān)注宏觀層面的統(tǒng)計信息，方便了解業(yè)務(wù)動態(tài)，從而制定工作決策等，所以各類可視化圖表就成為首頁重要的內(nèi)容組成。

對于執(zhí)行層用戶，主要是完成具體的工作任務(wù)，所以更加關(guān)注明細(xì)數(shù)據(jù)。除此之外，適當(dāng)?shù)卦黾右恍┙y(tǒng)計數(shù)據(jù)，可以更全面了解系統(tǒng)狀態(tài)，也便于對上匯報，減少人工統(tǒng)計的工作量。

B 端產(chǎn)品了解用戶和場景并不容易，如果只靠“猜測”做設(shè)計，就會發(fā)現(xiàn)首頁設(shè)計有很多種可能，怎么做似乎都對，怎么做似乎都不對。而且參與的人越多，想法也會越多。

所以在項目中，需要盡可能地收集用戶場景信息加以分析完成設(shè)計，即使存在一部分“猜測”信息，也需要能夠自圓其說，才能更好的推進產(chǎn)品設(shè)計落地。

2. 場景/主題化

對于小的業(yè)務(wù)系統(tǒng)，單獨的一個頁面就可以涵蓋所有的業(yè)務(wù)信息，內(nèi)容也會比較清晰簡單。

對于比較大的業(yè)務(wù)系統(tǒng)，首頁包含的消息會比較多，例如阿里云、騰訊云等產(chǎn)品，一個頁面內(nèi)容無法承載所有的信息。因此需要根據(jù)場景/主題拆分首頁內(nèi)容，便于用戶有目標(biāo)地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內(nèi)容。

3. 實用性

1）串聯(lián)內(nèi)容，縮短路徑

某些場景下，首頁要滿足用戶快速處理業(yè)務(wù)工作的需求，例如待辦事項，審批操作等，通過明細(xì)列表的展示，結(jié)合抽屜等詳情信息展示，用戶可以在首頁直接處理工作任務(wù)，無需進入到功能頁面。

「常用功能」也是首頁的常見組件，類似操作系統(tǒng)桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中，用戶不需要通過菜單逐級點擊，即可進入功能頁面，對縮短用戶操作路徑也有很大幫助。

2）高頻常用功能信息聚合

首頁的價值在于幫助用戶簡單、高效的認(rèn)知系統(tǒng)，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實用、看似高大上的功能，或者改變展示形式，保證重要信息的優(yōu)先展示。

有些 B 端產(chǎn)品的門檻比較高，為了降低認(rèn)知成本，于是有人希望在首頁中增加系統(tǒng)介紹、系統(tǒng)架構(gòu)圖的形式來展示產(chǎn)品的功能流程，在產(chǎn)品演示是可以更好的讓用戶理解產(chǎn)品功能。

這些本來應(yīng)該是在 PPT 中展示的信息，卻要放到首頁中展示。看似酷炫的一張圖，實際上在應(yīng)用階段對用戶的工作沒有任何幫助。因為用戶根本不關(guān)心你的系統(tǒng)架構(gòu)是什么，需要的是產(chǎn)品幫助他解決工作中的問題，帶來的效率提升。

即使用戶需要了解這些信息，也不是每天打開首頁就要一眼看到，可以采用其他的呈現(xiàn)方式。比如用戶引導(dǎo)，或者與業(yè)務(wù)信息關(guān)聯(lián)，既可以呈現(xiàn)出業(yè)務(wù)流程，也可以展示業(yè)務(wù)信息，又或者首頁增加入口、引導(dǎo)在幫助中心查看。

4. 定制化

B 端產(chǎn)品業(yè)務(wù)功能是面向用戶角色的，同一角色的用戶具有相同的工作任務(wù)。但是首頁則有所不同，同一類角色的不同用戶，關(guān)注點也不完全相同。尤其是業(yè)務(wù)系統(tǒng)內(nèi)容較多時，首頁內(nèi)容可定制就成為了滿足不同用戶信息需求的方式。

當(dāng)然系統(tǒng)的定制化并不是讓用戶從零定制，而是在系統(tǒng)初始內(nèi)容基礎(chǔ)上，重新組織頁面內(nèi)容、調(diào)整頁面布局等。否則定制化反而會帶給用戶更差的體驗。

三、首頁內(nèi)容應(yīng)該追求簡潔還是豐富呢？

在項目設(shè)計中，就碰到了這個問題。有同事認(rèn)為首頁應(yīng)該簡單點，避免過多的信息量增加用戶的學(xué)習(xí)成本。

當(dāng)然這個問題需要根據(jù)產(chǎn)品定位具體分析。不過總的來說，我個人認(rèn)為首頁應(yīng)該豐富一些。

首頁是信息聚合頁面，天然就會有較多的信息內(nèi)容，用戶需要通過信息傳遞了解系統(tǒng)的狀態(tài)和變化，人為的過濾掉內(nèi)容后會影響信息的全面性。

其次用戶有信息選擇權(quán)，通過一定時間的摸索，可以形成自己的信息查看軌跡，或者個性化定制首頁內(nèi)容過濾掉工作中冗余的信息。

而且B 端產(chǎn)品經(jīng)過多年的發(fā)展，單從布局和表現(xiàn)形式上看，首頁已經(jīng)有比較成熟的設(shè)計模式了，大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認(rèn)知和習(xí)慣。卡片風(fēng)格是首頁最常見的展現(xiàn)形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復(fù)雜感。即使不采用卡片分割， 可以通過間距、標(biāo)題等引導(dǎo)用戶視線，劃分頁面內(nèi)容。

四、總結(jié)

簡單總結(jié)下：

1. 首頁考慮的設(shè)計因素比較多，每種用戶角色可能會有不同的需求，需要針對性的設(shè)計，而業(yè)務(wù)功能的用戶角色更加明確；
2. 首頁設(shè)計需要對系統(tǒng)有全面了解，業(yè)務(wù)功能則比較聚焦；
3. 首頁是系統(tǒng)第一個頁面，會受到更高的關(guān)注度，往往設(shè)計分歧也會比較大；產(chǎn)品設(shè)計需要做深入的分析，故事性要求也會更高；否則被噴和被 Pass的可能性會非常大；
4. 首頁設(shè)計的內(nèi)容需要注重實用性，避免各種信息的無效堆砌。

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍藍設(shè)計）m.payeee.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。