亚洲色在线费影院,伊人久久情人综岁的合网18,日本无遮真人祼交视频,日韩欧美p片内射久久-国产九九热视频,国产福利视精品永久免费,特级精油按摩一级毛片,国产精选视频在线观看,国产

首頁

設計工具 | 7 種工具助您實現(xiàn) Figma 工作流程的自動化

杰睿 設計資源

Figma 是設計師的游樂場,但有時感覺滑梯壞了,沙盒里充滿了錯誤。

你懷著設計精美作品的崇高目標打開文件……然后花了 90 分鐘調整按鈕、命名圖層,還和自己爭論字體大小。真有意思!

值得慶幸的是,有一些工具可以幫我們擺脫這種緩慢瘋狂的循環(huán)。這些工具可以幫我們處理那些無聊、重復的工作,這樣你就可以真正專注于設計,也就是你擅長的部分。

以下 7 種工具可自動化您的 Figma 工作流程。

1. MadeinFigma:跳過無聊的東西

將顯示縮放圖像
MadeinFigma.com 網(wǎng)站模型

讓我們從最明顯的開始。

MadeinFigma專為那些厭倦了第 47 次設計相同登錄屏幕的人而設計。它包含預置的產(chǎn)品套件、UI 組件、網(wǎng)站版塊、儀表板和產(chǎn)品流程。

從真實完成的布局開始,然后逐步構建,無需拖拽矩形框耗費三個小時。只需復制粘貼、調整,即可完成。

它不僅節(jié)省時間,還能讓你把腦力投入到實際問題上,比如如何為客戶設計一個美觀的身份驗證流程。

2. 內容卷軸:別再輸入“John Doe”了

將顯示縮放圖像
ContentReel 模型

你正在填寫表格。你需要一些示例姓名、郵箱、頭像和地址。你盯著屏幕。你的大腦卻無法想象出一個令人信服的虛擬人物。

這就是Content Reel發(fā)揮作用的地方。它會立即用真實的數(shù)據(jù)填充您的設計,這樣您就不必再假裝每個用戶都被命名為“測試用戶 3”。

使用它來插入看起來真實、行為真實的內容,并且不會讓您的 UI 看起來像是在真空中制作的。

3. Autoflow:輕松連接屏幕

將顯示縮放圖像
AutoFlow 模型

想要繪制流程圖嗎?厭倦了在 18 幀之間手動繪制箭頭嗎?

Autoflow可以自動完成這一切。選中兩個框架,砰,連接線就畫好了。這是 Figma 嚴重缺失的智能連接工具。

它非常適合展示用戶旅程,而不會讓您的畫布看起來像舊的犯罪調查委員會。

4. Similayer:像老板一樣管理你的圖層

將顯示縮放圖像
Similayer 模型

你的 Figma 文件有 300 個圖層。你想更改所有按鈕的顏色。手動選擇它們是一種數(shù)字自殘。

Similayer允許你選擇所有具有相同屬性的圖層,例如文本樣式、填充、描邊等。只需單擊一下,即可將所有圖層整合在一起進行編輯。這真的很讓人滿意。

使用它來進行清理、批量編輯,或者在周一早上感受強大的力量。

5. Iconify:無盡圖標,零遺憾

將顯示縮放圖像
Iconify 模型

沒有 Iconify 的設計就像沒有清單去買東西。你以為你會記得你需要什么,結果回來時卻只帶了一罐豆子,心中充滿了深深的恐懼。

Iconify讓您無需離開 Figma 即可訪問超過 100 個圖標集,包括 Material、Feather、FontAwesome 等。

非常適合當您的設計尖叫“在這里添加一個圖標”時,您尖叫著回答“哪一個?!”

6. FigGPT:讓人工智能來做

將顯示縮放圖像
FigGPT 模型

我們生活在人工智能時代,老實說,我們最好也傾向于人工智能時代。

FigGPT是一個 AI 插件,它可以幫助生成占位符副本、建議布局想法,甚至在你的大腦退出聊天時命名你的框架。

它并不完美。它仍然把按鈕叫做“請點我”。但在截止日期前,它是個不錯的數(shù)字伙伴。

7. Design Lint:捕捉你錯過的東西

將顯示縮放圖像
設計 Lint 模型

你知道嗎,當你完成設計,準備展示的時候,有人指出你的行高正好有一幀不對嗎?是的,我也遇到過這種情況。

Design Lint會檢查您的文件是否存在不一致、缺少樣式、未鏈接的元素、異常顏色,這樣您就不會在下次審核中受到批評。

這就像一個一絲不茍的實習生,他唯一的目的就是指出你的錯誤,但是很客氣。

提示:不要讓自動化讓你變得懶惰

這些工具可以提供幫助,但它們并不能取代實際的品味和判斷。

使用自動化可以節(jié)省時間,減少錯誤,避免重復做 400 次相同的任務。但仍然需要檢查間距。仍然需要調整字體排版。仍然需要進行一些巧妙的設計,讓最終產(chǎn)品更具人性化。

因為雖然機器人很擅長替換你的 lorem ipsum,但它們仍然無法決定你的號召性用語應該是“立即購買”還是“開始旅程”。

 

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

如何為 AI 設計和代碼生成器編寫更好的提示

杰睿 設計資源

由于 AI 設計和代碼生成器在設計過程中迅速發(fā)揮積極作用,因此了解如何充分利用這些工具至關重要。如果您使用過 Cursor、Bolt、Lovable 或 v0,您就會知道,輸出的好壞取決于輸入。

以下是我用來引導 AI 實現(xiàn)實用、可用且美觀的 UI 的結構化提示格式。它包含 5 個部分:

  1. 上下文(你想要構建什么)
  2. 描述(AI 應該考慮的事情;設計優(yōu)先級)
  3. 平臺(您的目標平臺)
  4. 視覺風格(你希望在 AI 生成的設計中看到的視覺屬性)
  5. 要包含的 UI 組件(您希望在頁面/屏幕上看到的特定組件列表)

快速提示:如果您想了解如何使用此提示格式生成真實的 UI,請查看本教程:

1. 背景

首先用一句話清晰地定義你的設計內容。這有助于 AI 在深入視覺效果之前理解頁面/屏幕的目的和范圍。

定義 context 時執(zhí)行以下操作

  • 為現(xiàn)代投資應用程序設計一個時尚、信息豐富的主屏幕。 ”
  • 為食品配送應用程序創(chuàng)建一個最小的結賬屏幕。 ”
  • 生成用于跟蹤健身進度的移動儀表板 UI。 ”

定義上下文時應避免這種情況

  • 為醫(yī)療保健應用程序制作漂亮的 UI 屏幕。 ”
  • 為兒童玩具創(chuàng)建一個很酷的主頁。 ”

2. 描述

描述應該簡短扼要地闡述此設計最重要的方面。解釋最重要的方面:用戶目標、內容優(yōu)先級和交互細節(jié)。這將引導 AI 朝著正確的方向發(fā)展,使其專注于功能,而不僅僅是美觀。

撰寫描述時請執(zhí)行以下操作:

  • 用戶應該立即看到關鍵投資組合統(tǒng)計數(shù)據(jù)、最近的變化,并通過清晰度和數(shù)據(jù)層次結構獲得信心。 ”
  • 突出顯示每日變化和見解,同時保持‘查看投資組合’等操作易于訪問。 ”

快速提示:在解釋 AI 在設計屏幕/頁面時應該考慮哪些因素時,請嘗試將重點從輸出轉移到結果。“幫助用戶了解當前的市場趨勢,并提供快速操作,以便他們能夠根據(jù)看到的信息快速采取行動。”

3.平臺

指定設備和操作系統(tǒng)以幫助符合平臺指南和限制,例如屏幕尺寸、布局行為和該平臺上可用的本機組件。

這樣做

  • iOS 17 / iPhone 14(390 x 844),使用人機界面指南
  • “Android Material 3 / Pixel 6 Pro (360 x 800)”
  • “桌面分辨率(1440x1024)的 Web 應用程序,響應式布局”

避免這種情況

  • 移動” (太模糊)

4.視覺風格

定義基調和感覺。你希望你的設計如何被用戶感知?它應該平靜嗎?企業(yè)風格?還是年輕?添加可訪問性需求(例如對比度或可讀性)和樣式方向(例如,模塊化、卡片式、微妙的漸變)。

在描述視覺風格時這樣做:

  • 專業(yè)、冷靜、值得信賴。使用海軍藍、森林綠和柔和的灰色。
  • “模塊化卡片布局,帶有微妙的陰影和漸變。”
  • “字體在小尺寸下也應該優(yōu)雅且清晰。”

描述視覺風格時應避免這種情況

  • 使它美麗”(美麗是主觀的;描述屬性)

快速提示:為 AI 提供對比度和可訪問性指導:“確保文本對比度為 4.5:1。支持暗模式和亮模式。 ”

5. 需要包含的 UI 組件

分解屏幕上需要顯示的內容。思考結構(頂部導航、正文、頁腳)和敘事(用戶首先看到的內容以及他們應該采取的操作)。使用占位符和示例來支持描述,以便 AI 準確呈現(xiàn)細節(jié)。

描述組件時請執(zhí)行以下操作:

  • 從上到下開始。思考一下在頁眉、正文和頁腳中添加哪些組件。
  • 在描述 UI 組件時,請?zhí)峒八鼞摼哂械木唧w內容,例如視覺屬性或功能行為。
  • 提供內容和交互示例——例如容器的內容(即 UI 中卡片的內容)、表單輸入字段的占位符文本等。這將使您的設計與您正在解決的任務更加相關

從優(yōu)秀到卓越的 UI 動畫技巧 改善 UI 微交互的實用建議。

杰睿 設計資源

使標簽中的內容滑動。

將顯示縮放圖像
左側的內容淡入淡出。右側的內容隨標簽滑動。

連接卡片的共享元素。

將顯示縮放圖像
左側的內容會打開一個新的屏幕并向上滑動。右側的卡片會展開并填滿整個屏幕。

在您的內容中使用級聯(lián)效果。

將顯示縮放圖像
左邊的卡片通過滑動和淡入出現(xiàn)。右邊的卡片具有相同的動畫,但每張卡片都有短暫的延遲。

使內容將其他元素推開。

將顯示縮放圖像
左側的動畫在其他內容之上進行動畫處理。右側的動畫隨著內容的擴展而將其推出。

使菜單在上下文中顯示。

將顯示縮放圖像
左側菜單從下方飛入。右側菜單從創(chuàng)建它的操作展開。

使用按鈕來顯示不同的狀態(tài)。

將顯示縮放圖像
左側的按鈕顯示指示狀態(tài)的文本。右側的按鈕使用容器來顯示不同的事件。

引起對重要事物的關注。

將顯示縮放圖像
左側的示例使用顏色和位置來突出元素。右側的示例使用微妙的動畫來吸引用戶的注意力。

結論

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

打造高影響力產(chǎn)品的 5 步 AI UX 策略

杰睿 設計資源

在打造推動客戶實質性改進的 AI 體驗時需要考慮的戰(zhàn)略因素。

圖文并茂:AI UX 手冊 — 5 步打造卓越用戶影響力

每個人都在爭相打造 AI 體驗,但產(chǎn)品真的能達到預期效果嗎?作為用戶體驗領導者,掌控產(chǎn)品方向是我們的榮幸。這意味著我們要思考 AI 如何在用戶體驗中呈現(xiàn),以及它對用戶的實際意義。

啟動變革性人工智能的秘訣

僅僅擁有AI功能已經(jīng)遠遠不夠了。AI成本高昂,如果執(zhí)行不力,還會給用戶帶來更多不便。其他設計師和技術人員之前也曾抱怨過這個問題,所以我就不再贅述了。那么,作為一名用戶體驗領導者,你該如何才能更好地定位你的公司和團隊,從而有效地推出AI技術呢?

  1. 出于正當理由
  2. 組建你的 AI A 團隊
  3. 了解你的工作內容
  4. 奠定基礎
  5. 共同塑造未來

第一步:出于正確的理由

回歸本源

不要僅僅為了 AI 而構建。要識別用戶最緊迫、最普遍的問題。需要注意的危險信號:

  • 產(chǎn)品主題或計劃應以“為我們酷炫的產(chǎn)品線打造生成式人工智能聊天機器人”之類的形式呈現(xiàn),而不是“利用人工智能簡化我們酷炫產(chǎn)品線的客戶工作流程”
  • 該組織正在尋找將 AI 添加到產(chǎn)品中的方法,而不是識別可以通過 AI 提高 10 倍或 100 倍的體驗缺陷或手動交互

與產(chǎn)品負責人、業(yè)務利益相關者和客戶擁護者進行交流,探討如何推動變革。與客戶溝通,了解他們的工作方式,并提供可靠的數(shù)據(jù)來驗證你的假設。

人工智能是正確的選擇嗎?

好了,你確定了主要問題,但人工智能真的是正確的方法嗎?數(shù)字公共服務中心的評估報告《人工智能是否是正確解決方案》提供了一些指導,可以幫助你入門:

  • 所需的數(shù)據(jù)充足,且使用安全合乎道德
  • 任務規(guī)模較大重復性較強
  • 有助于在現(xiàn)實世界中取得成果

來到耶穌面前的時刻

如果人工智能很合適,答案不應該總是聊天機器人,但很多公司卻這么認為。如果你的公司也這么認為,那么你還有很多工作要做。首要考慮因素應該是價值,而秘訣在于組織對價值的認同。

定義貴組織的AI 愿景和目標——參考 Thrive 文章《如何創(chuàng)建 AI 愿景聲明》中的建議,共同制定愿景和目標。運用 AI 技術,增強用戶體驗 (UX) 或產(chǎn)品團隊的目標聲明。

第 2 步:組建你的 AI A 團隊

確定可以支持您的團隊及其 AI 計劃的聯(lián)系人。

  • 客戶擁護者——找到與客戶有直接聯(lián)系的人
  • 最終決策者——了解批準計劃并簽署支票的領導者,正如他們所說
  • 關鍵影響者——找出對人工智能充滿熱情或組織內值得信賴的顧問
  • 主題專家——了解您的團隊需要咨詢哪些專家
  • 執(zhí)行功能——找到擁有合適技能的團隊成員來實現(xiàn)你的愿景
AI A 團隊矩陣(客戶擁護者、最終決策者、關鍵影響者、主題專家和執(zhí)行職能),詳細說明每個人的重要性、示例角色或頭銜、他們如何提供幫助等
與你的 AI A 團隊建立關系對于你的 AI 之旅至關重要

雖然您可能沒有能力動員這些同事或工作伙伴,但建立聯(lián)系并尋求建議仍然有助于進一步推動您的計劃。

在整個組織內培養(yǎng)關系對于讓你被看到并建立信任非常重要。

獲得認可并引起轟動

在這個部分,您需要進行認真的、有時可能令人不快的對話,以通知、協(xié)作、獲得批準或召集 AI A 團隊的各個成員。

  • 在整個組織內傳播愿景
  • 驗證發(fā)現(xiàn)、決策等
  • 協(xié)調行動項目和后續(xù)步驟
  • 讓人們對愿景和人工智能之旅感到興奮

步驟 3:了解您正在處理的內容

引導您和您的團隊更好地了解您正在建設的環(huán)境。

衡量產(chǎn)品智能成熟度

您的組織或產(chǎn)品在智能化道路上處于什么階段?您是從零開始,還是只實現(xiàn)了少量自動化,還是已經(jīng)擁有許多 AI 功能?這里需要考慮的重點是當前狀態(tài),而不是路線圖或理想的未來。

產(chǎn)品智能成熟度規(guī)模:手動工作流程、業(yè)務邏輯自動化、機器學習和狹義人工智能
簡化的產(chǎn)品智能成熟度量表
  • 手動工作流程——完全沒有自動化
  • 業(yè)務邏輯自動化——特定功能的靜態(tài)業(yè)務規(guī)則
  • 機器學習和狹義人工智能——僅限于特定任務的卓越能力
  • 通用人工智能和超級人工智能——未納入該范圍,因為它們仍處于理論階段

通過大致了解您的組織所處的狀況,您可以確定您的組織為了實現(xiàn)愿景必須達到的成熟度級別。

評估平臺技術準備情況

UI 的底層隱藏著什么?它是否采用了合適的技術架構來支持 AI 開發(fā)?在真正投入 AI 工作之前,你需要解決多少技術債務?

在架構師和開發(fā)人員的幫助下,您的團隊可以全面評估您的平臺的定位。雖然我不推薦 Domo,但他們有一篇很棒的文章《AI 就緒性:評估您的業(yè)務的完整指南和免費清單》,您可以參考。

  • 基礎準備——包括基礎設施平臺、數(shù)據(jù)源和軟件包
  • 運營準備——包括指導方針、人員配備、治理、合規(guī)性和風險

了解這一點可以告訴你,你的努力是否會實現(xiàn)、是否會被推遲,或者是否會徒勞無功。

第四步:奠定基礎

指導工作的是什么

定義AI 設計原則,打造富有影響力的用戶體驗。您可以從 VUX 的AI 設計原則中找到靈感。通過補充和完善概念的原則,強化既定的 AI 愿景和目標。

設計師的驅動力

不斷提升您的 UX 實踐以提供完善的 AI非常重要。

  • 確保您的團隊掌握最新的設計最佳實踐,例如Maria Margarida 撰寫的《使用 AI 進行設計:用戶體驗和最佳實踐》這篇文章
  • 在自己的設計工作流程中積極使用人工智能,親身體驗人工智能,并通過實踐獲得見解
  • 定期互相分享提示、資源和學習成果
  • 做好你每天要做的事情——磨練用戶體驗專業(yè)知識,改進研究和設計實踐,并定期與客戶互動

是什么讓團隊繼續(xù)前進

與工作伙伴保持定期溝通并遵循最佳實踐。

  • 知道何時讓參與
  • 建立異步渠道和會議節(jié)奏

經(jīng)驗告訴我們什么

您的團隊是否渴望開始深入研究數(shù)據(jù)?對于注重工程設計的組織,或者為了實現(xiàn)并行方法,您的團隊也可以專注于數(shù)據(jù)準備。您可以先清理和準備一些基礎數(shù)據(jù)集,以及一些您認為能夠帶來價值的專業(yè)數(shù)據(jù)集:

  • 帳戶和用戶數(shù)據(jù)
  • 記錄應用程序和傳感器數(shù)據(jù)
  • 所需第三方的 API
  • 元數(shù)據(jù)和標簽

通過清理信息并將數(shù)據(jù)輸入 AI 模型,您仍然可以在現(xiàn)有路線圖上開展工作,同時為 AI 計劃取得一些進展。這樣,您就可以在對現(xiàn)有數(shù)據(jù)集執(zhí)行深度學習關聯(lián)時讓數(shù)據(jù)為您提供指導,從而進一步研究特定經(jīng)驗用例。

第五步:共同塑造未來

AI交互模式

要利用 AI 解決客戶問題,團隊必須仔細思考 AI 如何在系統(tǒng)中運行,以及它將如何影響用戶體驗。請使用下方矩陣來指導討論和決策。

  • 參與——要求與人工智能進行主動、明確的互動
  • 嵌入式——精心策劃的集成 AI 體驗
  • 隱形——用戶無法與人工智能直接互動
AI 交互模式矩陣,突出顯示參與、嵌入和隱形模式的屬性
用于戰(zhàn)略討論的人工智能交互模式矩陣
Microsoft Copilot 參與式 AI 交互模式示例的 GIF
參與式 AI 交互模式示例——Copilot 的語義索引
Microsoft Copilot 嵌入式 AI 交互模式示例的 GIF
嵌入式 AI 交互模式示例 - 使用 Copilot for PowerPoint 重寫

真正的用戶倡導者提出的問題

  • 這會增加用戶的交互需求嗎?會增加多少?付出的努力是否值得?
  • 這將對我們的客戶的生活質量產(chǎn)生哪些具體的影響?他們是否有能力或意愿付費來實現(xiàn)這些收益?
  • 實施這一舉措是否需要客戶采取額外的措施?擴大規(guī)模后,還需要付出多少努力才能保持這種模式?

通過令人信服的研究綜合做出決策

確保不錯過任何機會,分享在探索過程中、通過用戶反饋或分析所獲得的經(jīng)驗。及時向業(yè)務和產(chǎn)品利益相關者匯報研究結果,確保路線圖的優(yōu)先事項得到數(shù)據(jù)支持。

可視化路線圖里程碑

用戶體驗團隊還可以通過有效的可視化,在幫助利益相關者更好地確定工作優(yōu)先級方面發(fā)揮關鍵作用。與產(chǎn)品經(jīng)理合作,模擬代表最終愿景、第一步以及最終實現(xiàn)之前的幾個中間階段的英雄體驗,這些體驗可以映射到交付時間表和階段。

衡量影響

確保你能定量和定性地衡量結果。包括領導層的投資回報率 (ROI) 和產(chǎn)品團隊的關鍵績效指標 (KPI)。雖然我不推薦這些方法,但Arounda 的《人工智能用戶體驗:完善人工智能產(chǎn)品指標的 10 個技巧》提供了很好的例子:

  • 用戶參與度、用戶保留率
  • 轉化率、采用率和使用率
  • 效率和生產(chǎn)力

底線

如果您已經(jīng)為客戶提供了良好的服務,那么打造高影響力的 AI 體驗應該輕而易舉。但陷阱在于,組織對 AI 愿景或目標的看法不一致,以及您的產(chǎn)品技術能力尚未為 AI 做好準備。作為一名設計領導者,您擁有獨特的優(yōu)勢,只需稍加挖掘、拓展人脈,并打破常規(guī)思維,就能引領變革。

步驟:1. 出于正確的理由去做 2. 組建你的 AI A 團隊 3. 了解你的工作內容 4. 奠定基礎 5. 共同塑造未來
TLDR:打造高影響力產(chǎn)品的 5 步 AI UX 策略手冊

進一步閱讀

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

? 審美積累 | Misso 工作平臺設計賞析

杰睿 設計資源

信息密度高,也可以呼吸感十足。
今天分享一組我非常喜歡的 Web UI 作品——Misso 工作效率平臺設計。項目來自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 場景,設計在視覺和信息組織之間達成了很好的平衡。
這組設計最吸引我的是**「信息密度與視覺節(jié)奏的平衡」**。它大量使用網(wǎng)格和卡片進行內容分區(qū),同時通過圓角、灰階配色和輕量圖標,削弱了B端界面的壓迫感。
核心亮點:
  • 主色冷靜理性,大量留白讓復雜信息不擁擠
  • 字體層級明確,搭配簡潔圖標強化指向性
  • 模組化卡片設計,兼容多種信息類型、適配響應式場景
  • 微交互動效自然,增強可用性但不喧賓奪主
使用感受:
這類視覺風格在“效率類”工具平臺中非常常見,但 Misso 的版本尤其**“親切”**,不像傳統(tǒng) B 端那么冷峻??梢宰鳛?CRM、任務管理、數(shù)據(jù)看板等平臺的風格參考。
適用場景建議:
適合 B 端 Web 產(chǎn)品、數(shù)據(jù)儀表盤、工作流工具等高信息密度的頁面,特別適合希望在「專業(yè)感」與「友好性」之間找到平衡的產(chǎn)品團隊。
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

表盤設計分享【一】

杰睿 設計資源

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

在數(shù)字產(chǎn)品設計中,響應式設計早已成為連接功能與體驗的關鍵路徑。智能手表的表盤,作為最核心的信息承載區(qū),正在向“可感知、可適配、可延展”的方向不斷演進。而我們將其類比為“數(shù)字卡片”,正是因為二者在設計邏輯上的高度契合:都追求信息層級的清晰展現(xiàn)、內容與場景的靈活適配,以及操作的直觀反饋。

卡片設計以模塊化、結構清晰、響應靈活著稱,能在不同屏幕與使用場景中自如調度內容展示方式。而智能手表的表盤設計同樣需要在極小的顯示空間內,精準傳遞時間、健康、通知等多維度信息。通過響應式設計的引入,表盤可以根據(jù)環(huán)境光線、使用者習慣、交互狀態(tài)等動態(tài)變化,自動調整元素的排布與表現(xiàn)形式,實現(xiàn)“信息即所需,界面即交互”。

例如,在運動狀態(tài)下表盤可自動突出心率與步數(shù);而在夜間,它又能切換為更具護眼性的低亮模式。這種“感知上下文”的能力,讓表盤從一個靜態(tài)的界面,變?yōu)橐粋€貼近用戶、主動適應的智能卡片。

響應式的表盤設計,不僅提高了使用效率,更拓展了產(chǎn)品體驗的邊界。它像一張隨時變化的數(shù)字卡片,安靜卻聰明地陪伴在你腕間,把復雜的系統(tǒng)邏輯轉化為可感知的溫柔細節(jié)。

 

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

如何通過單個視覺組件將信息可視化

杰睿 設計資源

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

單個視覺組件實現(xiàn)信息可視化,并非簡單的圖形替代文字,而是通過視覺語法構建信息的傳遞路徑,讓接收者以最低認知成本獲取核心內容。?
以最基礎的柱狀圖為例,若僅展示單一數(shù)據(jù)維度,確實顯得單薄。但通過優(yōu)化設計,它能承載更豐富的信息:柱體高度對應數(shù)值大?。ɑA信息),柱體顏色飽和度區(qū)分數(shù)據(jù)可信度(附加維度),柱體頂部的小三角標記同比增長率是否為正(關聯(lián)指標)。這三個設計元素共同作用,使一個柱狀圖既能呈現(xiàn)具體數(shù)值,又能說明數(shù)據(jù)質量與增長態(tài)勢,信息密度提升卻未增加理解難度。?
視覺組件的有效性,取決于信息層級的清晰劃分。像儀表盤的設計,指針指向的刻度是核心信息(當前值),表盤顏色分區(qū)(綠色、黃色、紅色)界定正常、預警、危險區(qū)間(判斷標準),指針末端的細微抖動表示數(shù)據(jù)采集的實時性(動態(tài)屬性)。這種設計讓觀者先捕獲核心數(shù)值,再通過輔助視覺元素理解數(shù)值所處的語境,符合人類認知的遞進規(guī)律。?
關鍵在于找到數(shù)據(jù)間的內在關聯(lián)性,并轉化為可感知的視覺關聯(lián)。例如用樹狀圖展示公司組織架構時,方塊面積對應部門人數(shù)(數(shù)量關系),方塊間的距離表示協(xié)作頻率(關聯(lián)強度),方塊顏色表示績效等級(評價維度)。三個視覺變量相互配合,一個組件就能說清 “有多少人”“協(xié)作如何”“表現(xiàn)怎樣” 三個層面的信息,且這些信息通過空間布局形成有機整體,而非孤立存在。?
優(yōu)質的單個視覺組件,是在有限視覺空間內建立信息的有序結構,讓每個視覺元素都承擔明確的信息傳遞功能,既不冗余也不缺失,實現(xiàn) “一圖抵千言” 的精準傳達。
 
蘭亭妙微(www.ynkmey.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

如何用ChatGPT的新圖像生成器創(chuàng)建UI(4o)

杰睿 設計資源

ChatGPT 是否有可能生成 UI?

我之前測試過幾次,但結果卻令人失望。

下面是我兩個月前在一份時事通訊中分享的一個例子。

升級前通過 ChatGPT 生成

它看上去太卡通了,不太實用。

然而,上周,OpenAI 推出了一個重大更新,所以我決定再次嘗試。

根據(jù)我的提示,我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個設計選項:

通過 ChatGPT 生成

今天,我將向你們展示我進行的實驗、我使用的提示以及過程中的一些驚喜和收獲。

讓我們開始吧。

背景

OpenAI 宣布,現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質量圖像,而不是使用較舊的 DALL·E 模型。

它更擅長遵循指令,并且可以更好地呈現(xiàn)圖像中的文本。

上周,許多人嘗試將照片轉換成人工智能藝術作品——這就是吉卜力風格藝術潮流流行的原因。

我也嘗試過:

通過 ChatGPT 生成

但在網(wǎng)上看到很多有趣的藝術作品后,我想:

如果我可以使用 ChatGPT 生成對產(chǎn)品設計師真正有用的 UI 會怎么樣?

實驗就是從這里開始的。

實驗

1. 創(chuàng)建詳細的提示

我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細提示。

# 為名為“SkillVerse - 熱門微課程”的應用設計一個簡潔、現(xiàn)代的移動 UI 界面(iOS 風格)。布局應遵循以下結構化部分。## 1. 狀態(tài)欄(頂部)- **樣式**:標準 iOS 布局(頂部安全區(qū)域)---## 2. 標題部分- **居中標志**:“SkillVerse”  - **字體**:中等粗細,小尺寸  - **顏色**:藍色文本  ---## 3. 特色課程輪播(水平滾動)- **風格**:具有圓角和柔和陰影的可滑動卡片  - **卡片**:    -**卡 1**      - 標題:**動態(tài)設計簡介**      - 字幕:*4 月 2 日開始*      - 視覺:動畫縮略圖    -**卡 2**      - 標題:《自由職業(yè)者精通 Excel》      - 字幕:*3 月 31 日開始*      - 視覺:生產(chǎn)力圖標  ---## 4. 導航標簽-**標簽**:    - **趨勢**(活躍,**粗體標簽**帶有**藍色下劃線**)    - 受到推崇的    - 已注冊    - 已保存  ---## 5. 過濾行- **過濾器(下拉菜單)**:    - **過去 7 天**(基于時間)    - **所有主題**(類別)    - **所有級別**(難度)  ---## 6. 熱門課程列表- **布局**:可重復課程項目的垂直堆疊:  - **左**:圓形縮略圖    - **中心**:      - 課程名稱      - 級別(例如,初學者、中級等)    - **右**:保存圖標  - **底部**:入學人數(shù) + 趨勢(例如,入學人數(shù) 2.4k,+12%)   ---## 7. 底部導航欄-**標簽**:  - **主頁**(活動,突出顯示顏色)    - 搜索    - 活動    - 輪廓  - **風格**:    - 下方有標簽

然后我將其粘貼到 ChatGPT 中的新聊天窗口中,然后單擊“生成”圖標。

2. 生成代碼支持的 UI

令人驚訝的是,ChatGPT 在右側打開了一個額外的面板,觸發(fā)了它的 Canvas 功能。然后它開始生成代碼。

這立刻讓我想起了克勞德的神器功能。

ChatGPT 的屏幕截圖

然后我點擊了右上角的“預覽”按鈕。

生成了響應式、代碼支持的 UI。

ChatGPT 的屏幕截圖

看起來很有趣,但似乎不如克勞德那么精確/精致。

3. 要求提供視覺模型

由于我的目的只是生成一個圖像(一個可視化模型)而不是一個代碼支持的 UI,因此我請求后續(xù)提示來糾正它:

創(chuàng)建一個可視化模型。而是一個視覺模型。

結果如下:

通過 ChatGPT 生成

結果出乎意料地好,尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個巨大的提升。

測驗:你能在上述 AI 生成的 UI 中找到多少個拼寫錯誤?:)

4. 要求縮小用戶界面

盡管用戶界面看起來不錯,但我仍然對圖像截斷感到有點困擾,所以我問了:

頂部和底部看起來有點截斷。您能將 UI 縮小 20% 左右,讓它整體更小一些嗎?頂部底部看起來有點截斷。您能將 UI 縮小20%左右, 讓它整體更小一些嗎?

結果如下:

通過 ChatGPT 生成

看起來不錯!

5. 要求生成設計選項

然后我開始更有創(chuàng)意了……我想,如果我讓它生成多個設計方案供我參考會怎么樣?那會更有幫助!

所以我寫了這個:

創(chuàng)建三個設計選項。使用相同的核心內容,但根據(jù)以下描述改變布局、UI 元素和視覺重點:選項 1. 大膽且引人入勝- 優(yōu)先考慮視覺沖擊力和品牌表達選項 2. 功能強大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面,卡片更小,信息層次更密集選項3.個性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個性化- “為你推薦”輪播,包含人工智能策劃的課程建議- 社會證明(頭像、徽章、朋友活動)- 添加“社區(qū)”選項卡,用于同行共享內容

結果如下:

通過 ChatGPT 生成

再次,我對 GPT-4o 圖像生成能力的提升感到震驚。

雖然這三個選項看起來仍然非常相似,但如果仔細觀察,就會發(fā)現(xiàn)一些小細節(jié) - 例如“搜索”圖標、社交證明和副本 - 試圖使每個版本都與其他版本區(qū)分開來。

不過,結果肯定還有改進的空間。例如,由于一張圖片中包含了大量信息,ChatGPT 的精度開始下降。你可能會注意到,部分文本變得無法識別/扭曲。

6. 將設計轉換為 Figma 文件

接下來,作為一個有趣的測試,我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺模型生成 Figma 設計。

Figma 中的屏幕截圖

所有組件(包括文本)都可以在 Figma 中編輯。

它使用的字體系列是 Intel。

好得可怕。

如果我想進行更改,這使我能夠自定義 UI 模型。

最后的想法

ChatGPT 生成 UI 視覺模型的能力是一個巨大的提升。與之前版本相比,它提供了更高的精度和對提示的遵循性。

話雖如此,速度還是有點慢,準確率還有待提高。有時圖像生成到一半就停止了;有時結果很隨機,而且與指令不完全一致。

當我要求 ChatGPT 根據(jù)設計選項創(chuàng)建 3D 模型時,事情變得有點扭曲和奇怪——但還不算太糟。

通過 ChatGPT 生成

不管怎樣,這已經(jīng)是一次很棒的升級了。我現(xiàn)在能生成以前無法生成的東西了。

這一切都在 ChatGPT 聊天窗口內完成。多么方便啊?

我非常興奮并希望未來會有更好的升級。

審美積累 | UI設計中的“刻度”設計【一】

杰睿 設計資源

刻度設計在復雜與模糊之間,它提供了一種可感知的秩序,建立人與界面之間的信任錨點。
 
 
刻度設計是界面里的“呼吸感”
你有沒有注意過那些不動聲色卻讓界面莫名安心的設計?
比如一個滑塊的刻度,或者儀表盤上細微的分隔線——
它們不說話,但你總覺得:“嗯,這個界面有邏輯。”
 

2a4b2036-0a43-48d3-af0b-056b37310c5a.jpeg

3f5fa7f8-353c-4149-8ee0-0ec46f6609d6.jpeg

32d7a208-0ccc-4b43-8bcf-be5ac49a5b9d.jpeg

1280X1280 (1).JPEG

1280X1280.JPEG

ba7a63e2-3dd1-451a-bfb5-568c32e85264.jpeg

d771f67f-a6f1-446d-8ec1-e9ae9e911b91.jpeg

eab201ff-36a2-422b-96e6-71684a7412cc.jpeg

output.jpg

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

UI 設計|提高審美|極簡扁平過時嗎?

杰睿

在做UI界面時,極簡扁平一直是個穩(wěn)妥又高適配的選擇。它沒有復雜的質感和裝飾,更強調清晰、直接和功能導向,能快速搭建出干凈、有秩序的界面,適合大多數(shù)場景落地。
但是也確實有太多太相似的極簡導致確實辨識度,這中間要怎么平衡?平淡的極簡扁平風格已經(jīng)過時了嗎?

999817119037557.61deac4aa9171 (2).jpg

DM_20250527234137_001 (1).JPG

DM_20250527234137_001 (2).JPG

DM_20250527234137_001 (3).JPG

DM_20250527234137_001 (4).JPG

DM_20250527234137_001 (5).JPG

original-5cb00744f2589b4d9ea4fc8e5b355f26.png

original-6c39ea5c4b1001b13b0bad964c266a26.JPG

original-9e2e1af05af9a1337d76981d6fa961c0.JPG

original-1681ab12ce8ed1787e5836b2fbc06e92.JPG

original-4820af566a0239fa574d7ae876bc7178.gif

original-96947351752ea6576802c130a69393d1.JPG

original-b1c5d1370e23c8c5f5a76a36add69d28.png

核心特點:
無陰影、無漸變,色彩純凈,強調色塊區(qū)分信息
圖標和控件極簡化,風格統(tǒng)一,識別度高
多用系統(tǒng)字體或無襯線字體,方便信息閱讀
布局以網(wǎng)格為基礎,留白充足,邏輯清晰
適合場景:
工具類 / B端后臺 / 數(shù)據(jù)展示類產(chǎn)品
教育、資訊類平臺,注重信息承載與閱讀體驗
想快速搭建產(chǎn)品雛形、做組件庫規(guī)范的項目
使用體驗: 對設計師來說,扁平風是效率高、容錯率低的一種經(jīng)典實用風格。它能幫助我們聚焦在信息結構、交互流程和排版邏輯上,適合組件復用、團隊協(xié)作、甚至快速出圖。 而對用戶來說,扁平風界面看起來更“輕”,更容易理解和操作,沒有過多干擾。
你在工作中還會用扁平風嗎?有沒有遇到難把控“簡約不等于簡單”的情況?歡迎一起討論~

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

日歷

鏈接

個人資料

藍藍設計的小編 http://www.ynkmey.cn

存檔