久久分类免费视频_亚洲Av不卡在线_97超碰在线免费观看_人人狠狠综合久久88亚洲 一本久道综合久久精品_四虎成人精品在永久免费_亚洲精品有码在线观看_国产在线视频导航

北京蘭亭妙微 UI 設(shè)計公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計作品的學習與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計趨勢，從中提煉可落地的設(shè)計方法論，分享給同樣熱愛設(shè)計的你。今天，我們來深度拆解一套車輛安全數(shù)據(jù)分析儀表盤的 UI 設(shè)計，從信息架構(gòu)、配色策略、移動端適配到數(shù)據(jù)敘事的視覺表達，逐一解析其背后的設(shè)計決策。

────────────────────────────────────────

一、智能 AI 卡片設(shè)計：彈窗層級的克制表達

手機端 iPhone Mockup 中的 AI 智能洞察彈窗卡片，白色卡片浮層覆蓋在主界面之上。

手機端的這張 Smart AI Insight Card，展示了 B 端彈窗設(shè)計的一個重要原則：層級的建立靠光影，不靠線條。

• 主界面采用淺灰背景（約 #F5F6FA），彈窗卡片是純白浮層 + 微投影（Y-offset 4px, blur 8px），層次關(guān)系干凈利落，無需額外邊框來界定卡片范圍

• 卡片內(nèi)部包含車輛碰撞示意圖、型號信息（Ford Model 2017）、事件類型標簽、CTA 鏈接共四類信息層，通過縱向網(wǎng)格對齊排布，視覺密度控制在舒適區(qū)間

• 左上角的藍色警示標簽（高飽和藍，類似 #0047FF）是整個卡片唯一的色彩重心——它同時承擔了"信息類型標識"和"視覺激活點"兩個職能，讓用戶 0.3 秒內(nèi)鎖定核心信息

設(shè)計啟示：彈窗卡片中，單一高飽和色點 + 大量灰白留白 = 最高效的注意力引導策略。不要用多個顏色"爭搶"用戶視線——在 B 端場景下，克制即高級。

────────────────────────────────────────

二、配色體系：藍白雙色的技術(shù)感構(gòu)建

iPad 寬屏 Mockup 展示的 Advanced Visual Data Graph 界面，左側(cè)淺灰數(shù)據(jù)區(qū) + 右側(cè)高飽和藍詳情面板形成強烈對比。

全系界面僅使用藍 + 灰白兩個色系，卻呈現(xiàn)出強烈的科技感和專業(yè)感。這種配色策略的背后是一套嚴格的色彩分工：

其中右側(cè)藍色詳情面板的處理尤為出色：純藍底色上使用白色線稿風格的車輛技術(shù)插畫，融合了"工程圖紙"的美學質(zhì)感與"數(shù)字大屏"的現(xiàn)代感。這種「工程藍圖 × 數(shù)字大屏」的混搭風格，是近兩年 B 端設(shè)計中逐漸成熟的視覺語言，特別適合汽車、工業(yè)、安防等領(lǐng)域的產(chǎn)品界面。

iPad Mockup 的展示意義：寬屏設(shè)備框讓儀表盤的寬屏布局優(yōu)勢一目了然——選對展示載體，本身就是最好的設(shè)計說明。

────────────────────────────────────────

三、信息架構(gòu)：數(shù)據(jù)優(yōu)先級的三層金字塔

Collision Analytics 完整看板，在筆記本設(shè)備 Mockup 中的實際效果展示，包含主數(shù)據(jù)區(qū) + 底部卡片列表 + 右側(cè)藍色抽屜面板。

在完整的 Collision Analytics 看板中，信息被嚴格劃分為三個優(yōu)先級層級，每一層對應不同深度的閱讀需求：

第一層：核心指標（0.5s 鎖定）

• 「48.2%」以超大字號占據(jù)左上角視覺重心區(qū)

• 這是用戶在任何場景下都能瞬間鎖定的"那個數(shù)字"

• 時間維度切片（Year/Quarter/Week）以 Tab 形式置于指標上方，提供靈活切換的同時不侵占核心數(shù)字的空間

第二層：趨勢與異常標注（5s 理解）

• 折線圖上用藍色豎線直接標出風險突增的時間節(jié)點

• 箭頭線從豎線引出，連接到文字說明"Collision severity increased by 64.2%"

• 這種標注式數(shù)據(jù)可視化讓用戶不必在圖表和說明文字之間來回跳轉(zhuǎn)——上下文信息被直接嵌入圖表內(nèi)部

第三層：可對比的詳情卡片（30s+ 深入）

• 底部三張卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等寬網(wǎng)格并列排布

• 每張卡片結(jié)構(gòu)完全一致：左側(cè)標簽 + 中間標題 + 右側(cè)關(guān)鍵百分比，支持快速橫向?qū)Ρ?/p>

• 右側(cè)藍色抽屜面板作為"按需展開"的詳情層，隨時可召喚、不搶占主內(nèi)容區(qū)域

核心方法論：B 端儀表盤的信息架構(gòu)不是"把數(shù)據(jù)放上去"，而是精心設(shè)計一條「用戶先看什么 → 再看什么 → 如何深入」的視線引導路徑。

────────────────────────────────────────

四、移動端適配：減法設(shè)計的三個原則

手機端兩張卡片并排展示，左側(cè)為藍色聚焦卡片（Collision Reconstruction），右側(cè)為白色常規(guī)卡片，兩張卡片形成對比。

移動端的 B 端設(shè)計面臨的核心挑戰(zhàn)是：在極有限的屏幕空間內(nèi)，把復雜數(shù)據(jù)講清楚。這組移動端卡片展示了三個可復用的設(shè)計原則：

原則一：一卡一事 每張卡片承載一個分析命題，不做多任務混合。藍色卡片 = 需要用戶關(guān)注的條目，白色卡片 = 常規(guī)信息條目。顏色在此承擔了優(yōu)先級語義，而非裝飾功能。

原則二：圖文合一 車輛技術(shù)插畫與百分比數(shù)據(jù)（如 35% severity）在同一卡片內(nèi)左右排布。插圖不是裝飾——它用視覺化的方式解釋了"碰撞嚴重程度"這個抽象概念，大幅降低了用戶的理解成本。右側(cè)的折線小圖同時提供時間維度的趨勢感知。

原則三：時間軸極簡化 折線圖上方的時間維度切換（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整個交互區(qū)域高度不超過 40px——零控件感，零視覺冗余，卻承載了五個時間維度的切換入口。

────────────────────────────────────────

五、設(shè)計強化數(shù)字感受力：+64.2% 的視覺敘事

Focused Analytics 界面，左側(cè)大量留白區(qū)域居中展示 +64.2% 大數(shù)字，右側(cè)為折線趨勢圖 + 藍色聚焦行動卡片。

最后一張 Focused Analytics 畫面，是全套設(shè)計中最值得細品的一個單頁。+64.2% 的增長數(shù)據(jù)被單獨放在整個左半屏，周圍是大量留白。這種處理方式背后有一條被反復驗證的設(shè)計法則：

數(shù)字的"說服力" = 字號 × 留白面積

具體執(zhí)行層面：

• 巨大的無襯線字體 + 極簡居中排版，讓數(shù)字本身成為頁面唯一的視覺錘，用戶不需要閱讀任何輔助文字，就能"感受"到這個數(shù)字的分量

• 右側(cè)折線圖從 0 開始緩慢爬升、斜率逐漸增大，用圖形曲線的"加速感"還原了"問題在惡化"的緊迫性——這是敘事型數(shù)據(jù)可視化的經(jīng)典手法，圖形本身在講一個"從平穩(wěn)到惡化"的故事

• 左灰右藍的分屏策略將界面分為"客觀數(shù)據(jù)區(qū)"和"行動聚焦區(qū)"，完整閉環(huán)了「信息獲取 → 風險感知 → 行動指引」的用戶旅程

• 藍色聚焦卡片內(nèi)部包含標簽、標題、技術(shù)插畫、百分比數(shù)值、進度條、說明文字共 6 個信息層級，全部通過字號、字重、間距做出清晰區(qū)分，密而不亂

────────────────────────────────────────

六、總結(jié)：6條可遷移的設(shè)計原則

這套作品給我們提供了以下可直接應用到實際項目中的設(shè)計準則：

1. 配色做減法：2 個主色 + 灰白體系，足夠構(gòu)建完整的科技感 UI。顏色越多，信息噪音越大

2. 信息分三層：核心數(shù)字 → 趨勢標注 → 對比詳情，為用戶建立有節(jié)奏的閱讀路徑

3. 彈窗靠光影：偏移投影 + 留白比邊框分割更優(yōu)雅，更符合現(xiàn)代 UI 的視覺趨勢

4. 顏色即信息：界面上唯一的高飽和色，必須指向用戶當前最該關(guān)注的區(qū)域

5. 移動端一卡一事：小屏不做多任務混合，一張卡片講清一個命題，寧可多滑一屏

6. 數(shù)字要能被"感受"：超大字號 + 充足留白 + 敘事型曲線，比干巴巴的百分比數(shù)字更有沖擊力

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

螞蟻阿福 APP 以 AI 醫(yī)生朋友的身份重新定義健康管理，從對話式醫(yī)療入口到智能體驅(qū)動的全流程服務，這款應用正在顛覆傳統(tǒng)醫(yī)療產(chǎn)品的交互邏輯。它不僅通過人格化設(shè)計降低醫(yī)療決策壓力，更借助阿里生態(tài)實現(xiàn)從咨詢到就診的完整閉環(huán)。本文將深度解析其創(chuàng)新設(shè)計如何重構(gòu)用戶與醫(yī)療服務的連接方式。

今天向大家分享一款最近剛推出的螞蟻旗下的 AI 健康助手——螞蟻阿福 APP ，希望你能從這篇產(chǎn)品體驗分析中有所收獲。如果你覺得我們的文章有價值，歡迎分享給你的朋友！

螞蟻阿福是誰？

螞蟻阿福是螞蟻集團推出的 AI 健康管理應用，由原 AI 健康工具 AQ 升級而來。產(chǎn)品愿景是成為用戶的 AI 醫(yī)生朋友，提供健康咨詢、圖片解讀（支持報告、病例、處方、藥盒）、個人和家庭健康檔案管理，以及預約掛號、云陪診等醫(yī)療健康服務。

螞蟻阿福有什么設(shè)計亮點？

對話式醫(yī)療入口：用 AI 重構(gòu)交互方式

當你打開螞蟻阿福 APP的第一刻，你會發(fā)現(xiàn)它像 ChatGPT、DeepSeek 一樣，只有一個對話框。這正是 AI-UX 的典型表現(xiàn)形式——把「對話」作為核心入口，弱化傳統(tǒng)的多層級導航，讓用戶用一句話就能觸達預約、解讀報告、癥狀咨詢等多種服務。交互形式就像與醫(yī)生聊天，而不是過去在 App 里找入口、找功能。

設(shè)計亮點

• 人格化的 AI 形象與語言：螞蟻塑造了一個名叫阿福的卡通醫(yī)生 IP 形象，降低醫(yī)療決策的心理壓力，提升用戶信任感。
• 關(guān)鍵詞即體驗起點：用戶無需理解產(chǎn)品結(jié)構(gòu)，輸入健康關(guān)鍵詞即可觸發(fā)服務，顯著降低使用門檻。
• 多智能體并行承載復雜場景：在傳統(tǒng)菜單欄上方，不同智能體對應不同醫(yī)療流程，用戶一次點擊即可進入明確的任務流，避免對話發(fā)散。

體驗思考

對話式AI交互和傳統(tǒng)的菜單欄相比，用戶的心智需要改變什么？

最近我對用“用戶心智”這個知識點有了全新的理解。這得益于剛好在嘗試全新交互的設(shè)計，而體驗到阿福時，我尤其感同身受，因此重新思考了這個問題。

從交互方式上看，傳統(tǒng)菜單欄要求用戶預先了解功能位置和層級結(jié)構(gòu)，通過”點擊—瀏覽—選擇”的路徑完成任務。而對話式 AI 交互讓用戶從”尋找功能”轉(zhuǎn)向”表達需求”，用自然語言直接描述問題，對話即交互、對話即操作。

這種轉(zhuǎn)變對應著心智模型的兩個層面：

• 從空間導航到意圖表達：用戶不再需要在腦海中構(gòu)建”這個功能在哪個菜單下”的空間地圖，而是像與人對話一樣說出”我想做什么”，系統(tǒng)來理解并執(zhí)行。
• 從記憶負擔到表達負擔：雖然降低了記憶功能位置的成本，但增加了準確描述需求的要求——用戶需要學會如何”問對問題”。

另外，你會發(fā)現(xiàn)阿福的頭部有點擁擠（包含用戶中心、智能體、任務中心等入口）。這是因為過去在菜單欄或金剛區(qū)的高頻功能都被上移了。也許這就是未來的設(shè)計趨勢——”菜單欄”從下往上，把最寶貴的黃金位置留給 AI。

心智模型（Mental Model）

心智模型是用戶基于過去經(jīng)驗形成的認知框架，決定了他們?nèi)绾卫斫猱a(chǎn)品的運作方式。它影響用戶如何理解界面、預測交互結(jié)果并做出操作決策。當產(chǎn)品的實際運作方式與用戶的心智模型一致時，體驗會更流暢；反之則會增加學習成本和認知負擔。

AI 診室：全新的互聯(lián)網(wǎng)在線就診

與傳統(tǒng) AI 對話式交互不同，阿福將醫(yī)療場景中的高頻應用設(shè)計成獨立智能體。用戶可以在底部對話框上方和頭部直接觸發(fā)，比如接下來介紹的 AI 診室。使用其他 AI 工具問診時，體驗往往缺乏儀式感。但在阿福中，點擊 AI 問診后，系統(tǒng)會明確提示”你已進入 AI 診室問診中”。接下來的流程會聚焦于你的癥狀，進行梳理分析，最終推薦適合的醫(yī)院和醫(yī)生。

另外，阿福受益于阿里健康和支付寶的強大生態(tài)，可以在 APP 內(nèi)完成預約和問診的閉環(huán)。用戶只需一個 APP，就能完成從診前咨詢到在線就診的全流程。

交互流程

• 用戶在底部打開 AI 診室智能體，系統(tǒng)顯示問診中。
• 輸入病情，可以切換就診人、上傳報告等。
• 第一輪分析：AI 判斷初步癥狀，實時顯示進度（遵循系統(tǒng)可見性原則，體驗很好），同時生成下一輪可能輸入的提示詞（交互體驗相當棒——點擊標簽就能自動跳入輸入框）。
• 第二輪分析：AI 繼續(xù)確認癥狀（我預計系統(tǒng)已可預判 90% 的病情），并提供”直接出結(jié)論”按鈕——用戶可以選擇繼續(xù)補充信息，也可以直接查看專業(yè)結(jié)果。
• 多輪分析后或點擊”直接出結(jié)論”后，AI 給出最終病情判斷，并提供對應解決方案、就近醫(yī)院掛號和醫(yī)生推薦。
• 用戶可選擇去公立醫(yī)院就診或直接在線問診。

設(shè)計亮點

• 智能體即場景容器：AI 診室不是聊天窗口,而是明確的”就診空間”，天然限定用戶心智，避免對話跑偏。
• 階段化流程強引導：從選咨詢?nèi)说矫枋霭Y狀，再到診療建議，每步都有清晰狀態(tài)提示，顯著降低醫(yī)療決策的不確定感。
• 任務完成感明確：通過”本次 AI 診室咨詢已結(jié)束”的節(jié)點提示，幫助用戶形成心理閉環(huán)，避免無限對話。

體驗思考

如果你覺得 ChatGPT、DeepSeek 這類對話式 AI 產(chǎn)品的交互過于簡單，融入智能體設(shè)計的阿福會給你更多驚喜。智能體像一個封裝了特定功能的應用，具有明確的目標導向，用 AI 服務于這個目標，而不是讓用戶在自然語言中”摸索路徑”。換句話說，智能體就像傳統(tǒng)的二級功能模塊——用戶觸發(fā)后，系統(tǒng)會在當前場景中圍繞這個需求進行交互。

正是這個流程的設(shè)計，讓我發(fā)現(xiàn)了它的獨特之處。無論是之前體驗過的阿里旗下安診兒和訊飛曉醫(yī)，還是我 7 月份構(gòu)思的北京協(xié)和互聯(lián)網(wǎng)醫(yī)院 AI 版本方案，都未曾想過可以通過智能體來豐富交互設(shè)計形式。

AI 智能體是什么？

AI 智能體（AI Agent）是一種能夠自主感知環(huán)境、做出決策并執(zhí)行任務的 AI 系統(tǒng)。與傳統(tǒng)的對話式 AI 不同，智能體具有明確的目標導向，能夠調(diào)用多種工具、API 和服務來完成復雜任務。

AI 找醫(yī)生：融入傳統(tǒng)交互的創(chuàng)新設(shè)計

AI 找醫(yī)生這個智能體同樣帶給我很大的驚喜和啟發(fā)。它成功地將傳統(tǒng)醫(yī)療 APP 中用戶已經(jīng)熟悉的交互模式融入產(chǎn)品，同時巧妙地結(jié)合了 AI 智能對話方式，形成了一種既保留用戶認知習慣又具有創(chuàng)新性的混合交互體驗。

交互流程

• 用戶在底部打開就醫(yī)服務智能體，點擊AI 找醫(yī)生。
• 平臺提供按科室和按疾病兩種類型的檢索（這一步和我們平時去醫(yī)院掛號找醫(yī)生的習慣完全一致）。
• 點擊科室或病種，觸發(fā) AI 對話，系統(tǒng)開始結(jié)合患者的病情、地區(qū)進行推薦（醫(yī)生數(shù)據(jù)來源自在全國擁有 90 萬醫(yī)生的好大夫）。
• 患者可以直接進入醫(yī)生主頁，進行在線問診和掛號。
• 如果對平臺推薦的醫(yī)生不滿意，可以進入全部醫(yī)生二級頁面進行個性化篩選（傳統(tǒng)的找醫(yī)生形式），也可以讓阿福重新為你推薦。

設(shè)計亮點

• 融合傳統(tǒng)交互模式：在 AI 對話框中加入傳統(tǒng)的 TAB 組件，讓用戶可以切換篩選，符合用戶的使用習慣。
• 標簽即意圖觸發(fā)器：疾病/科室標簽本身就是結(jié)構(gòu)化意圖，點擊即可觸發(fā) AI 搜索，無需多輪描述。
• 給人留下深刻印象的視覺設(shè)計：除了交互形式的創(chuàng)新，視覺設(shè)計同樣出色，為用戶帶來全新的視覺體驗。

體驗思考

體驗完這個智能體的交互流程后，我意識到過去對對話式 AI 產(chǎn)品的交互和 UI 理解過于淺顯。它們確實主要依靠對話交互，但隨著智能體的發(fā)展，每個智能體都代表一個獨立的流程、內(nèi)容甚至風格。

以 AI 找醫(yī)生為例：它融合了傳統(tǒng)的 TAB 框架，讓用戶按科室或疾病查找；當 AI 推薦的數(shù)據(jù)不滿意時，還提供”查看全部”按鈕，引導用戶進入二級頁面進行個性化篩選。這個設(shè)計讓我發(fā)現(xiàn)，AI 產(chǎn)品遠比想象中豐富——它不只是簡單的對話框和側(cè)邊欄。

寫到這里，我突然想起另一款對話式醫(yī)療 APP——訊飛曉醫(yī)。當我輸入”預約掛號”時，系統(tǒng)只能提示我跳轉(zhuǎn)至其他醫(yī)療網(wǎng)站完成掛號。相比之下，阿里的生態(tài)能力令人贊嘆：阿福直接連接好大夫等平臺，用戶可以在 App 內(nèi)完成從 AI 推薦、查看醫(yī)生到付費問診的全流程，無需跳出即可實現(xiàn)就診閉環(huán)。

醫(yī)生AI分身：讓專家經(jīng)驗規(guī)?；盏膭?chuàng)新嘗試

早在 2023 年參與釘釘智能體測評時，我就有過類似構(gòu)思：如果將專家過往的就診經(jīng)驗和知識喂養(yǎng)給 AI 并進行專門訓練，這個智能體能否解決 80% 的診前基礎(chǔ)咨詢？當我體驗這個智能體并查詢相關(guān)資料后，發(fā)現(xiàn)阿福的醫(yī)生 AI 分身確實做得非常出色。

該模型（官方名稱叫螞蟻·安診兒醫(yī)療大模型 AntAngelMed）基于海量醫(yī)學文獻和去隱私化的真實病例數(shù)據(jù)構(gòu)建，具備”深度思考”能力。它可對復雜、信息不全的臨床場景進行多輪推理、邏輯驗證與自我糾錯，助力精準診療。

在產(chǎn)品層面，AI 醫(yī)生整合了語音對話、掛號、補號申請等多種功能和場景?；颊呖梢韵衽c真人交流一樣咨詢，醫(yī)生則能 24 小時服務多位患者。

設(shè)計亮點

• 專家身份具象化，建立信任起點：AI 不再是泛化的醫(yī)生形象，而是明確綁定真實專家（姓名、醫(yī)院、學科、頭銜），讓用戶在對話前就建立信任預期。
• 醫(yī)學思考路徑可視化，不只給結(jié)論：通過「院士團隊解讀 / 醫(yī)學思考路徑 / 文獻引用」等模塊，將 AI 的推理過程展示出來，降低”黑箱感”，增強專業(yè)可信度。
• 多模態(tài)輸入降低使用門檻：支持語音對話、拍照上傳病歷與檢查報告，降低中老年用戶或非專業(yè)用戶的表達成本，貼合真實就醫(yī)場景。

體驗思考

醫(yī)生 AI 智能體這一創(chuàng)新模式對多個行業(yè)領(lǐng)域具有重要的參考價值。它的核心在于：將一位擁有數(shù)十年臨床經(jīng)驗的醫(yī)療專家所積累的專業(yè)知識、診療經(jīng)驗和實踐智慧進行系統(tǒng)化的數(shù)據(jù)處理和標準化轉(zhuǎn)換，再借助人工智能技術(shù)，使這些專業(yè)知識能夠同時為成千上萬的用戶提供高質(zhì)量的服務。

我甚至有一個大膽的設(shè)想：在未來，即便一個專家壽終正寢，只要他能把自己的知識庫和經(jīng)驗傳送給 AI，這個專家是不是就并未真正離去，而是可以繼續(xù)造福我們的子孫后代？

健康小目標：自動生成健康打卡任務

「健康小目標」是一個圍繞具體健康意圖（如改善睡眠）展開的目標型智能體。它通過 AI 引導式問答拆解目標，自動生成可執(zhí)行的日常任務，并將”制定計劃—每日打卡—正向反饋”完整串聯(lián)，形成持續(xù)的行為干預閉環(huán)。

體驗這個功能時，我特意下載了幾款健身打卡 APP，對比阿福的打卡流程與專業(yè)健身應用的差異。整體體驗下來，阿福的用戶體驗更流暢。由于首頁更聚焦、更簡潔，我可以一目了然地看到所有打卡任務。

交互流程

• 用戶在底部打開健康小目標智能體。
• 進入后開始設(shè)置自己的小目標（用戶可以選擇模板也可以進行自定義）。
• 在AI 對話框完善詳細資料。
• 一鍵生成健康計劃和打卡任務。
• 打卡任務建立后，AI 首頁會實時同步提醒。

設(shè)計亮點

• 目標即入口，靈活自由：用戶可以選擇系統(tǒng)設(shè)置好的打卡目標，也可以從一句“我想睡得更香”去建立自己的專屬目標。
• 結(jié)構(gòu)化提問，替用戶完成自我診斷：以“我想睡得更香”為例，系統(tǒng)通過睡眠狀態(tài)、入睡時長、睡前行為等問題，幫助用戶把模糊感受轉(zhuǎn)化為可分析變量。
• AI 自動生成“可打卡”的微行動：不是泛泛建議，而是直接給出可執(zhí)行、低負擔的具體行為（如調(diào)暗燈光、熱水泡腳）。
• 打卡與 AI 強綁定：從創(chuàng)建、執(zhí)行到反饋，始終在 AI 場景內(nèi)完成，避免任務系統(tǒng)與對話系統(tǒng)割裂。
• 即時正反饋與成長機制：打卡成功即獲得“健康福氣值”，通過情緒化動畫與數(shù)值反饋強化成就感。

體驗思考

這個智能體給了我兩點啟發(fā)。

第一，表單類操作（如添加就診人、填寫問卷等）可以直接在對話框中完成，無需跳轉(zhuǎn)到新頁面。實際體驗下來，這種設(shè)計不僅高效，還能保持用戶的使用連貫性。

第二，健康小目標就像常見的用戶簽到打卡功能，通過持續(xù)打卡增強用戶活躍度。但我認為最大的亮點在于：你可以在對話框中輸入想實現(xiàn)的目標，系統(tǒng)就會為你自動規(guī)劃。這正是自我決定理論（Self-Determination Theory）的絕佳體現(xiàn)，當用戶具備自主性和勝任感時，他們會感覺是在主動使用產(chǎn)品，而非被產(chǎn)品操控。

AI 拍皮膚：一體化皮膚管理流程

這還是我第一次如此細致地了解我的皮膚，因為阿福的 AI拍皮膚智能體更像一個一體化的皮膚管理工具。不僅可以拍患處、看舌苔，還可以測膚質(zhì)、測毛發(fā)。很幸運，工作了這么多年，我還沒有禿頭的跡象，AI 給我的測評是要注意休息、少熬夜，目前毛發(fā)良好。

設(shè)計亮點

• 多場景入口統(tǒng)一：拍患處、看舌苔、測膚質(zhì)、測毛發(fā)等能力集中在同一入口，用戶無需理解功能邊界，只需選擇“我想拍什么”。
• 漸進式診斷對話：先基于圖像給出初步提示，再通過關(guān)鍵追問（瘙癢時長、接觸史）逐步收斂判斷，顯著降低誤判焦慮。
• 強大的圖像識別能力：僅需拍攝患處照片即可完成分析,并提供專業(yè)的診療建議;
• 延續(xù)性關(guān)懷設(shè)計：微交互特別出色，通過「3 天后再聊」與訂閱提醒，將一次性問診轉(zhuǎn)化為持續(xù)的皮膚管理關(guān)系。

體驗思考

我不得不感嘆當今 AI 技術(shù)的飛速發(fā)展。當我完整體驗了看舌苔、測膚質(zhì)和測毛發(fā)這些功能時，雖然或許是我之前未曾留意，但還是給了我很大的震撼。AI 僅通過不同視角和角度的拍照，就能在短時間內(nèi)快速評估出用戶皮膚的健康狀況——這本身就是科技的巨大進步。我沒有去找 ChatGPT 探討背后的技術(shù)原理，只想從一個普通用戶的角度，表達我體驗這些技術(shù)時的真實感受。

藥管家：圍繞“用藥”的完整閉環(huán)服務

「藥管家」圍繞患者真實的用藥場景，將藥品識別、用藥管理、用藥指導、價格查詢與購買行為整合為連續(xù)流程。用戶從”我手上有什么藥/我需要吃什么藥”出發(fā)，可以自然完成從查詢、添加到用藥提醒，乃至購買的全鏈路操作。AI 在其中承擔持續(xù)輔助與決策支持角色。

這個環(huán)節(jié)讓我深刻感受到一個完整生態(tài)的價值——你在阿福就能實時查詢藥品價格、多維度對比，以及直接通過外賣配送或郵寄下單。

設(shè)計亮點

• 完整的閉環(huán)服務：藥管家并未將拍照識別、比價、用藥計劃、購買拆成孤立功能，而是圍繞“用藥”這一高頻行為，構(gòu)建單一連續(xù)路徑，符合用戶一次性完成任務的心理預期。
• AI 深度介入但不過度干預：AI 能基于上傳的藥品圖片與健康檔案，主動識別用戶意圖并給出結(jié)構(gòu)化用藥解讀，同時明確風險邊界，不替代醫(yī)生判斷，建立可信的“輔助者”形象。
• 用藥行為的時間化與自動化：通過用藥計劃，將一次性的藥品查詢轉(zhuǎn)化為持續(xù)行為管理，AI 與提醒機制共同承擔“記憶負擔”，降低用戶出錯與遺忘風險。
• 從認知到行動的順滑閉環(huán)：在用戶確認藥品信息與用法后，無縫銜接比價與購買場景，決策成本最低時提供轉(zhuǎn)化能力，既提升效率，也強化平臺價值。

體驗思考

C 端產(chǎn)品的頁面空間寸土寸金。當我添加了用藥提醒后，我突然意識到阿福的首頁其實是一個任務中心，而非傳統(tǒng)的科普資訊推薦區(qū)。特別是與安診兒 APP 相比，阿福的首頁雖然看起來千人千面,但它能夠感知、讀取并提醒用戶——無論是健康打卡、健康數(shù)據(jù)還是用藥提醒,這個卡片區(qū)的場景拓展與應用都關(guān)聯(lián)著整個產(chǎn)品的功能體系。

AI報告：診斷+ 診療閉環(huán)銜接

體驗到這里時，恰好我剛帶小孩去醫(yī)院做了個小檢查。拿到抽血報告后，我嘗試將報告拍給阿福，親身體驗了 AI 報告功能。與醫(yī)生相比，阿福的 AI 報告能幫助患者更系統(tǒng)、更完整地了解細節(jié)。醫(yī)生工作繁忙，雖然經(jīng)驗豐富、能快速判斷病情，但往往沒有足夠時間為患者詳細解釋。

AI 報告不僅為患者提供多輪對話追問，最后還會自然銜接 AI 診室、醫(yī)生解讀與醫(yī)院推薦，形成從”看不懂報告”到”下一步怎么做”的完整閉環(huán)。

設(shè)計亮點

• 一鍵式認知降噪：通過 AI 自動結(jié)構(gòu)化報告內(nèi)容，將專業(yè)醫(yī)學術(shù)語轉(zhuǎn)譯為用戶可理解的結(jié)論與建議，顯著降低信息理解成本。
• 過程可感知的分析狀態(tài)：掃描、脫敏、分析、整理結(jié)論以步驟化進度呈現(xiàn)，增強系統(tǒng)可見性，緩解用戶等待與不確定感。
• 分流式行動推薦：在 AI 解讀后明確給出“AI 繼續(xù)問診 / 真人醫(yī)生解讀”兩種路徑，尊重不同風險偏好與決策階段的用戶。
• 信任邊界清晰：通過「僅供參考、需遵醫(yī)囑」等提示，主動聲明 AI 能力邊界，避免過度承諾帶來的信任風險。

體驗思考

我們也許真的要認真思考如何利用 AI 來幫助我們更好地生活了，比如 AI 報告這樣的功能，它至少可以解決大部分患者對于專業(yè)報告的疑惑，了解 50%-70% 的基礎(chǔ)情況。過去的互聯(lián)網(wǎng)醫(yī)院可以解決全國城市醫(yī)療資源不對等的痛點，而隨著 AI 的加持，我覺得這種痛點會逐漸降低，就像 我在 AI 醫(yī)生分身那個環(huán)節(jié)提到的一樣，如果AI 可以把一個醫(yī)生過去幾十年的知識和就診經(jīng)驗復刻，那么無論我們在哪個城市，都能同時享受到這個醫(yī)生帶給社會的價值。

總結(jié)與思考

螞蟻阿福給了我哪些思考？

第一，傳統(tǒng)菜單欄會逐漸消失嗎？

正如我在第一部分討論的，阿福的對話式入口給了我很多啟發(fā)?？粗⒏頂D的頭部，我真切地感覺到——傳統(tǒng)菜單欄可能會在越來越多的產(chǎn)品場景中徹底消失。甚至連搜索欄這樣的功能，都會被 AI 輸入框替代。對話即交互，對話即搜索，對話即觸發(fā)，讓我們拭目以待。

第二，智能體驅(qū)動 AI 產(chǎn)品設(shè)計創(chuàng)新

我每天都在使用 ChatGPT，長久以來形成了一種刻板印象：對話式 AI 產(chǎn)品的設(shè)計平淡無聊，傳統(tǒng)的交互和界面設(shè)計似乎不再重要，取而代之的是功能邏輯和提示詞設(shè)計。但阿福的設(shè)計給了我新的啟發(fā)，打破了我對對話式 AI 產(chǎn)品的固有認知——未來的 AI 產(chǎn)品可以結(jié)合智能體做出更多創(chuàng)新，交互界面設(shè)計依然重要。

第三，對話式 AI 產(chǎn)品的應用場景將越來越廣

我想到了許多應用場景，特別是與醫(yī)療高度相似的政務領(lǐng)域，比如稅務、教育等。如果這些傳統(tǒng)行業(yè)引入對話式 AI 交互，將極大提升工作效率。試想一下，當你只需在稅務 APP 中輸入幾個字或說一段語音就能開始辦理業(yè)務，能為前臺工作人員節(jié)省多少時間？在這里給自己定個小目標：2026 年設(shè)計一款政企對話式 AI 產(chǎn)品，探索這個領(lǐng)域的設(shè)計趨勢。

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

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

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ù)的應用拆分成上、中、下游三個層，上層是 AI 的核心，主要是算法、大模型，中游是負責運行AI模型的硬件和支撐，即 AI 芯片、光模塊 CPO、高速內(nèi)存 HBM、服務器液冷、特高壓電路等，下游即 AI 具體的應用工具，包括 AI 軟件、硬件、智能體等。

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

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

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

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

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

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

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

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

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

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

因為其模型可用性極高，所以從去年開始付費用戶量暴增，在今年初預估年化收益已經(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ā)布也還不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。

再往前是否還記得使用 StableDiffusion 訓練 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 安裝和使用都需要學習和適應，生成結(jié)果還要做大量的調(diào)節(jié)和校準，這些就不是工作量，老板和產(chǎn)品經(jīng)理也一定能閑得每天學習新工具并且直接自己干？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、復選框（Checkbox）

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

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

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

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

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

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

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

   

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

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

三、單選按鈕（Radio Button）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

產(chǎn)品方案則是指通過制定或調(diào)整產(chǎn)品的功能、服務、表現(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)的部分。

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

尤其在一些對視覺要求不是特別嚴苛的環(huán)境中，UI設(shè)計的成果往往“能看”就夠了，領(lǐng)導或者面試官對設(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)鍵信息點。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

一、列表頁的基本認識

列表頁就是以展示列表 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è)計不是做一個好看整齊的重復性組件，而是將數(shù)據(jù)表格清晰有效的反映出來。

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

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

1. 屬性字段的影響

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

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

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

2. 屬性值的影響

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

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

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

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

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

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

而越是復雜的列表，包含的字段狀態(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ù)降诙寥?。所以目前的設(shè)計為了更好的塞入內(nèi)容，就會選擇在列表中插入其它數(shù)據(jù)，比如純運營廣告，也可能是內(nèi)容推薦，或者是模塊入口等。

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

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

1. 單列列表

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

引導型就是引導用戶點擊進入查看詳情，比如商品列表、酒店列表，是為了讓我們在列表中找到感興趣的內(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è)計）www.aknz.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務，咨詢電話：01063334945。

一、全文速覽圖

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

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

二、原因分析

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

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

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

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

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

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

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

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

四、如何看待平面能力

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

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

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

五、可復制的學習路徑

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

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

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

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

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

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

比如APP是一個大的分組，在這個APP的分組里面可以建各種各樣的畫板，像APP-首頁、APP-導航欄、APP-標簽設(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標簽，我們可能需要反復去創(chuàng)建的素材畫板里看各種各樣的標簽設(shè)計，這樣不止一次地反復看收集的素材，看的多了之后我們就對這些素材圖特別熟悉，這樣就不怕后面的設(shè)計再沒思路。

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

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

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