<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>

          首頁

          15 個最佳現代 AI 解決方案,助力 UI/UX 設計開發

          杰睿 設計思維

          毫無疑問,人工智能極大地促進了許多領域的發展。UI/UX 設計也未能幸免,如今我們每天都能看到基于人工智能的全新工具涌現。這些工具旨在改變設計師的工作方式,使他們能夠優化工作流程并自動化重復性任務。這樣,他們就能更快、更準確地提供結果。由于人工智能接管了日常工作,設計師可以專注于最重要的事情——創造力和創新。優化工作流程并自動化重復性任務。這樣,它們可以提供更快、更準確的結果。由于人工智能接管了日常任務,設計師可以專注于最重要的事情——創造力和創新。

          人工智能對設計的影響

          AI 驅動的工具正日益成為 UI/UX 設計師不可或缺的助手。它們在從原型設計、內容創作到最終設計完善的每個流程階段提供支持。通過將 AI 集成到工作流程中,設計師可以更高效地創造更具活力和個性化的體驗,同時節省時間和精力,從而加快產品發布速度并提升競爭力。

          UI/UX設計師的最佳AI工具

          下面我們將介紹一些可以幫助您簡化工作的頂級工具。

          1. Flowmapp:一款利用人工智能設計用戶體驗架構的工具

          Flowmapp就像一個指南針,指引您穿越復雜的用戶體驗迷宮,幫助設計師創建清晰便捷的用戶路徑并生成站點地圖。借助它,您可以通過創建流程圖來設計網站和應用程序的架構,就像在精準的地圖上導航一樣。Flowmapp 的強大之處在于它與分析技術的集成,就像鷹眼一樣,能夠洞察用戶迷失的方向,并幫助他們實時優化路徑。

          Airbnb 和 Nike 等品牌都使用 Flomwapp 來設計信息架構。該工具能夠靈活地與分析工具集成,幫助團隊優化路徑,提升參與度并增加現場停留時間。

          2. Uizard:人工智能驅動的界面原型設計

          Uizard就像一根原型設計魔杖,能將您的草圖轉化為成品交互模型。它基于神經網絡構建,能夠快速將您的想法轉化為可運行的原型,就像您跳過了草稿上的那些神奇步驟一樣。Uizard 以其速度和簡潔性超越競爭對手,將設計和代碼集成在一個軟件包中,使其成為快速界面開發的必備工具。

          將顯示縮放圖像
          用戶界面

          3. ChatGPT:基于 GPT-4 的 UX 文本生成

          ChatGPT隨時準備提供完美的描述或用戶體驗文本。它基于 GPT-4 模型,能夠輕松適應您的需求,就像一位經驗豐富的編輯讀懂您的心思一樣。其優勢在于,它不僅節省時間,還能激發團隊靈感。

          將顯示縮放圖像
          GPT 3.5 和 4.0 聊天功能的區別

          4. Attention Insight:人工智能驅動的 UI 和 UX 分析

          Attention Insight就像一張 X 光片,可以掃描并預測用戶會在哪些地方停留。它利用人工智能技術,幫助您調整焦點,就像調整相機鏡頭以獲得最清晰的照片一樣。Attention Insight 的優勢在于它能夠高效精準地完成這項工作,而無需依賴耗時耗力且成本高昂的 A/B 測試。

          將顯示縮放圖像
          Attention Insight 界面

          5. Khroma:一款人工智能配色方案工具

          Khroma是一款個性化配色工具,可讓您根據自己的喜好找到完美的配色方案。它利用神經網絡學習您的偏好,并推薦能夠為您的界面增添特色的配色方案。Khroma 憑借其個性化設計擊敗了競爭對手——它推薦的配色方案是根據您的喜好量身定制的。

          將顯示縮放圖像
          赫羅馬整合

          6. 讓我們增強:優化圖像以提高用戶體驗

          Let's Enhance就像一個高清濾鏡,能將像素化的圖像轉化為清晰銳利的視覺效果。在 AI 的支持下,Let's Enhance 可自動提升分辨率、紋理和色彩細節,讓您的圖片完美契合 UI 界面。其主要優勢在于即時提升畫質,這對于需要快速優化高分辨率的大型項目來說非常實用。

          將顯示縮放圖像
          讓我們增強界面

          7. Adobe Sensei:Adobe 產品中的人工智能

          Adobe Sensei是您所有常用 Adobe 產品的強大引擎。它利用機器學習加速流程,無論是處理圖像還是分析用戶數據,都能將您的設計提升到更高的自動化水平。與其他解決方案不同,Adobe Sensei 內置于整個 Adobe Creative 套件中,讓您的工作更快速、更便捷。

          將顯示縮放圖像
          Adobe Sensei 界面

          8. DALL-E 2:基于文本的圖像生成器

          DALL-E 2是一位藝術家,他能根據口頭描述,繪制出你所能想象的一切。它基于 GPT-3 模型,創作出細節豐富、獨具匠心的圖像,仿佛你的大腦直接連接到畫布。在同類產品中,DALL-E 2 以其能夠將傳統設計工具難以表達的最抽象概念可視化的能力而脫穎而出。

          將顯示縮放圖像
          DALL-E 2接口

          9. Vance AI:用于圖像處理和增強的人工智能

          Vance AI就像一位智能助手,可以即時增強您的圖像,使其擁有專業水準。它可以提高分辨率、去除背景并校正紋理,就像經過專業攝影工作室的后期處理一樣。Vance AI 使圖像處理變得快速便捷,尤其是在處理大量數據時。

          將顯示縮放圖像
          使用 Vance AI 應用程序之前和之后的圖像對比

          10. Galileo AI:由人工智能驅動的動畫工具

          Galileo AI是您的專屬動畫師,能夠瞬間賦予任何 UI 元素生命力。它運用機器學習技術,無需手動調整每一幀即可創建流暢的動畫。Galileo AI 憑借速度和靈活性超越競爭對手,讓設計師能夠專注于創意,而非墨守成規。

          將顯示縮放圖像
          伽利略人工智能接口

          11. Flow AI:構建聊天機器人和語音界面

          Flow AI就像一位交互工程師,能夠構建對話界面和聊天機器人,讓它們像人類專家一樣回答復雜的問題。Flow AI 可以幫助您創建周到的對話場景,而無需編寫代碼。與其他同類產品不同,Flow AI 提供簡單的設置和跨平臺支持,使其成為對話系統的多功能解決方案。

          將顯示縮放圖像
          Flow AI 的實際工作原理

          12. 深度夢境生成器:人工智能驅動的超現實圖像

          這款工具將人工智能技術應用于照片和視頻,創造出獨特的圖像,將其轉化為超現實的杰作。與其他生成器不同,Deep Dream 可以讓你創造出與眾不同的抽象效果,讓你瞬間從普通的視覺效果中脫穎而出。

          將顯示縮放圖像
          使用 Deep Dream Generator 創建的圖像

          13. Stark:用戶體驗的可訪問性檢查器

          Stark會根據包容性標準檢查你的設計。AI 會分析界面,檢查對比度、字體大小和顏色組合,以確保你的產品適合所有用戶。

          將顯示縮放圖像
          Stark 應用程序界面

          14. 設計AI:標志和視覺概念生成

          Design AI可在幾分鐘內創建徽標和視覺概念。它可以生成品牌標識并提供現成的解決方案,為您節省時間和資源。Design AI 在速度和經濟性方面超越同行,能夠在最短時間內提供高質量的成果。

          將顯示縮放圖像
          使用 Design AI 工具創建的徽標和標識

          15. Loomly:人工智能社交媒體管理

          Loomly可以幫助你構思創意、組織和規劃內容,并推薦最佳發布時機。它會分析你的受眾參與度,并為你推薦一些必定會“火爆”的帖子。

          將顯示縮放圖像
          Loomly 應用程序

          利用人工智能改進設計

          AI 工具徹底改變了 UI/UX 設計,尤其是在提供數據驅動的洞察方面。這減少了設計師在重復性任務上花費的時間,并賦予他們更多創造力。有了 AI 處理幕后機制,設計師現在可以專注于創建創新的、以用戶為中心的界面。

          雖然人工智能極大地提升了設計流程的效率,但務必牢記,它無法取代設計師獨特的人類直覺和創造力。最佳設計成果源于人類洞察力與人工智能工具的協同作用,其中設計師在引導設計流程和利用人工智能提供支持方面發揮著不可或缺的作用。

          結論

          人工智能顛覆了游戲規則,讓設計師能夠輕松創建更優質、更以用戶為中心的界面。如果您能夠充分利用這些工具,它們將助您改進設計流程、激發創新,并提供更具吸引力和活力的數字體驗。如此一來,您就可以將人工智能的技術突破與人類的技能和直覺相結合,突破可能性的界限,打造出完美的產品,開創 UI/UX 設計的未來。

           

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

          界面設計:Web3場景下,大屏設計中的用戶體驗要點解析

          杰睿 設計思維

          73e3b0a4-2ff5-4175-beb1-2d4510ce87bc.png

          d65a7188-3597-4010-9533-c1bb1e02b796.png

          在傳統互聯網產品中,數據看板和儀表盤是常見的管理工具。而隨著 Web3 技術的發展,鏈上行為、資產狀態、合約執行等信息變得越來越復雜,如何可視化地理解這些動態數據,成為產品設計中的新挑戰。
          在這一背景下,數據大屏逐漸成為 Web3 項目方、平臺運營方、審計安全機構等角色的重要信息樞紐。但在實際設計過程中,許多大屏項目容易陷入“炫酷外觀”而忽略了核心交互體驗。
          本文將從交互設計的角度,探討 Web3 場景下的大屏設計應關注哪些用戶體驗要點,避免“看上去很厲害,卻沒人真正在用”的設計誤區。

          一、Web3應用為何需要大屏?

          Web3 應用天然擁有強數據屬性:去中心化交易、流動性池、區塊鏈瀏覽器、智能合約調用……背后都對應著高頻、高維度、鏈上鏈下混合的數據系統。
          大屏在 Web3 中的主要使用場景包括:
          鏈上運營監控:例如 DEX 交易量、TVL 變化、用戶活躍趨勢
          安全審計看板:異常交易預警、地址聚集行為識別
          鏈級數據展示:Gas 消耗趨勢、區塊出塊速度、礦工分布等
          多鏈資產管理:跨鏈橋資產流通圖、跨鏈交易流向展示
          這些場景中的共通點是:數據變化快、維度多、使用者需要“實時看清”并“快速判斷”。這也是大屏發揮價值的關鍵。

          二、Web3大屏設計的5個核心用戶體驗要點

          1. 可讀性優先于炫酷感
          Web3 的數據普遍較為抽象,如交易哈希、錢包地址、Gas 費用、TVL等,對非專業用戶甚至部分運營者而言并不直觀。
          在這種背景下,大屏首要設計目標是讓用戶“看得懂”,而不是制造視覺噱頭。
          設計建議包括:
          使用足夠大的字號和清晰的字體(避免細線體在大屏上模糊)
          色彩控制在 2~3 個主色 + 層級灰色,避免過多亮色干擾焦點
          圖表需具備必要的坐標軸、單位標注、異常標記,不應純粹裝飾化
          簡潔比花哨更重要,清晰比動效更關鍵。

          1. 實時感知與狀態提示
          Web3 的鏈上數據具有強實時性,許多核心指標在數分鐘內可能出現劇烈波動。因此,大屏必須能體現“當前狀態”以及“更新節奏”。
          建議包括:
          明確標出“數據更新時間”,讓用戶知道當前信息的時效性
          對關鍵變化支持動效強調,如箭頭上揚/下降、數值閃動提醒等
          異常狀態顏色需與正常狀態明確區分(避免“全綠”或“全藍”)
          此外,設計中應盡量避免讓用戶懷疑數據是否卡住了,這會極大削弱其對大屏的信任度。

          1. 異??筛兄?,支持預警反應
          大屏不只是展示,更應該幫助用戶“識別風險”或“發現機會”。
          在 Web3 應用中,這種“感知”尤為重要,比如:
          某地址在短時間內發生大量交易 → 潛在惡意行為
          某資產流動性短時間驟降 → 潛在清算風險
          合約調用量瞬時異常上升 → 可能被攻擊或刷單
          設計中可引入以下機制:
          顏色警示(如紅、橙色信號)
          簡潔文案說明(如“交易量驟增 300%”)
          可展開詳情但不跳轉頁面,降低閱讀負擔
          將這些機制融入 UI 組件,可以極大提升大屏的實用性。

          1. 信息層次清晰、模塊布局可讀
          由于大屏往往信息密集,如何組織信息成為交互設計的核心難點。
          推薦的分層方式:
          第一層:核心概覽指標(如總交易量、活躍地址、Gas趨勢)
          第二層:分區域信息塊(如按鏈分類,或按用戶/合約分類)
          第三層:詳細趨勢圖/交易列表等可拓展內容
          使用模塊化的卡片布局、留白區分信息塊,可以幫助用戶在幾秒內抓住重點,避免“眼花繚亂”的閱讀體驗。

          1. 可維護、可擴展、可適配
          Web3 數據結構在不斷演變:新增協議、新增鏈、新增地址標簽……這就要求大屏具備良好的可維護性。
          設計策略包括:
          所有數據組件可復用,如“標準圖表組件”、“警示模塊”、“K線區塊”
          UI 布局具備適應不同分辨率的彈性(如1080p/4K/LED拼接屏)
          盡量使用“數據結構驅動的渲染邏輯”,而非固定死圖布局
          在設計前期明確這些要求,可以大幅降低后期重構成本。

           
          Web3的大屏設計,不是為了炫技、也不是為了迎合形式,而是為了幫助人們在復雜數據中看清趨勢、發現問題、做出反應。
          它的真正價值在于:
          降低理解門檻
          提升監控效率
          提供可視化決策支持
           
           
          在這個數據密集、變化迅速的領域,交互設計師的任務,就是為用戶建立起這座“可感知的橋梁”。
           
          如果你正在設計或評估一塊 Web3 場景下的大屏,不妨從以上幾點出發,重新審視它是否真正服務了使用者的體驗,而不僅僅是滿足了展示的需求。
          如果你有正在推進的 Web3 數據大屏項目,歡迎留言交流你的設計思路與挑戰,我也會持續更新關于 Web 應用與交互設計的專業觀察。
           
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          如何傳達錯誤

          杰睿 設計思維

          一個人對錯誤的反應——無論是自己犯的還是他人犯的——是一個復雜且常常令人痛苦的心理過程。在本文中,我將解釋為什么幾乎所有的錯誤提示信息的設計都公然無視用戶體驗理論。我將使用交互式原型來展示如何解決這個問題。我還將轉向交互理論,回顧模式的概念,并解釋可逆性、恰當性和及時性的原則。

          我們的用戶不是程序員

          每個設計師的清單里都會包含“設計錯誤界面”。但即使完成了,程序員仍然會回來說:“還有另一種情況——我們也需要一個錯誤界面。”在這種情況下,程序員是設計的客戶,這很有道理:程序員比任何人都更了解錯誤。設計師和經理們都認同這種方法——但它存在嚴重缺陷。

          “我們不是我們的用戶。”設計師們不斷重復這句話。他們想表達的是:不要僅僅依賴自己的專業知識(這不可避免地會過時,而且容易產生職業偏見),而要關注用戶在自然環境中的行為。

          所以,問題在于——程序員不是我們的用戶。程序員的行為、思維方式,以及與計算機的聯系與其他人截然不同。我知道我在說什么。我的大多數朋友都是程序員和工程師。我在工作中也經常和程序員交流。我自己也是一名程序員,使用多種語言(從 Swift 和 GLSL 到 Forth 和 Assembly)。但幸運的是,我也是一名非常關注心理學的設計師。那么,讓我來告訴你程序員的一天通常是怎樣度過的:

          程序員甚至還沒來得及好好寫點東西——他們停頓了一下,砰,一個錯誤出現了:“空白符缺失”。不知何故,下一行也出現了錯誤(盡管那一行完全沒問題)。左側面板也滿是錯誤。這還不算編譯錯誤。除了紅色圓圈,可能還有黃色圓圈——程序員的大腦已經習慣了忽略這些警告。

          如果錯誤來自硬件故障、第三方庫的 bug 或文檔不清晰,程序員不會把這些錯誤當回事。他們會把這些錯誤視為一種有用的工具,幫助找出別人的錯誤。而有些煩人的拼寫錯誤,你會在自己的代碼中苦苦追尋,希望編譯器能自動捕獲它們。那么,關于拼寫錯誤的錯誤消息就是程序員最好的朋友。

          簡而言之,程序員對錯誤消息產生了一種容忍度——所有那些帶有感嘆號的圓圈和冗長、說教的紅色文字。

          心理學家會怎么說?

          從人體工程學的角度來看,程序員的環境與普通用戶的環境有著根本的不同。因此,設計師絕對不應該采用程序員對待錯誤的態度。如果我們負責設計一個 IDE(集成開發環境),那么我們當然會咨詢程序員——他們是我們的用戶。但在開發其他產品時,最好不要依賴他們的觀點。相反,我們應該咨詢心理學家。

          紅色感嘆號會讓用戶想起老師在課堂筆記中批改的內容,并被理解為一種懲罰(當然,除非有人已經培養了對懲罰的耐受力,比如程序員)。那么,心理學是如何看待對錯誤的懲罰的呢?

          重要的是不要用消極情緒來強化錯誤,因為大腦對此非常敏感,并會將這種行為標記為不值得投入精力的事情。

          我知道有些人看到錯誤信息就會慌亂不已。他們開始點擊所有按鈕,只為讓它盡快消失。這些人很難適應界面,因此他們傾向于完全避免與界面交互。這并不是因為他們愚蠢,而是因為他們是普通人——而不是程序員。

          看看這個!幾乎每個字段都用紅墨水劃了線,界面提示你輸入姓名,并要求你填寫,而且是必填項!

          但程序員對此完全沒意見。程序員堅信,把笨蛋塞進錯誤里是有用的,這樣他們就不會再試圖用 null 或 undefined 來破壞程序了。程序員和工程師稱之為“傻瓜式防錯”,展現了他們獨特的同理心。

          焦點切換時驗證

          當用戶從一個輸入字段切換到另一個輸入字段時,第一個字段會觸發一個名字很不靠譜的事件:“onblur”。開發者經常用它來進行驗證——以防用戶漏填字段、輸錯生日或忘記郵件中的“@”。問題是:當用戶切換到另一個應用時,“onblur”也會觸發。過去,表單跨越三頁時,空字段是個問題。如今,所有內容都能放在一個屏幕上——很難忽略一個空字段。至于其他的檢查——它們對用戶沒有任何幫助。它們只是另一種“傻瓜式”的玩意兒。但用戶不是傻瓜。當他們想要什么東西時——他們會發揮創造力。我知道有人會修改頁面代碼,以獲取他們嚴格意義上不應該獲得的政府服務。而如今,他們甚至不需要知道如何編寫代碼:只需單擊一下即可打開 DevTools,再單擊幾下——所有驗證都消失了。輸入任何你想要的內容。

          通過像傻瓜一樣對待用戶,開發人員產生了兩個問題:第一 - 他們浪費時間構建“保護”,第二 - 他們陷入了一種虛假的安全感(沒有比“通過模糊性實現安全”更糟糕的保護)。

          在焦點切換時進行驗證毫無意義,而且問題重重,我甚至不想在這里討論它。讓我們繼續討論主按鈕上的驗證:“繼續”、“提交”等等。

          通常如何做

          我們與雅虎界面的交互分為三個階段:

          1. 開始。所有字段均為空。無錯誤。“繼續”按鈕可用。
          2. 按下“繼續”按鈕。所有空白字段均被標記為錯誤。
          3. 焦點從第一個字段移開。突然間,它不再被標記為錯誤了。

          讓我們來分析一下。

          激活按鈕——這很好,雅虎點贊了。我有一篇名為“禁用按鈕”的文章,解釋了這背后的理論和實踐。如果你仍然認為禁用按鈕對用戶有幫助,那你絕對應該讀一讀。

          接下來是可逆性原則。這意味著你可以將界面恢復到初始狀態。雅虎又贏了——你可以重置界面。但只能通過逐個點擊每個字段來實現。這有什么意義呢?為什么僅僅因為你移開焦點,錯誤信息就會消失?這純粹是算法故障!在我關于設計流程的文章中,我指出即使是頂級公司有時也會設計出糟糕的界面,所以不要盲目追隨權威。要遵循科學。

          下一個原則是恰當性。用戶點擊了“繼續”按鈕——交互的對象是按鈕,而不是輸入字段。如果按鈕發出某種震動或吱吱聲來表達不滿,這可以理解。但是輸入字段呢?根本沒人碰過它們!它們怎么可能感知到按鈕的情緒呢?只有程序員知道,在代碼中,這些對象是相互關聯的——但外部觀察者一無所知,因為它們之間沒有視覺聯系。

          現在來談談時效性原則。設計師用紅色高亮顯示幾個字段,期望用戶做出什么反應?如果所有字段的重要性都一樣,用戶應該先解決哪個字段?這需要對注意力中心進行復雜的討論(這里的注意力中心不是指某個具體的輸入字段,而是“出了點問題”的整體感覺),但我建議保持簡單:界面基本上就是按照“坐下-停留-過來”的順序排列,打破了“一次一個動作”的原則。

          這里,一切都非常不對勁!

          調試模式

          界面有“模式”的概念。在我的大學里,程序員選修了一門名為“界面設計”的課程,課程內容包括解釋為什么彈出窗口被稱為“模態窗口”?,F在,我驚訝地發現,程序員和設計師似乎對如何處理模式一無所知。

          老式計算機有一種特殊的“HALT”模式,用于調試錯誤,也稱為“控制臺模式”。如果處理器嘗試執行無效操作,程序將被中斷,處理器將停止運行,并切換到控制臺模式。您也可以通過按下物理“HALT”按鈕手動觸發 HALT 中斷。使用開關或調試程序(在單獨的控制臺上運行),您可以修復錯誤并返回程序執行模式。

          “處理器”一詞并非偶然——它源于“進程”。錯誤中斷只能在進程運行期間發生,而不會在處理器停止并處于調試模式時發生。這一事實在我們稍后討論進程和狀態之間的區別時會很有用。

          向用戶清晰解釋他們最終進入不同模式的原因和方式至關重要。例如,調試器會顯示導致無效操作的指令地址。同樣重要的是解釋如何返回(記住可逆性原則)。經典的 Norton Commander 完美地詮釋了各種模式:

          1. 文件選擇模式
          2. 復印模式
          3. 管理員模式,需要對硬件錯誤做出響應

          我見過有人批評這類解決方案:“窗口疊在其他窗口上看起來很丑”。即便接受了這種說法,我仍然無法認同設計師通常提出的替代方案:“我們把這個窗口移除,把錯誤顯示到別的地方,這樣更美觀。” 就好像設計師忘記了自己是工程師,只是拿起畫筆,像個泥水匠一樣把瑕疵掩蓋起來。

          如果你真的想擺脫窗口,正確的方法是記住什么是模式、它們來自哪里以及它們是如何工作的——然后弄清楚如何避免切換到其他模式(如果你想深入了解模式,請閱讀 Jef Raskin 的《人性化界面》)。例如:軟盤空間不足?不允許復制文件。軟盤未插入?不要將其顯示在目標列表中。現代操作系統就是這樣做的——它們消除了執行可能導致錯誤中斷的操作的可能性。

          現在我們可以猜一下雅虎上的“繼續”按鈕的作用了:它啟動了一個錯誤調試模式。在該模式下,用戶被賦予了程序員的角色,并被迫修復所有導致程序崩潰的空值和未定義值。不幸的是,開發人員并沒有意識到這對普通用戶來說有多么糟糕。我希望他們至少明白,他們剝奪了用戶返回上一個模式的能力——這違反了良好用戶體驗的最基本規則。

          糟糕的算法變成了“最佳實踐”

          乍一看,似乎所有網站的錯誤顯示都和雅虎一模一樣。所以這肯定是“最佳實踐”,是行業標準……但事實并非如此!每個人的做法都不一樣。我們來看看亞馬遜:

          1. 開始:所有字段均為空。無錯誤。“繼續”按鈕可用。
          2. 按下“繼續”按鈕。所有空白字段均標記為錯誤(最后一個字段除外)。
          3. 要消除錯誤,僅僅切換到另一個字段是不夠的——您實際上必須輸入一個值。
          4. 再次按下“繼續”按鈕。除第一個字段外,所有字段均為空,并標記為錯誤(第一個和最后一個字段除外)。

          讓我們來分析一下。

          一個活動按鈕——很好。亞馬遜正在跟上雅虎的步伐。

          自動聚焦到第一個字段——太棒了(雅虎沒有這個功能):用戶可以立即開始輸入。填完第一個字段后,按“繼續”鍵會直接將光標移動到第二個字段,也就是錯誤所在的地方。真是聰明的舉動!

          有人會反對:自動對焦在桌面端運行良好,但在移動設備上鍵盤會遮擋半個屏幕,所以最好隱藏它,直到用戶點擊輸入。這樣一來,你解決了一個問題,又制造了另一個問題。然后你選擇你的毒藥……問題是,你會認為一種弊端較小,而有些用戶會認為另一種弊端更嚴重。無論哪種情況,你都在選擇一種弊端。不要這樣做(我稍后會解釋如何做)。

          界面可逆性。你輸入一些內容,錯誤消失;然后你刪除它并切換到另一個字段——哇,一個沒有錯誤的空字段。所有字段都一樣。將界面恢復到初始狀態比雅虎要難,但由于算法不穩定,仍然是可能的。

          與雅虎的同事一樣,亞馬遜的程序員在“繼續”按鈕和輸入字段之間建立了心靈感應:按鈕不想繼續,但輸入字段都大聲喊出來(突然變成輸出字段)。

          特別要提一下密碼確認框——為什么它不變成紅色?不填就無法繼續。想說要等到前一個框填完后才進行校驗?當然,你得給用戶解釋一下錯誤校驗算法,再給他們看源代碼——這真的會很有幫助(諷刺)。

          現在,我們來快速看一下IBM的解決方案:

          激活按鈕——不錯。沒有自動對焦,但至少界面會自動滾動到第一個字段并顯示錯誤。

          界面不可逆——無法將字段恢復到第一個屏幕上的樣子。換句話說,你無法退出調試模式。那么,為什么還要有第一個屏幕(調試模式)呢?如果你認為空字段是錯誤,那就直接顯示第二個屏幕吧。哦,你不想立刻嚇到用戶?還記得感知心理學嗎?你決定稍后再嚇唬他們,作為對他們錯誤的懲罰?讓我再重復一遍心理學家的話:

          重要的是不要用消極情緒來強化錯誤,因為大腦對此非常敏感,并會將這種行為記錄為不值得花費精力的事情。

          例子不勝枚舉。以網站 capital.xyz 為例:

          日期字段為空,點擊“下一步”按鈕,字段自動對焦。手機字段為空,點擊“下一步”——完全沒有自動對焦。為什么?這背后的想法是什么?劇透:根本沒這回事。只是算法出了問題。

          谷歌甚至更進一步——你輸入的每一個字符它都會責罵你……

          即使你不同意我的批評,你也必須承認,知名公司的頂級設計師和程序員在實現同一項任務時,都采用了截然不同的方式。這意味著完美的解決方案尚未找到。很可能,根本沒人真正去尋找它。程序員只是在缺乏對用戶交互原則清晰理解的情況下編寫代碼,然后跑來找設計師說:“嘿,這里又有一個錯誤需要顯示出來。”

          當我為自己的項目設計錯誤顯示時,我沒有依賴別人的解決方案——我依靠科學。我在撰寫本文時收集了來自雅虎、亞馬遜和 IBM 的示例。在對所設計機制背后的原理沒有深入理解之前,研究參考文獻是有害的。你只會撿起別人的錯誤,然后引用權威文獻來為自己辯護。幾乎每個人都這樣做。沒有人愿意重新發明輪子——工業程序員沒有時間或動力去做這件事。所以每個人都堅持使用老式的命令行、字母數字顯示方法。還記得當時錯誤是如何顯示的嗎?如果沒有,來看看控制臺:

          如今,界面開發人員仍在做著同樣的事情:直接把錯誤日志直接倒在屏幕上。21世紀唯一的升級?把文本涂成紅色,然后把信息分散到屏幕的不同位置。

          這可不行。我們趕緊解決吧!

          事件與狀態

          我們用“錯誤”這個詞來描述兩種截然不同的事物:事件狀態??焖倩仡櫼幌拢寒斕幚砥鲊L試執行無效操作時,它會觸發中斷并進入調試模式。這是一次性事件。我們說“發生了錯誤”。然后,我們去尋找導致崩潰的內存中的特定值。該值——或者更準確地說,存儲單元的狀態——也稱為“錯誤”。換句話說,我們模糊了因果之間的界限——僅僅是因為我們沒有想出單獨的詞。為了避免混淆,我將使用兩個術語:進程錯誤(事件,某個時間點)和數據錯誤(內存中的錯誤值,一種狀態)。

          我們來看一個郵箱輸入框。缺少“@”符號?這是數據錯誤。被郵件服務器退回郵件?這是流程錯誤。或者以郵政編碼為例。位數太少?這是數據錯誤。數據庫中找不到郵政編碼?這是流程錯誤。

          空字段

          輸入字段只是一個數據容器。數據可能會缺失。如果你沒有輸入生日,并不意味著你出生在零日。這個輸入字段根本沒有數字,只有占位符“日”。數據缺失了。

          因此,空白字段并非數據錯誤。不存在的東西本身就不是什么錯誤??瞻鬃侄问莿摻〝祿?/span>機會,是一個良好的起點,也是一個互動的邀請。你可能已經注意到,空白表單看起來比已填充的表單更優雅。那么,為什么要用有毒的紅色來破壞它呢?誰會喜歡與標記為危險的字段互動呢?

          不要這么做。我準備了一個交互式原型來向你展示應該怎么做。

          狀態改變

          讓我們看看電水壺中按鈕和水的狀態是如何變化的。打開電水壺。水沸騰后,按鈕會彈開。但觸發按鈕的不是水,而是溫度傳感器。如果傳感器損壞或丟失,按鈕就不會彈開。

          現在手動按下按鈕——水不會突然變冷。了解導致狀態變化的具體原因很重要。

          規則如下:如果對對象 A 執行了某個操作,那么只有 A 的狀態可以改變,而對象 B 的狀態則不能改變。要更改 B 的狀態,需要一個直接作用于 B 的獨立進程。

          例如,數據庫搜索可能會觸發索引重建——這會更改數據庫本身,但不會改變您搜索的值。

          讓我們來看一個常見的 UI 設計錯誤。用戶想通過郵政編碼查找城市。他們輸入郵政編碼,點擊“搜索”,然后……輸入框變紅,或者值消失了。發生了什么?這是一個流程錯誤——數據庫中沒有結果。但 UI 卻將其顯示為數據錯誤,就好像用戶輸入了錯誤的郵政編碼一樣。但也許郵政編碼是有效的——只是城市還沒有添加到數據庫中。也許五分鐘后就會添加。用戶并沒有輸入錯誤數據。輸入框不應該受到指責。我們無權觸碰它。流程錯誤需要以不同的方式顯示(稍后會詳細介紹)。

          一次一個動作

          根據???海曼定律,提供的選項越少,用戶選擇所需內容的速度就越快。將這一原理推向極致,便可得出“一屏一操作”原則。有人可能會說,復雜的程序不可能簡化到這種程度,但讓我們回想一下 Hanx Writer 文本編輯器——蘋果設計獎得主——它幾乎精簡了所有內容?;蛘呦胂朐?Photoshop 中按下一個按鈕就可以隱藏整個界面,只留下一個工具可見。在某些情況下,“一屏一操作”原則非常有效。至少,在放棄它之前,先嘗試一下。

          在優化了開立經紀賬戶的網頁工作流程后,我決定在移動應用中測試這種方法??纯次业?/span>交互式原型吧——它通過了 17 位用戶的快速測試,與舊版本(每個屏幕有多個輸入字段)相比,速度提升了 13%。

          有人可能會說,時間的提升并不大——少了52秒,而不是整整一分鐘。但首先,試著數到8——這實際上是一段相當長的時間內,任何事情都可能發生。其次,測試表明時間減少了,而不是像一些人擔心的那樣增加了。他們假設額外的屏幕轉換會減慢用戶的速度,但結果卻恰恰相反:信息越少,用戶處理速度就越快。當只有一個操作可選時,用戶會毫不猶豫地執行。

          原型就是這樣。屏幕上只有一個輸入字段。用戶輸入數據,按下“繼續”,屏幕就會滾動到下一步。如果你手動嘗試在空白字段處向前滾動,屏幕會迅速彈回:“不行,不行”。輸入字段保持焦點,提示用戶輸入數據。無需任何額外的高亮——畢竟,它是屏幕上唯一的字段。完美。

          如果你點擊“繼續”,但輸入框為空或郵箱地址缺少“@”符號,鍵盤會彈回來,仿佛在說:“想繼續嗎?那就繼續填寫吧。” 沒有任何錯誤信息!

          我再強調一遍:我們不會隱藏錯誤信息。相反,我們設計的系統絕對不會出錯。沒有數據就意味著沒有數據錯誤。沒有流程就意味著沒有中斷或調試模式。這里唯一的期望是數據以正確的格式輸入。順便說一句,這里有一個很棒的方法——接受任何合理格式的數據。例如,Sberbank.ru 允許您輸入帶有國家代碼 (+7)、本地前綴 (8) 或完全不帶區號的電話號碼。

          從本文俄語版的評論來看,并非所有人都理解原型的用途。有些人期望看到一個完美無瑕、隨時可用的產品(一個他們可以直接復制的產品),結果卻大失所望,對諸如缺少重新發送短信驗證碼的選項之類的問題吹毛求疵。讓我再次澄清:本文中的原型并非成品的精確復制品。它們的唯一目的是展示如何消除錯誤信息。

          現在,讓我們將此解決方案擴展到界面無法簡化為“一屏一操作”模式的情況。 “Ingos Investments”的原型反映了數據量巨大,以至于每個屏幕上必須顯示多個字段的情況。

          讓我們設想一個場景:用戶尚未填寫所有字段,點擊了“繼續”按鈕。界面立即聚焦于第一個空白字段,調出屏幕鍵盤,并滾動到該字段正上方,方便用戶查看正在輸入的內容。即使屏幕上有多個字段,我們仍然堅持“一次一個操作”的原則,巧妙地將其他字段隱藏在鍵盤下方。在活動字段下方,會出現一條提示:“所有字段必須填寫”。這不是錯誤消息,而是一個有用的提示,沒有任何令人擔憂的危險信號。

          當用戶點擊屏幕鍵盤上的“下一步”時,他們只會跳轉到下一個字段——這和填寫表單的常規流程一樣,而不是笨重的錯誤調試模式。提示已經給出,所以用戶不太可能再次嘗試填寫空白字段。但如果他們真的這么做了,那么他們會再次看到這個溫馨提示。

          懷疑論者可能會說:“但如果空白字段位于屏幕最頂部,無法滾動到鍵盤上方怎么辦?或者,如果網站是在桌面上打開的,根本沒有屏幕鍵盤怎么辦?” 答案是:沒什么大不了的。所有這些極端情況都在原型中得到了完美的體現。我也聽到過這樣的擔憂:“如果我們不把每個字段都涂成紅色,用戶就不會意識到需要填寫”。測試表明,這些擔憂是毫無根據的。這些擔憂背后真正的恐懼,是害怕打破常規,嘗試一些真正新穎的東西——一些對用戶更有利,而不僅僅是對我們自己更有利的東西。

          州經理

          為了創建“Ingos Investments”的原型,我編寫了一個狀態管理調度器。交互元素將其內容報告給管理器,然后管理器決定如何處理它們。

          程序員常說輸入字段是獨立的元素。郵箱字段不知道電話字段里的內容。當你切換輸入字段時,它會觸發對其內容的驗證。當你點擊“繼續”按鈕時,所有輸入字段都會收到一個命令——檢查你的數據。這就是為什么它們會突然一起亮起紅燈。這就是它的構造方式。程序員說你無法改變它。設計師也相信這一點。不過亞馬遜的例子表明,密碼確認字段確實知道前一個字段的內容。所以他們可以隨時修改。

          這意味著你可以而且應該創建一個狀態管理器。當用戶嘗試跳轉到下一個屏幕時,狀態管理器會檢查所有字段,找到一個包含不完整或無效數據的字段,將用戶帶回該輸入框并顯示提示。本質上,這是一次時光之旅——回到用戶出錯的點。因此,將后續字段標記為錯誤是沒有意義的——它們發生在將來,而用戶尚未到達它們。

          使用狀態管理器,您還可以在鼠標懸停在“繼續”按鈕上時檢查字段內容。如果數據缺失,按鈕的標簽會更改為特定的字段名稱,例如“輸入街道”——這遵循了時效性原則(用戶嘗試繼續,但需要填寫字段,我們會通知他們)。這個新標簽在按鈕和字段之間建立了視覺聯系,使程序員有理由將這兩個元素的行為聯系在一起。

          程序員可能會問:“為什么要把事情復雜化?” 沒錯——對程序員來說越復雜,對用戶來說就越容易。這是規則。說實話,這只需要一兩天的時間。需要更多精力的是通知系統。數據錯誤和流程錯誤應該顯示在各自的層級結構中:數據錯誤應該顯示在數據容器中,而流程錯誤應該顯示在應用程序范圍的通知中。這是一個完全獨立的主題,我希望有時間寫一篇關于通知設計的文章。

          結論

          因此,我們發現了以下事實:

          1. 絕大多數現有解決方案都歸結為切換到“錯誤糾正模式”,而退出該模式要么不可能,要么極其困難(只能通過算法中的錯誤)。這種方法雖然被廣泛接受,但各地的實現方式卻有所不同:空白字段可能被視為錯誤,也可能被視為正常,有時甚至會在同一屏幕上混合出現。用戶會背負負面情緒,因為系統會“懲罰”他們破壞程序。這種方法絕對不可接受,必須予以糾正。
          2. 缺少數據并不意味著數據錯誤。空白字段是互動的邀請,而非危險信號。
          3. 我們不需要兩種模式:數據錄入和糾錯。一種模式——數據錄入——就足夠了。
          4. 數據錯誤和流程錯誤是不同的。它們應該顯示在相應的層級結構中:數據錯誤應該顯示在數據容器中,而流程錯誤應該顯示在全局通知中。
          5. 如果您希望對一個對象執行的操作影響另一個對象,請在它們之間建立清晰的視覺聯系。
          6. “一屏一操作”原則一定要試一下。如果有效,那你太棒了!
          7. 編寫一個簡單的狀態管理調度程序。借助它,你可以引導用戶回到最早未完成的步驟。
          8. 創建原型——它們是新想法的最佳概念證明。
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          分析 128 家科技公司的標志我們發現了什么

          杰睿 設計思維

          阿蒂奧姆•達辛斯基

          幾年前,我需要為客戶設計一個標志,但卻找不到一個擁有設計精良、相關標志的好地方來激發靈感。

          所以當時我創建了Logggos——一個擁有約 1,000 個科技公司、代理商和 DTC 品牌精選徽標的網站。

          我還分析了 128 個科技/SaaS 公司的標志,以了解他們使用的字體、結構和形狀。

          我很快收集了下面的結果,展示了什么讓標志感覺“科技化”(如果你想實現或避免這種外觀)。

          標志結構

          72% 的 Logo 使用圖標 + 文字

          21% 僅使用文本,6% 僅使用圖標。

          30%帶有圖標的徽標在圖標中使用其名稱的首字母:

          33%使用基本形狀 - 正方形,圓形,三角形等。67
          %使用圖形復雜形式(例如箭頭,波浪):

          空 = 復雜形狀(例如箭頭、波浪)

          排版

          93% 使用 Sans-Serif 字體系列:

          雖然Serif、Serif-SlabScript字體在 DTC 品牌中非常常見,但在科技標志設計中它們卻非常罕見。

          字體案例

          全部小寫(“gusto”):42%
          標題大小寫(“Gusto”):48%
          全部大寫(“GUSTO”):10%

          過去幾年,從全大寫改為標題大小寫或全小寫已成為一種趨勢。沃爾瑪、史泰博、AT&T、Tand 等大公司都放棄了全大寫。萬事達卡和費雪等品牌也從標題大小寫改為全小寫??磥砜萍夹袠I也出現了類似的趨勢。沃爾瑪、史泰博、AT&T、Tand 等大公司都計劃放棄全大寫萬事達卡和費雪等品牌已將標題大小寫改為全部小寫??磥砜萍夹袠I也出現了類似的趨勢。

          100% 的雙詞名稱單詞之間沒有空格

          (例如 NetSpring 而不是 Net Spring)

          我們調查的公司中,有 30% 的公司名稱由兩個單詞組成。所有使用兩個單詞的公司都選擇不在其徽標中拆分單詞(例如 NetSpring 和 Net Spring)。這與那些喜歡拆分單詞的消費品牌(例如 Fresh Sends)有所不同。

          51% 的標志是黑色

          抱歉,圖表餅圖的顏色與名稱不匹配:)

          當品牌選擇顏色時,最受歡迎的顏色是:藍色(18%)、橙色(10%)和綠色(8%)。

          這是與消費品牌的另一個不同之處,與科技公司相比,消費品牌更有可能在其標志設計中使用顏色。

           

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

          如何通過 UI / 交互層級設計降低新手門檻?一項系統性分析

          杰睿 設計思維

           

          在復雜信息系統或工具類產品中,用戶的第一次接觸往往決定了他們是否愿意繼續使用。新手門檻的高低,不僅影響用戶的學習成本和初始留存,也間接作用于產品的商業表現。
          從設計角度來看,UI 與交互層級結構的組織方式,是決定新手體驗是否友好、是否有進入感的核心機制之一。本文將從信息認知、界面結構與行為引導三個層面,系統性分析 UI / 交互層級如何影響新手門檻,并給出設計優化思路。

          一、認知負荷與界面感知模型

          1.1 新用戶的心理特征:模型缺失、不確定性高

          新手用戶面臨的主要挑戰在于:缺乏清晰的心理模型。他們不了解系統邊界、不知道功能位置、無法預期交互結果。這導致每一個界面元素都可能成為額外的認知負擔。
          設計的目標不是“減少內容”,而是降低用戶構建心理模型的難度,使其在短時間內感知:
          • 我在哪里?(定位)
          • 我可以做什么?(路徑)
          • 接下來會發生什么?(預期)
           

          二、交互層級的三重作用機制

          UI 和交互層級結構不是界面排版的產物,而是產品功能語義、用戶行為路徑與認知節奏的結構化表達。它主要承擔以下三重功能:

          2.1 信息壓縮與優先級管理

          良好的層級結構通過視覺與交互手段實現信息的壓縮與展開,使用戶在單位時間內只面對有限數量的信息項,減輕感知壓力。典型手段包括:
          • 分組與分區(Group & Zone)
          • 折疊與展開(Progressive Disclosure)
          • 等級化的視覺樣式(Hierarchy by contrast)
          設計者需將“概覽 → 局部 → 操作”作為信息層級主路徑,避免“信息平鋪”或“全量暴露”所帶來的干擾性。

          2.2 用戶路徑引導與行為決策支持

          層級不僅是界面組織結構,更是用戶行為路徑的預設結構。其目的是在用戶尚未做出主動決策前,通過顯性或隱性的路徑引導,幫助其完成一次有效行為。
          關鍵設計策略包括:
          • 建立“主路徑”與“輔助路徑”的視覺與交互區隔
          • 使用位置、顏色、動線等手段強化行為序列感
          • 提供結構性反饋(如面包屑、步驟指示、當前視圖狀態)以增強路徑感知
          良好的路徑引導可以顯著降低“首次任務失敗率”,增強使用信心。

          2.3 情境邊界限定與探索自由空間構建

          初期用戶往往不清楚“系統邊界”,層級結構的設計需在兩個維度上達到平衡:
          • 邊界明確:用戶需要知道當前操作的上下文邊界(模塊歸屬、操作影響范圍)
          • 探索自由:同時保留一定的試探空間,讓用戶可以低成本嘗試操作(可逆性、可預覽、非強綁定)
          設計上常通過局部可展開結構、Hover Preview、模態/側滑等方式建立“安全的探索機制”,既幫助理解,又降低誤操作焦慮。

          三、結構策略:降低門檻的五個設計原則

          基于上述機制分析,我們可以提煉出以下五個關鍵設計策略,用以降低新手門檻:

          3.1 建立明確的主視覺層級結構(Visual Hierarchy)

          通過字號、顏色、布局密度、空間節奏等手段,強化內容結構的視覺可讀性。視覺層級清晰,是新用戶建立模塊感知的基礎。

          3.2 采用遞進式信息揭示(Progressive Disclosure)

          避免在初始狀態中展示所有功能與數據,采用分步展開策略,依據用戶行為逐層揭示內容,符合信息處理的漸進性原則。

          3.3 強化首層路徑線索(Primary Interaction Path)

          通過交互動線設計(按鈕位置、流向動畫、前后態對照等),明確用戶首要行為路徑,避免多條入口路徑造成判斷負擔。

          3.4 構建可預測的反饋機制(Consistent Feedback)

          操作結果應當及時、清晰、結構化地反饋,幫助用戶快速建立輸入-輸出映射關系,降低操作不確定感。

          3.5 保留安全的試錯機制(Safe-to-Explore)

          通過撤銷、預覽、提示、淺層交互等方式構建“軟邊界”,降低試錯成本,增強用戶探索欲望與系統掌控感。
           
          層級設計的意義不僅在美學,而在策略
           
          降低新手門檻不是純粹的 UI 問題,而是用戶認知過程、行為路徑設計與界面結構合理性的交匯點。
          一套良好的 UI/交互層級,不僅能讓用戶看懂產品、用對功能、建立信心,更能為產品的可用性、可擴展性與商業增長建立堅實的基礎。
           
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          UI設計師應有的品牌意識!

          濤濤 設計思維

          UI 設計師雖非品牌設計師,但需具備品牌思維,在設計中融入品牌基因,可增強產品獨特性、用戶記憶點與信任感,帶來更大附加價值。文章圍繞品牌色、功能圖標、裝飾性元素、品牌形象映射四個方面,解析 UI 設計中的品牌概念及實踐方法。

          告別 4px 間距,迎接斐波那契數列

          杰睿 設計思維

          4px 間距系統與斐波那契間距系統的比較
          一個帶有指向內邊距值的標簽的藥丸組件。左右內邊距為 16,上下內邊距為 12。

          奇數

          設置偶數填充的藥丸組件與設置奇數填充的藥丸組件之間的比較。
          我已準備好進入網格系統監獄。我準備去網格系統監獄。

          比較

          使用傳統的間距邏輯或奇數邏輯對藥丸組件進行相同的比較,但它們的填充值覆蓋在頂部。

          那么字體呢?

          使用 4px 系統或奇數系統的 6 種字體的比較:Oxygen Mono、Noto Serif、Roboto、Poppins、Palatino、Koulen。

          在野外

          Notion Mail 登陸頁面英雄的屏幕截圖,表單頂部的注釋顯示了其像素完美度。
          。

           

          系統化——斐波那契數列簡介

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

          信息架構設計 | 全球導航、上下文導航、本地導航的區別是什么?

          杰睿 設計思維

          “導航系統并不是單一的工具,而是由多個互補的導航方式組成。” ——《信息架構:超越Web設計》
           
          在信息架構里,導航系統不止一種。
          我們常說的“導航”,其實包含了三個維度:全球導航、上下文導航、本地導航。
          如果你把網站當成城市地圖,三者的區別就像
           
          全球導航(Global Navigation) 相當于城市主干道。
          總是在頁面的顯著位置(如頂部、側邊),無論用戶在哪一頁都可見。 
          作用:提供站點的整體結構輪廓,保證“不會迷路”。
          舉個例子:你在電商平臺首頁、商品頁、購物車頁,都能看到頂部的“首頁 / 分類 / 購物車 / 我的”。
           
           
          本地導航(Local Navigation) 像是某個商圈里的路標。
           它只在特定區域內出現,展示該部分的子頁面結構。
           作用:幫助用戶在當前模塊內自由切換,不跳出當前上下文。
          比如你點進“具體單件商品”后,在側邊出現同商品分類就是本地導航。
           上下文導航(Contextual Navigation) 像是你在某家咖啡店里看到“附近的甜品推薦”。
           它不是常駐的,而是出現在特定內容中,基于語義提供額外鏈接。
          作用:提供延伸閱讀、關聯信息,拓寬用戶探索路徑。
          對“單件產品”的批注延展,這就是上下文導航。
          “全球導航幫助用戶定位站點結構,本地導航指導區域內部的瀏覽,上下文導航則引導語義關聯的跳轉。”
           
          如何為你的產品選對導航層級?
          信息量不大? 全部用全球導航即可。
          內容分區明確? 加上本地導航提升效率。
          內容密集豐富? 增設上下文導航,增強探索體驗。
          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
           

          科學的 UI 設計流程以及如何提升 UI 視覺效果

          濤濤 設計思維

          這篇文章主要分享了科學的 UI 設計流程以及如何提升 UI 視覺效果,結合學生作業案例,解答了設計中常見的問題,內容通俗易懂

          PC端網頁的UI設計趨勢

          濤濤 設計思維

          顯示設備的多用化、智能手機應用的普及化、電子設備觸摸屏的普及,這些環境變化推動了 PC 網頁 UI 設計的新動向。

          日歷

          鏈接

          個人資料

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

          存檔

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