<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

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

          杰睿 設計資源

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

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

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

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

          1. 背景

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

          定義 context 時執行以下操作

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

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

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

          2. 描述

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

          撰寫描述時請執行以下操作:

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

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

          3.平臺

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

          這樣做

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

          避免這種情況

          • 移動” (太模糊)

          4.視覺風格

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

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

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

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

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

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

          5. 需要包含的 UI 組件

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

          描述組件時請執行以下操作:

          • 從上到下開始。思考一下在頁眉、正文和頁腳中添加哪些組件。
          • 在描述 UI 組件時,請提及它應該具有的具體內容,例如視覺屬性或功能行為。
          • 提供內容和交互示例——例如容器的內容(即 UI 中卡片的內容)、表單輸入字段的占位符文本等。這將使您的設計與您正在解決的任務更加相關。
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

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

          杰睿 設計資源

          使標簽中的內容滑動。

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

          連接卡片的共享元素。

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

          在您的內容中使用級聯效果。

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

          使內容將其他元素推開。

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

          使菜單在上下文中顯示。

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

          使用按鈕來顯示不同的狀態。

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

          引起對重要事物的關注。

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

          結論

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

          打造高影響力產品的 5 步 AI UX 策略

          杰睿 設計資源

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

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

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

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

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

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

          第一步:出于正確的理由

          回歸本源

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

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

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

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

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

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

          來到耶穌面前的時刻

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

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

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

          確定可以支持您的團隊及其 AI 計劃的聯系人。

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

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

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

          獲得認可并引起轟動

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

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

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

          引導您和您的團隊更好地了解您正在建設的環境。

          衡量產品智能成熟度

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

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

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

          評估平臺技術準備情況

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

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

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

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

          第四步:奠定基礎

          指導工作的是什么

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

          設計師的驅動力

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

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

          是什么讓團隊繼續前進

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

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

          經驗告訴我們什么

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

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

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

          第五步:共同塑造未來

          AI交互模式

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

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

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

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

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

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

          可視化路線圖里程碑

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

          衡量影響

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

          • 用戶參與度、用戶保留率
          • 轉化率、采用率和使用率
          • 效率和生產力

          底線

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

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

          進一步閱讀

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

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

          杰睿 設計資源

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

          表盤設計分享【一】

          杰睿 設計資源

          0bea951f32f9ca9d51675197c681577c.jpg

          8cd1d0f8382224270c1eff7b82da4b4c.jpg

          633f3d9c9f83e736d861afe2d428c110.jpg

          859b302bd0daa2efe3a2dbfc6b69497f.jpg

          44320e08d38b3268bd8b5b0c8975ee46.jpg

           

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

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

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

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

           

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

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

          杰睿 設計資源

          WechatIMG25.jpg

          WechatIMG26.jpg

          WechatIMG27.jpg

          WechatIMG28.jpg

           

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

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

          杰睿 設計資源

          ChatGPT 是否有可能生成 UI?

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

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

          升級前通過 ChatGPT 生成

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

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

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

          通過 ChatGPT 生成

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

          讓我們開始吧。

          背景

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

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

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

          我也嘗試過:

          通過 ChatGPT 生成

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

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

          實驗就是從這里開始的。

          實驗

          1. 創建詳細的提示

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

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

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

          2. 生成代碼支持的 UI

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

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

          ChatGPT 的屏幕截圖

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

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

          ChatGPT 的屏幕截圖

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

          3. 要求提供視覺模型

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

          創建一個可視化模型。而是一個視覺模型。

          結果如下:

          通過 ChatGPT 生成

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

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

          4. 要求縮小用戶界面

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

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

          結果如下:

          通過 ChatGPT 生成

          看起來不錯!

          5. 要求生成設計選項

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

          所以我寫了這個:

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

          結果如下:

          通過 ChatGPT 生成

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

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

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

          6. 將設計轉換為 Figma 文件

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

          Figma 中的屏幕截圖

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

          它使用的字體系列是 Intel。

          好得可怕。

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

          最后的想法

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

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

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

          通過 ChatGPT 生成

          不管怎樣,這已經是一次很棒的升級了。我現在能生成以前無法生成的東西了。

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

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

          審美積累 | 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.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

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

          杰睿

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

          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

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

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

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          杰睿

          大腦在處理和組織看到的信息時會使用一套快捷方法,了解這些方法是設計成功的關鍵要素。本文介紹了十一條有效的設計準則,用形象的圖解幫助讀者更好地理解設計準則在設計工作中的運用,幫助你利用這些方法更快捷地開展設計。適合關注產品設計的小伙伴閱讀。

          感知力是大腦將不同的信息連接和組織成一個連貫整體的機制。例如我們將相似的對象分組并連接起來,能夠輕松地區分出不屬于該組的對象。

          大腦在處理和組織看到的信息時會使用一套快捷方法,了解這些方法是設計成功的關鍵要素。

          在UI設計時,我們應該有意識地運用感知力,用足夠的事實來驗證設計,有依有據地解釋為什么這個圖形元素要這樣設計?背后的原因是什么?

          提升感知力有助于清晰地解釋設計方案,避免常見的設計錯誤,引導我們將設計做得更好、更容易理解!

          一、鄰近原則

          彼此靠近的元素會被自動理解為一組。把它們的位置放得更遠,會給人一種這些元素是完全獨立的個體的印象。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在UI設計中,可以利用鄰近原則將相似的界面元素組合在一起,把控總體布局。

          鄰近規則適用于主導航、卡片、按鈕、內容和圖標等。我們還可以使用適當的留白將不同的元素進一步分開,創建一個層級更清晰的界面結構,以此來幫助用戶瀏覽和理解不同類型的信息。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          鄰近原則是直接影響界面可用性的基本規則之一。如果隨意控制元素的位置和間距,有可能會讓整個產品變得混亂和難以理解。

          二、相似原則

          視覺上相似的元素會被視為同一組,視覺上不同的元素,大腦會下意識將其視為單獨的元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          利用相似性可以來定義界面的特征,例如顏色、形狀、尺寸、紋理或空間位置等。最容易區分的是顏色相似,其次是尺寸和形狀相似。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          如果一個元素和界面中其他的元素都不同,無法融入到其他元素組中,那么這個元素就會變得非常顯眼。

          我們可以利用這種差異化的效果來突出一些具有引導性或者功能性的元素,例如登錄按鈕或者加入購物車按鈕等。

          三、閉合原則

          一組不相連的元素組合在一起,我們會下意識地自動補充這些元素之間的空白,得到一個完整的、可識別的形狀。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          閉合原則有多種不同的用法。例如一個虛線箭頭,我們會填補空白并把這些點連接在一起,得到一條完整的線段。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          閉合原則還有助于識別抽象的圖標形狀并賦予更多的含義。在圖標設計中,為了避免信息過載,大多數圖標的設計都很簡潔,更方便用戶理解。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          運用閉合原則的經典案例包括用不同虛線構成的IBM標志、利用正負形空間組合而成的WWF熊貓標志。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          四、對稱原則

          UI界面中的元素一旦有對稱性,就會產生秩序感,我們很快就能看到并理解這種形式。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          我們天生喜歡對稱的物體。對稱排列的元素在視覺上更令人舒服,也更美觀。

          可能有人覺得對稱設計過于呆板,這種想法在平面廣告或視覺設計中可能正確,但在UI設計中對稱布局是相當重要且實用的界面排版形式。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          對稱布局讓設計更容易理解,也更友好,缺乏對稱會導致界面混亂,不知道該關注哪個元素。當然,如果想讓某個模塊突出展示,也可以嘗試打破對稱性,這樣不對稱的元素就能在界面中脫穎而出。

          五、連續性原則

          界面中沿著同一條線對齊的元素會被認為屬于同一組。

          在瀏覽界面時,視線會第一時間尋找最順暢的視覺動線。這也解釋了為什么在使用連續性原則時,需要確保直線(或曲線)是均勻和可預測的。

          線條越均勻,生成的形狀越容易被用戶正確識別。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          連續性有助于界面保持上下垂直滾動時的節奏,相似的內容應始終保持對齊。如果某個元素打破了這種連續性,我們的瀏覽節奏會被打亂,瀏覽速度也會變慢。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          當下的UI設計中,流行帶有圓角的卡片和按鈕效果。其中的一個原因是我們對于直角的處理速度稍慢,視線需要停頓并旋轉90度,而更圓滑的導角效果能幫助我們的視線更快地轉換。

          六、共同命運原則

          按相同方向、以相同速度運動的元素被認為是一組。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在設計輪播、下拉列表、過渡動畫等場景時,共同命運原則會很有幫助。例如我們的視線既跟隨輪播圖水平移動,還跟隨下拉列表向下展開。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          七、??硕?米勒定律

          • 希克定律:可供選擇的選項越多越復雜,就越難做出選擇。
          • 米勒定律:我們的大腦在同一時間只能處理大約7±2個對象。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          根據希克定律,可供的選擇數量應該有限制。有太多東西可供選擇可能會導致用戶迷失方向,做出判斷的時間加長,甚至會感到壓力。

          米勒定律提到,大腦處理信息的能力與認知負荷有直接的關系。我們大腦一次能處理的信息量大約是7個對象。對象數量越多,處理它們所需的時間就越長。

          在設計時,盡量不要超過七個選項,為了獲得最好的體驗,應盡量將選項保持在4-5個。這意味著需要控制主導航數量、按鈕數量、下拉選項和輪播圖數量等。

          當需要用戶做選擇時,最好能突出顯示最受歡迎或最推薦的選項,幫助用戶更快做出決策。

          八、前景/背景

          我們能夠本能地區分界面中的圖形元素和背景。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          界面由不同類型和樣式的圖層組成,每個圖層都有不同的層次結構。

          為了避免層次結構混淆,我們需要清楚地定義界面的所有元素。背景不需要設計設計的太花哨,有可能會搶奪用戶對主要內容的注意力。

          輔助內容和功能不需要太明顯,并且需要與主要內容在設計上做出區分。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          可以使用對比關系、位置關系和陰影等方法幫助用戶區分內容和背景。

          九、審美可用性效應

          用戶通常認為具有視覺吸引力(美觀)的產品更實用。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          根據這個原則,流行、對稱、美觀的界面會對用戶產生更積極的影響。如果視覺效果給人足夠好的第一印象,用戶可能會忽略一些可用性問題。

          審美可用性的基礎在于具有一定的可用性,之后才會起作用。如果產品本身的功能就很糟糕,那么再美觀的界面也無濟于事。

          高質量、美觀的界面有助于建立用戶信任。相反一個看起來混亂的設計會讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題,但他們也會覺得這個產品有風險或者不正規。

          高質量的UI設計對于銀行類、金融類和醫療類產品來說尤為重要,尤其是在需要用戶提供個人信息或涉及交易的使用場景中。

          十、串行位置效應

          我們最容易記住一組當中的第一個和最后一個元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          將最重要的內容或元素放在每組的第一個或最后一個,吸引用戶注意力,方便高頻操作。而次要的內容操作頻率相對較低,則放到中間位置。

          例如在構建導航、下拉列表等場景中,將重要的操作放到首位。

          十一、隔離效應

          在一組看起來相似的元素中,我們總是會記住與其余元素不匹配的那個元素。

          為了一次性掌握這些UI/UX設計準則,我準備了20張設計圖解!

          在UI設計中,隔離效應意味著將界面中重要的內容或關鍵的操作在視覺上與眾不同。

          最典型案例是界面中的CTA(號召性用語)按鈕。通過改變CTA按鈕的顏色、尺寸等,與界面中的其他按鈕區分開來,第一時間引起用戶的注意。

          專欄作家

          作者:Clippp,每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

          本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

          題圖來自 Unsplash,基于CC0協議。

          該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

           

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

          日歷

          鏈接

          個人資料

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

          存檔

          亚洲va欧美va天堂v国产综合