最新大地资源网在线观看免费_免费大地资源中文第二页在线观看_大地 ,久久精品黄色网络_日韩黄色三级中文字幕_中文字幕免费乱伦视频_午夜小电影亚洲天

首頁

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

杰睿 設(shè)計(jì)資源

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

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

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

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

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

  1. 出于正當(dāng)理由
  2. 組建你的 AI A 團(tuán)隊(duì)
  3. 了解你的工作內(nèi)容
  4. 奠定基礎(chǔ)
  5. 共同塑造未來

第一步:出于正確的理由

回歸本源

不要僅僅為了 AI 而構(gòu)建。要識別用戶最緊迫、最普遍的問題。需要注意的危險(xiǎn)信號:

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

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

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

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

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

來到耶穌面前的時刻

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

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

第 2 步:組建你的 AI A 團(tuán)隊(duì)

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

  • 客戶擁護(hù)者——找到與客戶有直接聯(lián)系的人
  • 最終決策者——了解批準(zhǔn)計(jì)劃并簽署支票的領(lǐng)導(dǎo)者,正如他們所說
  • 關(guān)鍵影響者——找出對人工智能充滿熱情或組織內(nèi)值得信賴的顧問
  • 主題專家——了解您的團(tuán)隊(duì)需要咨詢哪些專家
  • 執(zhí)行功能——找到擁有合適技能的團(tuán)隊(duì)成員來實(shí)現(xiàn)你的愿景
AI A 團(tuán)隊(duì)矩陣(客戶擁護(hù)者、最終決策者、關(guān)鍵影響者、主題專家和執(zhí)行職能),詳細(xì)說明每個人的重要性、示例角色或頭銜、他們?nèi)绾翁峁椭? width=
與你的 AI A 團(tuán)隊(duì)建立關(guān)系對于你的 AI 之旅至關(guān)重要

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

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

獲得認(rèn)可并引起轟動

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

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

步驟 3:了解您正在處理的內(nèi)容

引導(dǎo)您和您的團(tuán)隊(duì)更好地了解您正在建設(shè)的環(huán)境。

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

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

產(chǎn)品智能成熟度規(guī)模:手動工作流程、業(yè)務(wù)邏輯自動化、機(jī)器學(xué)習(xí)和狹義人工智能
簡化的產(chǎn)品智能成熟度量表
  • 手動工作流程——完全沒有自動化
  • 業(yè)務(wù)邏輯自動化——特定功能的靜態(tài)業(yè)務(wù)規(guī)則
  • 機(jī)器學(xué)習(xí)和狹義人工智能——僅限于特定任務(wù)的卓越能力
  • 通用人工智能和超級人工智能——未納入該范圍,因?yàn)樗鼈內(nèi)蕴幱诶碚撾A段

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

評估平臺技術(shù)準(zhǔn)備情況

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

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

  • 基礎(chǔ)準(zhǔn)備——包括基礎(chǔ)設(shè)施平臺、數(shù)據(jù)源和軟件包
  • 運(yùn)營準(zhǔn)備——包括指導(dǎo)方針、人員配備、治理、合規(guī)性和風(fēng)險(xiǎn)

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

第四步:奠定基礎(chǔ)

指導(dǎo)工作的是什么

定義AI 設(shè)計(jì)原則,打造富有影響力的用戶體驗(yàn)。您可以從 VUX 的AI 設(shè)計(jì)原則中找到靈感。通過補(bǔ)充和完善概念的原則,強(qiáng)化既定的 AI 愿景和目標(biāo)。

設(shè)計(jì)師的驅(qū)動力

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

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

是什么讓團(tuán)隊(duì)繼續(xù)前進(jìn)

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

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

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

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

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

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

第五步:共同塑造未來

AI交互模式

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

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

真正的用戶倡導(dǎo)者提出的問題

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

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

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

可視化路線圖里程碑

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

衡量影響

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

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

底線

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

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

進(jìn)一步閱讀

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

? 審美積累 | Misso 工作平臺設(shè)計(jì)賞析

杰睿 設(shè)計(jì)資源

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

表盤設(shè)計(jì)分享【一】

杰睿 設(shè)計(jì)資源

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

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

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

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

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

 

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

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

杰睿 設(shè)計(jì)資源

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

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

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

杰睿 設(shè)計(jì)資源

ChatGPT 是否有可能生成 UI?

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

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

升級前通過 ChatGPT 生成

它看上去太卡通了,不太實(shí)用。

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

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

通過 ChatGPT 生成

今天,我將向你們展示我進(jìn)行的實(shí)驗(yàn)、我使用的提示以及過程中的一些驚喜和收獲。

讓我們開始吧。

背景

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

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

上周,許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風(fēng)格藝術(shù)潮流流行的原因。

我也嘗試過:

通過 ChatGPT 生成

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

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

實(shí)驗(yàn)就是從這里開始的。

實(shí)驗(yàn)

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

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

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

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

2. 生成代碼支持的 UI

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

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

ChatGPT 的屏幕截圖

然后我點(diǎn)擊了右上角的“預(yù)覽”按鈕。

生成了響應(yīng)式、代碼支持的 UI。

ChatGPT 的屏幕截圖

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

3. 要求提供視覺模型

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

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

結(jié)果如下:

通過 ChatGPT 生成

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

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

4. 要求縮小用戶界面

盡管用戶界面看起來不錯,但我仍然對圖像截?cái)喔械接悬c(diǎn)困擾,所以我問了:

頂部和底部看起來有點(diǎn)截?cái)?。您能?UI 縮小 20% 左右,讓它整體更小一些嗎?頂部底部看起來有點(diǎn)截?cái)唷D軐?UI 縮小20%左右, 讓它整體更小一些嗎?

結(jié)果如下:

通過 ChatGPT 生成

看起來不錯!

5. 要求生成設(shè)計(jì)選項(xiàng)

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

所以我寫了這個:

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

結(jié)果如下:

通過 ChatGPT 生成

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

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

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

6. 將設(shè)計(jì)轉(zhuǎn)換為 Figma 文件

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

Figma 中的屏幕截圖

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

它使用的字體系列是 Intel。

好得可怕。

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

最后的想法

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

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

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

通過 ChatGPT 生成

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

這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便???

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

審美積累 | UI設(shè)計(jì)中的“刻度”設(shè)計(jì)【一】

杰睿 設(shè)計(jì)資源

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

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

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

UI 設(shè)計(jì)|提高審美|極簡扁平過時嗎?

杰睿

在做UI界面時,極簡扁平一直是個穩(wěn)妥又高適配的選擇。它沒有復(fù)雜的質(zhì)感和裝飾,更強(qiáng)調(diào)清晰、直接和功能導(dǎo)向,能快速搭建出干凈、有秩序的界面,適合大多數(shù)場景落地。
但是也確實(shí)有太多太相似的極簡導(dǎo)致確實(shí)辨識度,這中間要怎么平衡?平淡的極簡扁平風(fēng)格已經(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

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

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

杰睿

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

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

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

在UI設(shè)計(jì)時,我們應(yīng)該有意識地運(yùn)用感知力,用足夠的事實(shí)來驗(yàn)證設(shè)計(jì),有依有據(jù)地解釋為什么這個圖形元素要這樣設(shè)計(jì)?背后的原因是什么?

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

一、鄰近原則

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

鄰近規(guī)則適用于主導(dǎo)航、卡片、按鈕、內(nèi)容和圖標(biāo)等。我們還可以使用適當(dāng)?shù)牧舭讓⒉煌脑剡M(jìn)一步分開,創(chuàng)建一個層級更清晰的界面結(jié)構(gòu),以此來幫助用戶瀏覽和理解不同類型的信息。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

二、相似原則

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

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

三、閉合原則

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

運(yùn)用閉合原則的經(jīng)典案例包括用不同虛線構(gòu)成的IBM標(biāo)志、利用正負(fù)形空間組合而成的WWF熊貓標(biāo)志。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

四、對稱原則

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

五、連續(xù)性原則

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

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

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

六、共同命運(yùn)原則

按相同方向、以相同速度運(yùn)動的元素被認(rèn)為是一組。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

七、??硕?米勒定律

  • ??硕桑嚎晒┻x擇的選項(xiàng)越多越復(fù)雜,就越難做出選擇。
  • 米勒定律:我們的大腦在同一時間只能處理大約7±2個對象。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

根據(jù)希克定律,可供的選擇數(shù)量應(yīng)該有限制。有太多東西可供選擇可能會導(dǎo)致用戶迷失方向,做出判斷的時間加長,甚至?xí)械綁毫Α?/p>

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

在設(shè)計(jì)時,盡量不要超過七個選項(xiàng),為了獲得最好的體驗(yàn),應(yīng)盡量將選項(xiàng)保持在4-5個。這意味著需要控制主導(dǎo)航數(shù)量、按鈕數(shù)量、下拉選項(xiàng)和輪播圖數(shù)量等。

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

八、前景/背景

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

界面由不同類型和樣式的圖層組成,每個圖層都有不同的層次結(jié)構(gòu)。

為了避免層次結(jié)構(gòu)混淆,我們需要清楚地定義界面的所有元素。背景不需要設(shè)計(jì)設(shè)計(jì)的太花哨,有可能會搶奪用戶對主要內(nèi)容的注意力。

輔助內(nèi)容和功能不需要太明顯,并且需要與主要內(nèi)容在設(shè)計(jì)上做出區(qū)分。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

可以使用對比關(guān)系、位置關(guān)系和陰影等方法幫助用戶區(qū)分內(nèi)容和背景。

九、審美可用性效應(yīng)

用戶通常認(rèn)為具有視覺吸引力(美觀)的產(chǎn)品更實(shí)用。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

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

高質(zhì)量、美觀的界面有助于建立用戶信任。相反一個看起來混亂的設(shè)計(jì)會讓用戶感到不靠譜。即使用戶不能確切說出界面視覺的問題,但他們也會覺得這個產(chǎn)品有風(fēng)險(xiǎn)或者不正規(guī)。

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

十、串行位置效應(yīng)

我們最容易記住一組當(dāng)中的第一個和最后一個元素。

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

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

例如在構(gòu)建導(dǎo)航、下拉列表等場景中,將重要的操作放到首位。

十一、隔離效應(yīng)

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

為了一次性掌握這些UI/UX設(shè)計(jì)準(zhǔn)則,我準(zhǔn)備了20張?jiān)O(shè)計(jì)圖解!

在UI設(shè)計(jì)中,隔離效應(yīng)意味著將界面中重要的內(nèi)容或關(guān)鍵的操作在視覺上與眾不同。

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

專欄作家

作者:Clippp,每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。

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

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

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

 

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

產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件

鶴鶴

產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
原型設(shè)計(jì)是每一個產(chǎn)品經(jīng)理都需要具備的基礎(chǔ)能力,因此有一款稱手好用的原型設(shè)計(jì)軟件,更是產(chǎn)品人手中不可或缺的利器。相比其他設(shè)計(jì)軟件,原型設(shè)計(jì)軟件的重點(diǎn)之一是交互設(shè)計(jì),它需要動態(tài)模擬用戶操作,精準(zhǔn)呈現(xiàn)產(chǎn)品的交互流程,這樣才能感受真實(shí)的用戶體驗(yàn),幫助產(chǎn)品優(yōu)化迭代。
那么,有哪些優(yōu)秀的原型交互設(shè)計(jì)軟件呢?本文盤點(diǎn)了10款備受產(chǎn)品經(jīng)理喜愛的原型軟件,助你2025年設(shè)計(jì)更高效更簡單~
 
1、
摹客RP
摹客RP是一款高效易用的原型交互設(shè)計(jì)軟件,界面直觀、交互全面,可在線協(xié)作使用,能幫助產(chǎn)品經(jīng)理快速構(gòu)建產(chǎn)品原型。它還擁有海量的模板組件,組件自帶交互,拖拽即用,用戶無需經(jīng)驗(yàn)也可創(chuàng)建復(fù)雜的交互效果。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)全面的交互類型:不僅包含頁面交互,還有畫板級、組件級、狀態(tài)級交互,交互效果細(xì)膩,產(chǎn)品原型更逼真。
2)自制交互組件:可根據(jù)項(xiàng)目所需,自制復(fù)雜組件,自定義樣式以及交互細(xì)節(jié),原型交互設(shè)計(jì)不受限。
3)組件庫和模板:內(nèi)置豐富的組件和設(shè)計(jì)模板,包括各種按鈕、輸入框等交互控件,用戶可快速調(diào)用。
4)拖拽式編輯:只需鼠標(biāo)拖拽,一步到位,即可快速添加交互效果。
5)實(shí)時預(yù)覽編輯:支持實(shí)時預(yù)覽設(shè)計(jì)稿,多個成員可以在同一項(xiàng)目中編輯,大大提升了協(xié)作效率。
價(jià)格:
可免費(fèi)使用
學(xué)習(xí)難度:
簡單,新用戶也能快速上手
使用環(huán)境:
支持Web、Windows、MacOS
推薦理由:
摹客RP大幅降低了原型交互設(shè)計(jì)的門檻,簡單易用、操作流暢,交互效果也很全面。而且,它的團(tuán)隊(duì)協(xié)作功能突出,非常適合需要快速構(gòu)建交互原型的產(chǎn)品團(tuán)隊(duì)。
推薦評級:
??????????
 
2、
Axure
Axure是一款經(jīng)典的原型交互設(shè)計(jì)軟件,交互功能強(qiáng)大靈活,在產(chǎn)品經(jīng)理和UX設(shè)計(jì)師中享有盛譽(yù),特別適合需要復(fù)雜交互和邏輯實(shí)現(xiàn)的中大型項(xiàng)目。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)高級交互設(shè)計(jì):支持拖拽式創(chuàng)建動態(tài)面板、條件邏輯和變量操作,實(shí)現(xiàn)高復(fù)雜度的交互效果,精準(zhǔn)模擬用戶體驗(yàn)。
2)組件豐富:內(nèi)置按鈕、表單、圖表等多種控件,可通過配置實(shí)現(xiàn)多樣化的交互設(shè)計(jì)。
3)交互邏輯編輯:支持條件分支、邏輯判斷和變量傳遞,滿足復(fù)雜業(yè)務(wù)流程的原型設(shè)計(jì)需求。
4)文檔生成:支持自動生成詳細(xì)的原型文檔,便于交付和開發(fā)參考。
價(jià)格:
$29/月起
學(xué)習(xí)難度:
Axure操作復(fù)雜,對初學(xué)者來說難度較大。
使用環(huán)境:
客戶端使用,支持Windows、MacOS
推薦理由:
Axure適合對交互設(shè)計(jì)有較高要求的專業(yè)團(tuán)隊(duì),其強(qiáng)大的邏輯功能和動態(tài)效果讓用戶能夠細(xì)致地還原產(chǎn)品交互過程,是中大型項(xiàng)目不可或缺的利器。
推薦評級:
??????????
 
3、
Justinmind
Justinmind是一款功能全面的原型交互設(shè)計(jì)軟件,專注于幫助用戶從低保真到高保真階段快速構(gòu)建交互原型。它不僅支持豐富的交互動作,還內(nèi)置大量預(yù)設(shè)模板和控件,是一款集原型設(shè)計(jì)、交互開發(fā)和團(tuán)隊(duì)協(xié)作為一體的全能型工具。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)交互設(shè)計(jì)支持:通過可視化界面實(shí)現(xiàn)頁面跳轉(zhuǎn)、動態(tài)面板、懸停效果等交互行為,無需編程即可完成復(fù)雜交互設(shè)計(jì)。
2)模板與組件庫:內(nèi)置豐富的UI組件庫和交互模板,可快速拖放使用,提升設(shè)計(jì)效率。
3)導(dǎo)出功能多樣:可以將原型轉(zhuǎn)換為功能齊全且可交互的 HTML,還可導(dǎo)出導(dǎo)出為 SVG 和 PNG。
4)團(tuán)隊(duì)協(xié)作:支持團(tuán)隊(duì)成員在線評論和文檔共享,讓協(xié)作更加高效。
價(jià)格:
$19/人/月起
學(xué)習(xí)難度:
簡單
使用環(huán)境:
支持Web、Windows、MacOS
推薦理由:
無需輸入任何代碼,即可用Justinmind創(chuàng)建可交互的原型,還能用它繼做UI設(shè)計(jì)、VR和AP設(shè)計(jì),功能全面,值得嘗試。
推薦評級:
??????????
 
4、
ProtoPie
ProtoPie是一款專業(yè)的高保真交互原型設(shè)計(jì)工具,專注于通過邏輯和交互動作的直觀設(shè)置,構(gòu)建接近真實(shí)產(chǎn)品的交互體驗(yàn),特別適合需要創(chuàng)建復(fù)雜交互的產(chǎn)品經(jīng)理和設(shè)計(jì)師。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)無代碼交互創(chuàng)建:通過觸發(fā)器、動作和對象的組合,無需編程即可輕松實(shí)現(xiàn)復(fù)雜的交互邏輯。
2)跨設(shè)備交互模擬:支持多設(shè)備之間的交互,例如手機(jī)與平板、手機(jī)與電腦的聯(lián)動效果。
3)傳感器支持:獨(dú)特支持設(shè)備傳感器(如陀螺儀、重力感應(yīng)、語音輸入等),更真實(shí)地模擬用戶場景。
4)高保真原型預(yù)覽:所見即所得的預(yù)覽功能,可快速驗(yàn)證交互效果。
5)插件和集成:與Figma、Sketch等工具無縫對接,快速導(dǎo)入設(shè)計(jì)資源。
價(jià)格:
$12/用人/月起
學(xué)習(xí)難度:
中等,新手需要一定時間學(xué)習(xí)
使用環(huán)境:
支持Windows、MacOS
推薦理由:
ProtoPie是專門構(gòu)建高度復(fù)雜和真實(shí)交互的設(shè)計(jì)工具,適合對產(chǎn)品交互設(shè)計(jì)要求較高的團(tuán)隊(duì),其獨(dú)特的傳感器支持和多設(shè)備聯(lián)動功能,受到不少產(chǎn)品經(jīng)理的喜愛。
推薦評級:
????????
 
5、
Uizard
Uizard是一款新興的AI驅(qū)動原型設(shè)計(jì)工具,它的獨(dú)特之處在于智能化和易用性,即使是沒有設(shè)計(jì)經(jīng)驗(yàn)的用戶,也可以通過簡單的操作快速構(gòu)建具有交互功能的高質(zhì)量原型。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)AI生成設(shè)計(jì):支持將手繪草圖自動轉(zhuǎn)化為數(shù)字化原型,大幅提升設(shè)計(jì)效率。
2)簡單交互設(shè)計(jì):通過點(diǎn)擊即可實(shí)現(xiàn)頁面跳轉(zhuǎn)和基本動態(tài)交互,滿足初期驗(yàn)證需求。
3)模板庫:內(nèi)置大量行業(yè)通用的UI模板和組件,用戶可以直接使用或調(diào)整,快速完成設(shè)計(jì)。。
價(jià)格:
$15/人/月起
學(xué)習(xí)難度:
簡單
使用環(huán)境:
基于wed端使用,適用于所有主流瀏覽器
推薦理由:
Uizard的特點(diǎn)是:快速、智能、簡潔,非常適合需要快速構(gòu)思和驗(yàn)證產(chǎn)品創(chuàng)意的團(tuán)隊(duì)或個人。特別是對于時間有限的初創(chuàng)團(tuán)隊(duì)來說,Uizard提供了從草圖到原型的一站式解決方案。雖然其交互功能較為基礎(chǔ),但對于早期原型制作來說夠用了。
推薦評級:
????????
 
6、
Marvel
Marvel是一款全流程原型設(shè)計(jì)工具,專注于快速創(chuàng)建交互原型和用戶體驗(yàn)測試,適合快速原型制作,但不適合高保真的復(fù)雜交互設(shè)計(jì)。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)快速交互設(shè)計(jì):通過簡單的鏈接設(shè)置和拖放操作,即可創(chuàng)建頁面跳轉(zhuǎn)、動畫效果等交互行為。
2)用戶測試工具:支持收集用戶反饋,通過點(diǎn)擊熱圖和可用性測試,優(yōu)化設(shè)計(jì)流程。
3)團(tuán)隊(duì)協(xié)作與評論:團(tuán)隊(duì)成員可在設(shè)計(jì)文件中直接評論和標(biāo)注,溝通更高效。
4)與第三方工具集成:與Sketch、Figma等設(shè)計(jì)工具無縫銜接,支持導(dǎo)入設(shè)計(jì)文件進(jìn)行交互設(shè)置。
價(jià)格:
$12/人/月起
學(xué)習(xí)難度:
簡單
使用環(huán)境:
基于wed端使用,適用于所有主流瀏覽器
推薦理由:
Marvel操作直觀、團(tuán)隊(duì)協(xié)作功能強(qiáng)大,它的用戶測試功能為產(chǎn)品優(yōu)化提供了很多支持,對于小團(tuán)隊(duì)和初創(chuàng)企業(yè)來說,它是一個性價(jià)比較高的選擇。
推薦評級:
????????
 
7、
Proto.io
Proto.io是一款強(qiáng)大的原型設(shè)計(jì)工具,提供了從設(shè)計(jì)、交互到用戶測試的一站式服務(wù),它的的優(yōu)勢在于高度靈活的交互設(shè)計(jì)功能和廣泛的設(shè)備適配能力,非常適合需要快速驗(yàn)證復(fù)雜交互的團(tuán)隊(duì)。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)高度靈活的交互設(shè)計(jì):支持頁面跳轉(zhuǎn)、動態(tài)效果、動畫、條件邏輯等多種交互功能,無需編碼即可實(shí)現(xiàn)復(fù)雜設(shè)計(jì)。
2)豐富的組件庫和模板:提供大量內(nèi)置UI控件和行業(yè)模板,可直接拖拽使用并快速定制。
3)動畫編輯器:支持創(chuàng)建時間軸動畫,輕松實(shí)現(xiàn)復(fù)雜的動態(tài)效果。
4)用戶測試功能:支持與用戶共享原型鏈接或QR碼,收集反饋并優(yōu)化設(shè)計(jì)。
價(jià)格:
$24/月起
學(xué)習(xí)難度:
中等,新手需要一定的時間學(xué)習(xí)
使用環(huán)境:
基于wed端使用,適用于所有主流瀏覽器
推薦理由:
Proto.io不僅交互設(shè)計(jì)功能強(qiáng)大,還支持動畫設(shè)計(jì),提供從設(shè)計(jì)到測試的全面支持,非常適合需要復(fù)雜交互邏輯的項(xiàng)目。
推薦評級:
??????????
 
8、
Balsamiq
Balsamiq是一款專注于低保真原型設(shè)計(jì)的工具,其手繪風(fēng)格的界面設(shè)計(jì)獨(dú)具特色,旨在快速構(gòu)思和驗(yàn)證產(chǎn)品想法,是產(chǎn)品經(jīng)理和開發(fā)團(tuán)隊(duì)早期規(guī)劃的絕佳工具。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)手繪風(fēng)格低保真設(shè)計(jì):通過手繪風(fēng)格元素,幫助用戶快速創(chuàng)建清晰的線框圖,避免過多關(guān)注視覺細(xì)節(jié)。
2)豐富的UI控件庫:內(nèi)置大量UI組件,包括按鈕、表單、導(dǎo)航欄等,可快速拖拽到畫布中。
3)簡單交互設(shè)計(jì):支持基本頁面鏈接和跳轉(zhuǎn)功能,用于模擬導(dǎo)航流程。
4)云端協(xié)作:支持多人協(xié)作編輯,方便團(tuán)隊(duì)在早期階段快速迭代和驗(yàn)證。
價(jià)格:
$9/人/月起
學(xué)習(xí)難度:
簡單,初學(xué)者也能快速上手
使用環(huán)境:
支持Web、Windows、MacOS
推薦理由
Balsamiq是低保真原型設(shè)計(jì)的標(biāo)桿工具,其簡單、高效和專注的設(shè)計(jì)理念,特別適合項(xiàng)目早期的頭腦風(fēng)暴和結(jié)構(gòu)規(guī)劃。
推薦評級:
????????
 
9、
Figma
Figma是一款基于云端的協(xié)作式設(shè)計(jì)工具,在原型交互設(shè)計(jì)領(lǐng)域備受推崇。它以實(shí)時協(xié)作、高效的原型設(shè)計(jì)和無縫的團(tuán)隊(duì)溝通功能為核心亮點(diǎn),是產(chǎn)品經(jīng)理和設(shè)計(jì)師的強(qiáng)大助手。Figma無需安裝,直接通過瀏覽器即可使用,突破了傳統(tǒng)設(shè)計(jì)工具的限制。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)實(shí)時協(xié)作:多成員可同時在線編輯同一文件,實(shí)時查看修改,顯著提高團(tuán)隊(duì)效率。
2)組件和設(shè)計(jì)系統(tǒng):提供強(qiáng)大的組件管理功能,支持組件復(fù)用和全局更新,確保設(shè)計(jì)的一致性。
3)簡單交互設(shè)計(jì)功能:支持創(chuàng)建動態(tài)交互和動畫,包括頁面跳轉(zhuǎn)、懸停效果和狀態(tài)切換等。
價(jià)格:
$12/人/月起
學(xué)習(xí)難度:
簡單,還有豐富的教程文檔
使用環(huán)境:
基于wed端使用,適用于所有主流瀏覽器
推薦理由:
Figma憑借實(shí)時協(xié)作能力和直觀的交互設(shè)計(jì)功能,成為團(tuán)隊(duì)協(xié)作和快速設(shè)計(jì)的最佳選擇之一。特別是在遠(yuǎn)程辦公和分布式團(tuán)隊(duì)中,它的云端優(yōu)勢更加突出。
推薦評級:
????????
 
10、
Visily
Visily 是一款智能化的原型設(shè)計(jì)工具,它通過AI功能和直觀的界面,幫助用戶快速創(chuàng)建交互原型,是初創(chuàng)團(tuán)隊(duì)、產(chǎn)品經(jīng)理和非設(shè)計(jì)背景團(tuán)隊(duì)的理想選擇。
產(chǎn)品經(jīng)理必備!2025最受歡迎的10款原型交互設(shè)計(jì)軟件
 
 
功能亮點(diǎn):
1)AI設(shè)計(jì)助手:利用AI技術(shù),將手繪草圖或現(xiàn)有的設(shè)計(jì)圖轉(zhuǎn)化為數(shù)字化原型,大幅提升效率。
2)簡單交互功能:支持頁面跳轉(zhuǎn)、鏈接和基本動態(tài)效果,便于快速模擬用戶流程。
3)預(yù)設(shè)組件和模板:提供豐富的UI組件和行業(yè)模板,適用于多種設(shè)計(jì)場景。
價(jià)格:
$10/人/月
學(xué)習(xí)難度:
簡單
使用環(huán)境:
基于wed端使用,適用于所有主流瀏覽器
推薦理由:
Visily的AI設(shè)計(jì)功能是最大亮點(diǎn),降低了原型設(shè)計(jì)門檻,對沒有設(shè)計(jì)背景的用戶來說很友好。此外,Visily組件豐富,適合快速制作低至中保真原型。
推薦評級:
????????
 
以上10款原型交互設(shè)計(jì)軟件各具特色,能夠滿足不同團(tuán)隊(duì)和項(xiàng)目的需求。希望你能找到一款最適合自己的工具,用它打造出更出色的產(chǎn)品吧!

作者:摹客設(shè)計(jì)云
鏈接:https://www.zcool.com.cn/article/ZMTY1MDIwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

APP優(yōu)秀產(chǎn)品設(shè)計(jì)亮點(diǎn)

鶴鶴

為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
體驗(yàn)?zāi)夸?/span>
 
一、這個隱藏的手勢交互你忽略沒
二、情感化的背景設(shè)計(jì)
三、自適應(yīng)的瓷片區(qū)布局
四、考慮用戶習(xí)慣的導(dǎo)航設(shè)計(jì)
五、應(yīng)景的標(biāo)簽設(shè)計(jì)
六、情感化的心情記錄
七、動態(tài)感的個人中心設(shè)計(jì)
八、動態(tài) Banner 更有吸引力
九、有點(diǎn)意思的圖標(biāo)設(shè)計(jì)
十、營造冬季氛圍的背景設(shè)計(jì)
 
  
 
一、這個隱藏的手勢交互你忽略沒
 
隨著用戶體驗(yàn)的不斷升級,手勢交互變得越發(fā)普及,使得產(chǎn)品操作體驗(yàn)變得更有互動感和趣味性。通過手勢交互的輔助,讓產(chǎn)品設(shè)計(jì)更加簡化,更有利于用戶實(shí)現(xiàn)操作目標(biāo)。
 
我們經(jīng)常用抖音刷短視頻,可以通過單擊底部標(biāo)簽欄“首頁”進(jìn)行刷新,長按則會彈出模式切換。通過手勢交互的輔助可以快速切換單列、雙列展示形式,以及刷新首頁和默認(rèn)靜音設(shè)置,不知道這個操作你發(fā)現(xiàn)了嗎?
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
二、情感化的背景設(shè)計(jì)
 
情感化設(shè)計(jì)可以讓產(chǎn)品與用戶建立更強(qiáng)的共鳴感,讓用戶感受到產(chǎn)品的溫度,促進(jìn)對其服務(wù)的認(rèn)可度。
 
在杭州生活的人會經(jīng)常使用浙里辦,在一些節(jié)慶、節(jié)氣等時間段打開 App 時,頂部視覺區(qū)域背景會進(jìn)行應(yīng)景設(shè)計(jì)。通過情感化的表達(dá)方式營造氛圍感的同時,也讓用戶感受到產(chǎn)品的溫度,帶來更加溫馨的體驗(yàn)感。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
三、自適應(yīng)的瓷片區(qū)布局
 
瓷片區(qū)的靈活性可以方便更多功能模塊的布局,也能自由更換和增刪處理,只要保障基礎(chǔ)框架結(jié)構(gòu)的穩(wěn)定即可。
 
酷狗音樂未登錄時首頁推薦板塊的瓷片區(qū)設(shè)計(jì),在滑動過程中會進(jìn)行自適應(yīng)布局,方便進(jìn)行結(jié)構(gòu)的填充和內(nèi)容的補(bǔ)充。默認(rèn)時隱藏部分內(nèi)容可以提高當(dāng)前位置的利用率,便于提高更多內(nèi)容的曝光度,交互過程中的動效表達(dá)也非常的流暢自然。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
四、考慮用戶習(xí)慣的導(dǎo)航設(shè)計(jì)
 
抽屜式導(dǎo)航是導(dǎo)航設(shè)計(jì)表達(dá)的形式之一,由于屬于隱藏式的設(shè)計(jì),通常集合非操作頻繁的功能。
 
酷狗音樂采用了底部標(biāo)簽欄和抽屜式導(dǎo)航結(jié)合的形式,即滿足高頻功能的便利性,也能集合更多低頻功能。由于大屏手機(jī)的普及,用戶單手操作的習(xí)慣各有差異,考慮用戶左手或者右手都能輕松打開導(dǎo)航,酷狗音樂右上角的導(dǎo)航圖標(biāo)可以從右側(cè)打開導(dǎo)航,左手貼邊向右滑可以從左側(cè)打開導(dǎo)航,滿足了不同操作習(xí)慣的用戶需求。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
五、應(yīng)景的標(biāo)簽設(shè)計(jì)
 
標(biāo)簽設(shè)計(jì)的表達(dá)形式非常多樣化,也被運(yùn)用到眾多的場景中,輔助內(nèi)容的傳播與理解等。
 
天氣冷了,大家會在淘寶買一些秋冬服裝等商品,當(dāng)搜索秋冬外套、保暖等關(guān)鍵詞時,會出現(xiàn)降溫坐標(biāo)、輕暖等標(biāo)簽設(shè)計(jì)。通過標(biāo)簽突出了商品關(guān)鍵詞的特征,也讓用戶可以感受到季節(jié)的變化,促進(jìn)商品被搜索的概率。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
六、情感化的心情記錄
 
隨著生活壓力和職場壓力的不斷增加,為了緩解大家的焦慮情緒,衍生出很多日記類產(chǎn)品,幫助大家記錄心情和管理調(diào)節(jié)。
 
最近在使用心島日記記錄心情時,記錄界面設(shè)計(jì)感覺很有意思。通過轉(zhuǎn)盤的交互形式選擇心情,也通過應(yīng)景的動效表達(dá)輔助心情傳遞,整體設(shè)計(jì)情感化體驗(yàn)度非常好。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
七、動態(tài)感的個人中心設(shè)計(jì)
 
個人中心的設(shè)計(jì)在整個產(chǎn)品設(shè)計(jì)中都是非常重要的存在,也因此出現(xiàn)了眾多優(yōu)秀的設(shè)計(jì)方案。
 
心島日記的個人中心設(shè)計(jì)中,頂部區(qū)域背景以動態(tài)的形式表達(dá),描繪出的場景讓人心情愉悅。相較于靜態(tài)畫面的表達(dá),動感的設(shè)計(jì)更能打動用戶。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
八、動態(tài) Banner 更有吸引力
 
Banner 設(shè)計(jì)在產(chǎn)品中的表現(xiàn)形式也非常豐富,可以在視覺創(chuàng)意中發(fā)揮,也可以在造型結(jié)構(gòu)中變化,還能動靜各異。
 
最近在使用支付寶時,首頁為了突出發(fā)放消費(fèi)券的活動,采用了動態(tài) Banner 設(shè)計(jì)。突出的視覺和動感的效果,讓活動變得特別突出,增加板塊吸引力,提高用戶參與度。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
九、有點(diǎn)意思的圖標(biāo)設(shè)計(jì)
 
隨著圖標(biāo)設(shè)計(jì)的風(fēng)格越來越多,使得產(chǎn)品設(shè)計(jì)的感官體驗(yàn)得到了提升,設(shè)計(jì)師也在不斷嘗試更多的創(chuàng)意表達(dá)。
 
最近在飛豬旅行 App 中,發(fā)現(xiàn)其圖標(biāo)設(shè)計(jì)有點(diǎn)意思。部分圖標(biāo)采用書法里面的連筆形式,結(jié)合漸變色使得整體圖標(biāo)風(fēng)格年輕活潑,設(shè)計(jì)表達(dá)獨(dú)特而有新意。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
 
 
十、營造冬季氛圍的背景設(shè)計(jì)
 
冬天雖然很冷,但是也有獨(dú)特的風(fēng)景帶給大家,在寒冷中感受這個季節(jié)的獨(dú)特魅力。
 
飛豬旅行 App 在首頁設(shè)計(jì)中,頂部背景區(qū)域結(jié)合冬季下雪與堆雪人等元素,以動態(tài)的形式營造了這個冬季獨(dú)有的氛圍感。不僅提升了產(chǎn)品的感官度,也讓用戶更有季節(jié)代入感。
為什么我想不到這些設(shè)計(jì)亮點(diǎn)
 
 
小結(jié)
 
設(shè)計(jì)靈感來源于日積月累,希望我們的產(chǎn)品體驗(yàn)日記欄目可以成為大家積累的來源。本文描述屬于個人觀點(diǎn),不足之處大家留言補(bǔ)充。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY0OTI0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個人資料

存檔