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

          首頁

          2025 年 B 端界面設計的最新趨勢與展望

          ui設計分享達人

          個性化設計

          • 打造個體專屬形象1:隨著 “超級個體” 時代的來臨,B 端設計不再只關注企業整體,更注重為個體賦能。如釘釘等平臺開始為用戶提供動態頭像等個性化功能,讓員工能在工作場景中展現獨特個性。
          • 滿足個體情緒需求:通過色彩、插畫等元素營造更具情感氛圍的界面,比如 Teams 和 ONES 等產品利用色彩和插畫設計,提升用戶對品牌的情感認同,使工作不再枯燥。
          • 10_鍓湰.png

          視覺設計創新

          • 漸變色的廣泛應用2:漸變色重新定義了 B 端視覺美學,許多 B 端產品將背景和元素轉變為漸變色,如 Baklib 官網的淡色背景漸變,既傳達現代感與科技感,又實現了不同內容間的自然過渡。
          • 網格化布局流行2:網格化布局以其結構性受到青睞,像 Magnolia 與 Intercom 等企業的官網采用此布局,使內容分區明確,優化了頁面可讀性與邏輯性。

          智能化融入

          • 突出 AI 元素2:AI 已成為 B 端設計的核心元素,眾多 SaaS 平臺在官網上直接強調與 AI 相關的功能,甚至在 Slogan 中加入關鍵詞,展示企業的科技實力,讓用戶感受到前沿的科技形象。
          • 智能交互體驗:借助 AI 實現智能提醒、自動推薦等功能,例如一些 B 端辦公軟件可以根據用戶的使用習慣和工作流程,自動推送相關的任務和文件,提高工作效率。

          交互設計升級

          • 微動效與微交互2:適度的動畫和交互效果能夠吸引用戶注意,增強網站互動性,如在時間軸上滑動的效果、功能版塊的滾動折疊等,讓界面更加生動有趣,提升用戶粘性。
          • 便捷的菜單導航2:折疊加展開的平鋪菜單導航成為主流,清晰直觀,方便用戶快速找到所需信息,提高了信息獲取的速度和便利性。
          • 22.png
          展望未來,B 端界面設計還可能有以下發展方向:

          沉浸式體驗增強

          隨著技術的發展,B 端界面可能會更多地融入虛擬現實(VR)和增強現實(AR)技術,為用戶帶來沉浸式的操作體驗。比如在設計建筑規劃、機械維修等 B 端應用時,用戶可以通過 VR 或 AR 技術更直觀地進行操作和協作。

          數據可視化深化

          面對日益增長的數據量,數據可視化將更加復雜和精細。除了常見的圖表和圖形,可能會出現更具創意和互動性的數據展示方式,幫助用戶更深入地理解數據背后的信息,為決策提供更有力的支持。

          跨平臺融合優化

          企業使用的設備和平臺越來越多樣化,未來 B 端界面設計需要更好地實現跨平臺融合,確保在不同的設備和操作系統上都能提供一致、流暢的用戶體驗。
          總之,2025 年的 B 端界面設計正朝著個性化、智能化、創新化的方向發展,未來也將持續以滿足用戶需求、提升用戶體驗為目標,不斷探索和創新。B 端設計師需要緊跟這些趨勢,才能為企業創造出更具價值的產品和服務。
           

          解鎖B端按鈕設計10大密碼

          ui設計分享達人

           
          無法想象沒有按鈕的頁面是什么滋味,那定會像沒有方向盤的汽車,讓人不知所措吧?也無法想象按鈕設計不恰當,會給用戶帶來怎樣的困擾?
           
          面對十萬火急的任務需求,
          如果需要調動全部理性腦,深呼吸三秒,
          才能找到想要執行操作的按鈕入口,我想這樣的產品設計是失敗的,是會被用戶所唾棄的。
           
          本文將詳細剖析按鈕的神秘面紗,了解它、研究它,讓按鈕設計成為產品的得力助手,為我們的產品賦能,為我們的工作提效,下面就讓我們開啟這場神秘之旅吧!
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          目錄
          一、按鈕的定義
          二、按鈕設計的種類
          三、按鈕設計的尺寸
          四、按鈕的構成
          五、按鈕設計的作用
          六、按鈕的位置
          七、按鈕的顏色
          八、按鈕在UI界面的設計原則
          九、按鈕設計的注意事項
          十、按鈕弱化設計的六種方式
           
           
          解鎖B端按鈕設計10大密碼
           
           
          按鈕在我們生活中起著很大的作用,它就像我們的小助手一樣,幫我們一鍵開啟想要的任務,凡事都能一鍵觸達。
           
          解鎖B端按鈕設計10大密碼
           
           
           
          按鈕在UI界面中,是一種界面交互控件,通常以矩形、圓形或其他幾何形狀呈現,具有明確的視覺邊界。它通過用戶的點擊、觸摸等操作來觸發特定的功能或操作,如提交表單、執行命令、導航頁面、切換狀態等。
           
          按鈕一般包含文字標簽、圖標或兩者的組合,以清晰傳達其功能。
          同時,按鈕在不同狀態下會呈現出不同的視覺效果,如默認狀態、按下狀態、懸浮狀態、禁用狀態等,為用戶提供操作反饋和引導。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、Antdesign對按鈕的種類劃分:
           
          ?
           次按鈕
          常規按鈕,用于非主要動作。如果不確定選擇哪種按鈕,次按鈕永遠是最安全的選擇。
          解鎖B端按鈕設計10大密碼
           
           
           
          主按鈕
          突出“完成”、“推薦”類操作;一個按鈕區最多使用一個主按鈕。
          解鎖B端按鈕設計10大密碼
           
           
           
          文字按鈕
          弱化的按鈕,采用更輕量的按鈕樣式,可用于需大面積展示按鈕場景,例如下面的站酷活動頁就用了很多的文字按鈕,只有當按鈕被選中時,按鈕才會高亮選中。
          解鎖B端按鈕設計10大密碼
           
           
           
          圖標按鈕
          圖標提供視覺線索,避免逐字閱讀按鈕文案,更高效地使用界面,讓頁面看起來更加的簡潔。
          解鎖B端按鈕設計10大密碼
           
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          在按鈕中添加圖標
          用于對按鈕含義補充解釋,提高按鈕識別效率。
          解鎖B端按鈕設計10大密碼
           
           
           
          2、按鈕的樣式種類
          按鈕的樣式可以從多個方面進行分類和設計,以下是一些常見的樣式分類:
           
          按顏色劃分:
          單色按鈕
          按鈕背景為單一顏色,如藍色、綠色、紅色等,常用于強調按鈕的主要功能或操作。
           
          漸變色按鈕
          按鈕背景為漸變色,可以是線性漸變或徑向漸變,通常用于增加視覺吸引力和現代感。
           
          透明按鈕
          按鈕背景透明或半透明,通常用于與背景融合或突出按鈕上的文本和圖標。
           
          彩色邊框按鈕
          按鈕背景透明或淺色,但有彩色邊框,常用于需要突出按鈕邊界的場景。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          按形狀分
          矩形按鈕
          這種是最常見的按鈕形狀,適用于大多數界面設計。
           
          圓形按鈕
          按鈕形狀為圓形,通常用于表示播放、暫停等操作,或用于具有特定功能的圖標按鈕。
           
          圓角按鈕
          按鈕形狀通常為圓角矩形,常用于需要柔和視覺效果的場景。
           
          自定義形狀按鈕
          根據設計需求,按鈕可以是任意自定義形狀,如星形、心形等,常用于創意設計或特定主題的界面。
          解鎖B端按鈕設計10大密碼
           
           
           
          按邊框分
          無邊框按鈕
          按鈕沒有邊框,背景和文本直接顯示,常用于簡潔的界面設計。
           
          細邊框按鈕
          按鈕有細邊框,常用于區分按鈕與周圍元素,同時保持界面的簡潔性。
           
          粗邊框按鈕
          按鈕有粗邊框,常用于強調按鈕或與背景形成強烈對比。
           
          虛線邊框按鈕
          按鈕邊框為虛線,常用于表示輔助操作或非主要功能。
          解鎖B端按鈕設計10大密碼
           
           
           
          按圖標分
          圖標按鈕
          按鈕上只有圖標,沒有文本,常用于表示通用操作或節省空間的場景。
           
          圖標+文本按鈕
          按鈕上既有圖標又有文本,圖標通常位于文本左側或上方,常用于清晰表達按鈕功能的場景。
          解鎖B端按鈕設計10大密碼
           
           
           
          按陰影樣式分
          無陰影按鈕
          按鈕沒有陰影,常用于簡潔或平面風格的界面設計。
           
          輕微陰影按鈕
          按鈕有輕微的陰影效果,常用于增加按鈕的立體感和層次感。
           
          明顯陰影按鈕
          按鈕有明顯的陰影效果,常用于突出按鈕或與背景形成強烈對比。
           
          動態陰影按鈕
          按鈕的陰影效果會隨著鼠標懸?;螯c擊等交互動作而變化,常用于增加交互體驗的趣味性。
          解鎖B端按鈕設計10大密碼
           
           
           
          按動畫種類分
          無動畫按鈕
          按鈕沒有動畫效果,常用于簡潔或傳統的界面設計。
           
          懸停動畫按鈕
          當鼠標懸停在按鈕上時,按鈕會有動畫效果,如顏色漸變、邊框變化、圖標旋轉等,常用于增加交互體驗的趣味性和吸引力。
           
          點擊動畫按鈕
          當點擊按鈕時,按鈕會有動畫效果,如縮放、震動、波紋等,常用于增加交互體驗的反饋感。
          馬蜂窩的功能主按鈕,在點擊的時候都會產生動畫,交互感十足。
          解鎖B端按鈕設計10大密碼
           
           
           
          加載動畫按鈕
          當按鈕處于加載狀態時,按鈕會有加載動畫效果,如旋轉圖標、進度條等,常用于告知用戶操作正在進行中。
           
           
           
          3、按鈕的幾種狀態
          解鎖B端按鈕設計10大密碼
           
           
           
          3.1 默認按鈕
          按鈕的初始狀態,通常具有正常的顏色、形狀和文字顯示,等待用戶操作。
           
          3.2 待激活狀態按鈕:
          待激活狀態按鈕通常用于指示某個功能或服務尚未激活或啟用,用戶需要執行某些操作來激活它。這種按鈕的設計和實現需要清晰地傳達當前的狀態,并引導用戶進行下一步操作。
           
          3.3 點擊狀態按鈕:
          當用戶點擊按鈕時,按鈕會呈現按下的狀態,通常通過改變顏色、形狀或添加陰影等方式來表示。
           
          3.4 禁用按鈕:
          在某些情況下,按鈕會處于禁用狀態,無法進行操作,通常會以灰色或半透明的方式顯示,提示用戶當前操作不可用。
           
          3.5加載狀態按鈕:
          加載狀態按鈕通常用于指示某個過程正在進行中,例如數據加載、文件上傳或頁面正在加載等。這種按鈕可以讓用戶知道他們的操作正在被處理,而不是卡住或出現錯誤。
           
          3.6危險提示狀態按鈕:
          危險提示狀態按鈕通常用于提醒用戶即將執行的操作可能帶來風險或不可逆的結果,例如刪除重要文件、注銷賬戶等。這種按鈕的設計和實現需要讓用戶明確意識到操作的危險性,以避免誤操作。
           
          下邊這兩組彈框就是運用了危險按鈕,來提示客戶未來即將面臨的風險,警示作用非常的明顯。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、 Web端的按鈕尺寸建議
          在Web端,按鈕尺寸沒有固定標準。不過,一般來講,按鈕的高度常在32px-48px之間,寬度可根據內容靈活設置,但最好不要小于48px,這樣方便用戶用手指(觸屏設備)或鼠標點擊。像一個簡單的“提交”按鈕,寬度可能是80px左右,高度是36px左右。這些尺寸能保證按鈕在視覺上比較舒適,易于交互。
           
           
          2、 麻省理工觸摸實驗對按鈕尺寸的指導
          麻省理工觸摸實驗室通過對人類指尖的研究,得出了關于界面按鈕大小設計的一些重要參考數據。
           
          解鎖B端按鈕設計10大密碼
           
           
           
          對于食指,平均寬度在16至20毫米,指腹觸摸區域尺寸為10至14毫米,指尖觸摸區域尺寸為8至10毫米;對于拇指,平均寬度為25毫米,指腹觸摸區域尺寸為12至16毫米,指尖觸摸區域尺寸為10至12毫米。由此建議,食指觸摸的按鈕應保證在8毫米×8毫米以上,且控件間距應保證至少在1毫米以上;拇指觸摸的按鈕應保證在10毫米×10毫米以上,且控件間距應保證至少在2毫米以上。
           
          該研究還指出,大多數用戶可以舒適可靠地擊中 10 毫米×10 毫米的觸摸目標 。
           
           
          3、 iOS對按鈕尺寸大小的規范
          解鎖B端按鈕設計10大密碼
           
           
           
          從按鈕圖標尺寸來看,根據蘋果官方設計指南,iOS中按鈕圖標有不同標準。小圖標尺寸為24×24pt,用于小型按鈕,如導航;標準圖標為32×32pt,用于普通按鈕,適合次要操作按鈕;大圖標是 40×40pt,用于寬大按鈕;特大圖標則為48×48pt,用于特大按鈕。不同設備屏幕尺寸也有對應的建議圖標尺寸,如iPhoneSE建議24pt,iPhone14及iPhone14Pro建議32pt,iPad 建議40pt 。
           
          在最小觸摸區域方面,iOS規定最小觸碰區域為44×44pt,這種尺寸一般適合主要操作按鈕。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          UI按鈕的組成主要包括以下幾個關鍵元素:
           
          1、圓角
          圓角的大小決定了按鈕的氣質和視覺感受。小圓角常用于常規按鈕,如4px圓角;圓角越大,越有親和力,人眼往往不喜歡非常鋒利的物體,所以通常不建議使用0圓角的按鈕樣式,根據我大量的體驗,我發現市面上確實也是帶圓角的按鈕居多些。
          解鎖B端按鈕設計10大密碼
           
           
           
          2、圖標
          圖標用于直觀表達按鈕的功能或狀態,如加載中、編輯等。圖標的設計應與整體頁面風格一致,并確保其含義明確易懂。
           
           
          3、內間距
          內邊距能夠擴大按鈕的可點擊范圍,幫助用戶更容易點擊按鈕。一個好的設計間距是把按鈕的水平內邊距設計成垂直內邊距的2倍。當然,你也可以根據你設計的實際情況做適當調整,規矩不是死的。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          4、容器
          容器是包含所有視覺和交互元素的框架,包括顏色、紋理、文案和圖標等。容器的設計應支持按鈕的功能和美觀。
           
           
          5、邊框
          邊框定義了按鈕的邊界,常用于次級按鈕的描邊。邊框的粗細和樣式可以影響按鈕的視覺層次和交互效果。
           
           
          6、文案
          文案是按鈕上的文字描述,用于表達按鈕的含義和功能。文案應簡潔明了,易于理解,同時具有一定的吸引力。
           
           
          7、背景
          背景用于表達按鈕的狀態和品牌氣質。不同的背景顏色和紋理可以增強按鈕的視覺吸引力和品牌識別度。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          8、投影
          投影用于凸顯層級關系,幫助用戶更好地區分不同的按鈕。投影通常與紋理、漸變色結合使用,以打造更好的視覺體驗。
           
          佐糖首頁為了促進轉化,特意將“開通會員”的按鈕用投影凸顯處理,帶投影的按鈕明顯有向前走的感覺,比沒有投影的按鈕看起來更加顯眼,小小投影在頁面中不僅起到增加空間感的作用,還起到了業務強調的作用,已經不僅僅是樣式的一個承載了。
          解鎖B端按鈕設計10大密碼
           
           
           
          這些元素共同作用,不僅提升了按鈕的功能性,還增強了其美觀性和用戶體驗。在設計UI按鈕時,應綜合考慮這些因素,以確保按鈕既美觀又實用。
           
           
          解鎖B端按鈕設計10大密碼
           
           
          Antdesign指出按鈕的作用是指導用戶采取你希望他們采取的行動,并幫助用戶防錯。
          解鎖B端按鈕設計10大密碼
           
           
           
          1、觸發操作
          1.1提交與確認:
          在表單填寫場景中,如用戶注冊、登錄、信息提交等,按鈕用于觸發提交或確認操作,將用戶輸入的信息發送給系統進行處理。
           
          1.2執行功能:
          在各類軟件中,按鈕是執行具體功能的主要方式,如在圖像編輯軟件中,“裁剪”“旋轉”“調整顏色”等按鈕,可讓用戶快速實現相應功能。
           
           
          2、導航跳轉
          2.1頁面切換:
          在多頁面的應用或網站中,按鈕可實現頁面之間的切換,如網站的首頁、產品頁、關于我們頁等,通過點擊按鈕,用戶能方便地瀏覽不同頁面內容。
           
          2.2菜單展開與收起:
          用于控制導航菜單的展開與收起,節省頁面空間,提高界面的整潔度和易用性。
           
           
          3、狀態控制
          3.1顯示與隱藏:
          可用于控制某些元素的顯示與隱藏,如在電商網站中,點擊“查看更多商品詳情”按鈕,可展開隱藏的詳細商品信息。
           
          飛書中的這個小小按鈕,它承載著隱藏折疊的功能,讓頁面看起來更加的簡潔有序。
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          3.2啟用與禁用:
          在某些功能需要滿足一定條件才能使用時,按鈕可用于表示該功能的啟用或禁用狀態,如在未填寫完必填項時,“提交”按鈕處于禁用狀態,無法點擊。
           
          中國移動云盤的登錄頁就是這么設計的,當前面信息沒有填完,后面的登錄按鈕始終是禁用的狀態,只有當信息填完,且填寫正確,按鈕才會亮起。
          解鎖B端按鈕設計10大密碼
           
           
           
          4、提供反饋
          4.1 操作反饋:
          當用戶點擊按鈕后,按鈕會通過顏色、形狀、動畫等方式的改變,向用戶提供操作反饋,告知用戶系統已接收到操作指令。
           
          4.2 引導提示:
          在一些復雜操作或新功能引導時,按鈕可作為引導提示的一部分,告知用戶下一步操作,如在新手引導流程中,突出顯示“下一步”按鈕。
           
          心島日志的新手指引中就是這樣設計的,按鈕在其中起了很重要的指引作用。
          解鎖B端按鈕設計10大密碼
           
           
           
          5、數據交互
          5.1 數據篩選:
          在數據展示界面,如表格、列表等,按鈕可用于對數據進行篩選,方便用戶快速找到所需信息。
          釘釘打卡這個界面中,多虧有了日、周、月的篩選按鈕,才讓數據篩選變得如此便捷。
          解鎖B端按鈕設計10大密碼
           
           
           
          5.2 數據排序:
          通過點擊“按時間排序”“按銷量排序”等按鈕,用戶可對數據進行重新排序,以滿足不同的查看需求。
           
           
          6、品牌傳達
          很多產品的按鈕顏色都是與它的品牌色高度一致的,它既是按鈕,又是品牌色的傳遞大使。
           
          網易云音樂的按鈕色用的網易紅,釘釘打卡的按鈕用的騰訊藍,都是在傳遞自己的品牌色,同時也是在進行指令的傳達。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          在日常設計中,頁面無疑少不了按鈕位置的擺放,那么按鈕放置在什么樣的位置合適,這也是一個值得深思的問題,也許我們已經司空見慣了按鈕的位置擺放,但是我們知道它為什么要放這里或者那里嗎?下面我們來看下這幾種設計模型,讓它告訴我們,為什么,在特定場景下,按鈕位置要這么放?
           
           
          1、設計依據 – Z型視覺模型
          1.1 原理含義
          Z型視覺模型是一種描述用戶在瀏覽網頁或界面時視覺軌跡的理論模型。
          它的布局遵循字母Z的形狀,指用戶的瀏覽路線——從左到右,從上到下的的視覺運動軌跡。
           
          首先,人們從左上角到右上角進行掃描,形成一條水平線;第二步,向頁面的左下側,創建一條對角線;最后,再次向右轉,形成第二條水平線,當觀眾的視角以這種模式移動時,它形成一個虛構的“Z”字形。
          解鎖B端按鈕設計10大密碼
           
           
           
          1.2 視覺區域
          區域1:位于頁面左上角,是用戶視線最先關注的區域,通常放置最重要的信息,如網站標志、導航欄等,能第一時間吸引用戶的注意力并讓用戶對頁面內容有初步的整體認知。
           
          區域2:在區域1的右側,用戶的視線在水平移動時會經過該區域,可放置一些與區域1相關的輔助信息或次要的導航元素等。
           
          區域3:位于頁面中部偏左,當用戶視線繼續向下移動時會關注到該區域,通常用來展示頁面的核心內容,如產品介紹、文章主體等。
           
          區域4:在頁面的右下角,是用戶視線的終點區域之一,可放置一些重要的操作按鈕或補充信息等,以吸引用戶在瀏覽完主要內容后進行進一步的操作或獲取更多信息。
          解鎖B端按鈕設計10大密碼
           
           
           
          1.3 應用案例
          在電商網站中,商家會把熱門推薦或主打產品放在區域1和區域3,以吸引用戶的注意力。在產品詳情頁面,將“加入購物車”“立即購買”等按鈕放在區域4,方便用戶在瀏覽完產品信息后進行購買操作。
           
          天貓商城就是這樣做的,把網站的LOGO圖放置在左上角(區域1),把產品圖放置在左下角(區域3),最后在用戶瀏覽了全部頁面之后,在右下角(區域4)放置購買按鈕,引導用戶下單。
           
          在這個帶有銷售場景的頁面設計中,
          購買按鈕放置在右下角符合用戶瀏覽習慣,也符合Z型視覺模型。
          解鎖B端按鈕設計10大密碼
           
           
           
          在B端應用軟件中,可能運用的功能比較多,按鈕也比較多,通過大量分析和觀察發現,它們
          大部分喜歡把按鈕放置在每次視覺運動線的起點或者終點的位置。
           
          騰訊云是這樣處理的,中國移動網盤是這么處理的,看似巧合,其實也有它合情合理的一面,因為每一個動作的開始和結束都會更加的引人注意。
           
          這就跟人們每次入職一個新公司一樣,剛進去時會特別賣力、小心,后面時間長了,也就形成免疫,習慣了,但是當最后要離開這家公司的時候,最后心情又會特別復雜,回想起自己在這里成長的歲月,就會心生很多的感慨,也會特別的記憶深刻。
           
          也許這也是為啥很多頁面設計,喜歡
          把重要的按鈕放置在每次視覺運動線的起點或者終點吧!
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          按鈕的顏色在界面中不僅起到視覺點綴的作用,同時也是按鈕狀態的一種呈現和反饋。
           
          按鈕顏色不是千篇一律的品牌色,它也經常需要根據業務場景的不同,更換顏色,比方說紅色-刪除按鈕、黃色-告警按鈕、綠色-通過按鈕、藍色-更多按鈕,不同的按鈕在顏色設計上都會有所區別。
          解鎖B端按鈕設計10大密碼
           
           
           
          此外,在設計按鈕顏色時,有一些基本規范。
          首先,從功能角度看,
          主要按鈕通常會使用比較突出的顏色,
          像鮮艷的藍色(如#007BFF),這是因為藍色醒目又不會過于刺眼,能引導用戶去點擊。次要按鈕(如取消、返回)的顏色會稍淡一些,比如淺灰色(#ccc),讓用戶知道這是相對次要的操作。
           
          從顏色搭配來說,按鈕顏色要和背景色有足夠的對比度,方便用戶識別。比如背景是白色,深色按鈕就會很清晰;如果背景顏色較深,那按鈕可以用淺色或者高亮度顏色。
           
          另外,顏色的選擇也要考慮產品的風格和使用場景。例如,在一個游戲軟件里可能會使用更活潑的色彩,像紅色、橙色;而在辦公軟件里,通常會采用比較沉穩的色調,如藍色、黑色。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、可識別性
          1.1 視覺清晰:
          按鈕應采用用戶熟悉的設計樣式,如帶有矩形或圓角矩形邊框的填充按鈕、帶有陰影的填充按鈕、幽靈按鈕等。
           
          1.2 文字明確:
          按鈕上的標簽應準確、簡明直接地介紹其功能,避免使用過于通用或模糊的表述,讓用戶清楚點擊后會發生什么。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          2、易操作性
          2.1位置合理:
          將按鈕放在用戶期望看到的地方,如遵循F型或古騰堡原則,在頁面的視覺焦點區域放置重要按鈕。
          解鎖B端按鈕設計10大密碼
           
           
           
          2.2尺寸適宜:
          按鈕大小應反映其在屏幕上的優先級,更大的按鈕用于更重要的操作,同時要適配用戶的手指,避免誤觸。
           
           
           
          3、一致性
          3.1 順序得當、邏輯一致:
          按鈕的順序應反映用戶與界面之間交互的邏輯,如“上一步”按鈕通常在左邊,“下一步”按鈕在右邊。
           
          3.2 狀態樣式一致:
          按鈕應具有一致的狀態樣式,如默認、按下、聚焦、禁用等,一個產品中,這些狀態樣式要高度的一致,不能在這個頁面按鈕樣式是這樣的,跑到另一個頁面,樣式又發生了改變。
           
          著名的格式塔心理學也是這么認為的,它強調人對事物的理解是基于整體的、有組織結構的,如果按鈕設計做到一致性,對提高產品的整體性是有非常大的改進的。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          4、簡潔性
          4.1 避免過多
          避免在一個界面中使用過多的按鈕,以免讓用戶感到無所適從,應優先考慮最重要的操作。
           
          4.2 功能單一
          每個按鈕應盡量只執行一個主要功能,避免一個按鈕承載過多復雜的操作,降低用戶的認知成本。
           
          ??硕芍赋?,人的決策時間會隨著選擇的增加而增加。在按鈕設計中,
          簡潔的設計能減少用戶的選擇和認知負擔
          ,使用戶能更快地做出決策并執行操作。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          5、美觀性
          5.1 風格統一
          按鈕的設計風格應與整個UI界面的風格保持一致,包括顏色、形狀、字體等方面,形成統一的視覺體系。
           
          5.2 對比協調
          在保持整體協調的基礎上,通過對比突出重要按鈕,如使用高對比度的顏色、較大的尺寸等,吸引用戶的注意力。
          情感化設計理論強調設計應該注重用戶的情感體驗。美觀的按鈕設計能夠傳遞積極的情感信息,增強用戶和產品的情感連接。
          解鎖B端按鈕設計10大密碼
           
           
           
           
          6、要符合習慣
          奧斯卡·王爾德說過:“習慣一旦養成,便很難改變。” 
          所以我們在設計按鈕的時候,一定要符合人性的習慣,而不是試圖改變人們的習慣。
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          1、按鈕設計要有分組意識
          帶有分組的按鈕擺放,讓人看起來總是更加的有序,也更利于用戶進行操作,面對同類型的功能操作點無需跳躍著去尋找,能很快在相似功能操作區域找到。
           
          360的分組意識很強烈,三個不同區域的圖標按鈕樣式都做了明顯的區分,讓界面看起來更加有序,操作起來也更加的便捷。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          2、按鈕排列視覺上要有主次
          切不可一行按鈕中出現多個高強調的按鈕,Antdesign對這個也做了詮釋,會對用戶的行為進行錯誤的引導,也不利于聚焦。
           
          通義這個頁面雖然有多個選中的按鈕,但是沒有全部用高強調的按鈕,只有強推薦的操作“開始錄音”才用了強按鈕,其它通過相對淺的顏色做了弱按鈕選中處理,視覺上主次分明,信息主次表達上也清晰可見。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          3、不要在按鈕中放置兩個圖標
          當一個按鈕同時兼顧兩個交互動作的時候,一定要區分設計,不能赤裸裸的展示在一個按鈕中,而不做任何區分。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          4、返回按鈕宜放置在左邊
          具有返回意義的按鈕,應該放在左側,暗示其方向是回到之前,例如上一步。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          5、按鈕文字不宜太長
          簡短的文字更易被用戶閱讀和記住,在一個按鈕上最多不超過5個文字,重要的按鈕一般
          使用2~4個字。
          解鎖B端按鈕設計10大密碼
           
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          ? 用純灰色文字的弱化按鈕
           
          ? 用灰色邊框+灰色文字的弱化按鈕
           
          ? 用顏色邊框+顏色文字的弱化按鈕
           
          ? 用灰底+灰色文字的弱化按鈕
           
          ? 用淺色底+顏色文字的弱化按鈕
           
          ? 用純顏色的弱化按鈕
           
          解鎖B端按鈕設計10大密碼
           
           
           
           
          解鎖B端按鈕設計10大密碼
           
           
          通過本篇文章的探討,我們深入了解了B端按鈕設計的九大核心要素。從按鈕的基本定義到Antdesign的分類,再到尺寸、構成、作用、位置和顏色等細節,每一部分都是提升用戶體驗的關鍵。
           
          按鈕設計不僅關乎美觀,更影響著用戶的操作效率和滿意度。
          在UI界面中,遵循設計原則和注意事項,確保按鈕既實用又具有吸引力,是每位設計師的職責。
           
          希望本文能為設計師們提供有價值的參考,激發更多創新靈感,共同推動B端產品的交互設計向更高水平發展。
           
           
          解鎖B端按鈕設計10大密碼


          作者:姝斐suphie
          鏈接:https://www.zcool.com.cn/article/ZMTY0OTkwOA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          B 端界面設計中色彩搭配的實用技巧

          ui設計分享達人

          B 端界面設計領域,色彩搭配是影響用戶體驗和產品形象的關鍵因素。合理的色彩運用能提升界面的可讀性、易用性,強化品牌認知。下面分享一些 B 端界面設計中色彩搭配的實用技巧。

          一、運用色彩心理學

          不同色彩會引發用戶不同的情感反應。藍色常被視為專業、可靠,如眾多云計算平臺的管理界面多采用藍色調,讓用戶感受到服務的專業與安全 ,從而增強信任。綠色代表生機、健康,在醫療保健類 B 端應用中,用綠色顯示正常數據,可營造安心的氛圍。而紅色具有強烈視覺沖擊力,適合用于警示信息或關鍵操作提示,像刪除確認按鈕常用紅色,以引起用戶注意,避免誤操作。

          2.png

          二、搭建色彩體系

          構建一套完善的色彩體系是基礎。主色調要與企業品牌緊密相連,像 Salesforce 就以經典藍色貫穿界面,強化品牌印象。輔助色一般選 2 - 3 種,用于次要元素,如在藍色為主的項目管理系統中,淺灰色展示次要信息,橙色突出任務進度,讓界面層次分明。強調色則用高飽和度、對比強的顏色,在數據報表中用紅色標注異常數據,助力用戶快速抓取關鍵信息。

          三、確保色彩對比度

          足夠的色彩對比度是保障界面可讀性和可操作性的關鍵。依據 WCAG 標準,正常文本與背景對比度至少 4.5:1,大文本 3:1。像黑字白底就是高對比度的經典搭配,易讀性強;而深灰字配淺灰背景則可能導致閱讀困難。此外,不同界面元素間的對比度也很重要,按鈕與周圍區域要區分明顯,不同狀態的按鈕也要通過色彩變化區分,方便用戶操作。

          四、保障可讀性與識別性

          B 端界面信息量大,應避免花哨的色彩組合,防止分散用戶注意力和造成視覺疲勞。像數據分析類產品,多采用淡藍、淡綠等柔和色調搭配簡潔圖表和文字,讓用戶輕松理解數據。同時,要考慮色彩在不同環境和設備下的顯示效果,確保清晰可辨,避免出現色彩偏差。

          14.png

          五、遵循品牌色彩規范

          若企業有明確的品牌色彩規范,B 端界面應嚴格遵循??芍苯邮褂闷放浦魃{,如騰訊云大量運用騰訊藍,加深用戶對品牌的關聯認知。也可基于品牌色拓展衍生,提取不同明度和飽和度的顏色用于輔助或強調,既保持品牌一致性,又讓界面更豐富生動。

          六、重視用戶測試

          完成色彩方案后,用戶測試必不可少。通過收集用戶對界面色彩的直觀感受、意見反饋,了解其舒適度、易讀性等情況,針對性優化。同時觀察用戶行為,如尋找信息的速度、操作失誤等,深入了解用戶對色彩的實際需求,進一步完善設計。

          總之,B 端界面設計的色彩搭配需綜合考量多方面因素。掌握這些實用技巧,有助于打造出既美觀又實用的 B 端界面,提升用戶體驗,塑造企業專業形象。

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

          打動用戶的關鍵:用戶體驗地圖實戰攻略

          ui設計分享達人

          目錄
          一、  什么是用戶體驗地圖?
          二、  為什么使用用戶體驗地圖?
          三、  什么情況使用用戶體驗地圖?
          四、  用戶體驗地圖的組成?
          五、  用戶體驗地圖的制作流程
          六、  用戶體驗地圖案例展示
          七、  用戶體驗地圖總結
          一、  什么是用戶體驗地圖?
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          用戶體驗地圖(User Experience Map)是一種用于可視化展示用戶在與產品或服務互動過程中所經歷的各個接觸點和體驗的工具。它幫助團隊深入了解用戶的行為、情感和痛點,從而優化用戶體驗。
          用戶體驗地圖(User Experience Map)是產品設計前期——用戶研究中很重要的一部分,視角化和圖表的方式,從用戶的角度來表現其和產品/組織/服務交互的過程,是連續的視覺時間和完整故事的多個互動點。
          簡單來說,在用戶定義角色,搭配行為研究、表格調查和競品分析等數據下,構思出這個角色在某個角色故事下要完成特定目標,以反應用戶使用某個特定產品的真實特性,有助于我們評估現狀、找出用戶真正的痛點,與優化整體的體驗流程(創造和諧的互動)。
          二、  為什么使用用戶體驗地圖?
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          使用用戶體驗地圖(User Experience Map)在項目中有很多重要的原因,能夠給團隊帶來顯著的價值,例如:
          1、全面理解用戶旅程
          可視化用戶體驗:用戶體驗地圖通過圖形化的方式展示用戶在使用產品或服務過程中的所有步驟和接觸點,使團隊能夠直觀地看到用戶的整個旅程。
          識別關鍵時刻:幫助團隊識別用戶旅程中的關鍵觸點和情感波動,理解用戶在不同階段的需求和行為。
          2、發現用戶痛點和改進機會
          識別痛點:用戶體驗地圖能夠揭示用戶在使用過程中的痛點和挑戰,使團隊可以針對這些問題制定解決方案。
          挖掘改進機會:通過分析用戶行為和情感波動,團隊可以找到提升用戶體驗的機會,從而優化產品或服務。
          3. 增強團隊協作和溝通
          統一理解:用戶體驗地圖作為一種直觀的溝通工具,使跨職能團隊(如產品經理、設計師、開發人員和市場團隊)能夠共享對用戶體驗的統一理解。
          促進協作:通過共同創建和討論用戶體驗地圖,團隊成員可以更好地協作,提出建設性的意見和建議。
          4. 驅動以用戶為中心的設計
          以用戶為中心:用戶體驗地圖強調從用戶的角度出發,關注用戶的需求、情感和行為,推動以用戶為中心的設計和開發。
          提升用戶滿意度:通過優化用戶旅程中的各個觸點和體驗,團隊可以提升用戶滿意度和忠誠度。
          5. 支持決策制定
          數據驅動決策:用戶體驗地圖基于用戶研究和數據分析,為決策提供可靠的依據,減少主觀判斷和猜測。
          優先級管理:通過識別用戶體驗中的關鍵問題和機會,團隊可以更好地確定優先級,集中資源解決最重要的問題。
          6. 提高用戶體驗設計的效率和效果
          明確目標和方向:用戶體驗地圖幫助團隊明確設計目標和方向,減少反復修改和溝通成本,提高設計效率。
          驗證設計假設:通過用戶體驗地圖,團隊可以驗證設計假設和概念,確保設計方案符合用戶需求和期望。
          三、什么情況使用用戶體驗地圖?
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          用戶體驗地圖(User Experience Map)在多種情況下都可以使用,能夠幫助團隊更好地理解和優化用戶體驗。例如:
          1.產品或服務的初期開發階段
          定義產品概念:在開發新產品或服務時,用戶體驗地圖幫助團隊理解用戶需求和期望,確保產品設計符合用戶需求。
          設計用戶旅程:通過用戶體驗地圖,團隊可以詳細規劃用戶與產品互動的每個步驟和觸點,確保用戶旅程流暢且無障礙。
          示例:
          一家創業公司在開發一款新的移動應用時,通過用戶體驗地圖了解目標用戶的需求和使用習慣,從而設計出更符合用戶期望的產品。
          2.現有產品或服務的優化
          識別和解決問題:當現有產品或服務存在用戶體驗問題時,用戶體驗地圖幫助團隊識別痛點并制定改進措施。
          提升用戶滿意度:通過分析用戶在不同接觸點的情感和行為,團隊可以找到提升用戶滿意度和忠誠度的機會。
          示例:
          一家電商平臺通過用戶體驗地圖發現用戶在結賬環節遇到的困難,優化了結賬流程,顯著提高了用戶滿意度和轉化率。
          3.跨職能團隊的協作和溝通
          建立共同理解:在涉及多個部門的項目中,用戶體驗地圖幫助不同團隊(如產品、設計、開發、市場)建立對用戶體驗的共同理解。
          促進協作:通過可視化的用戶旅程,團隊成員可以更有效地討論和協作,提出有建設性的改進建議。
          示例:
          一家大型企業在推出一項新服務時,通過用戶體驗地圖讓產品經理、設計師和市場團隊共同參與,確保各團隊對用戶體驗的理解一致,從而提高協作效率。
          4.用戶研究和測試階段
          記錄用戶反饋:在用戶研究和測試階段,用戶體驗地圖幫助記錄和分析用戶反饋,發現用戶在使用產品過程中的實際體驗。
          驗證設計假設:通過用戶體驗地圖,團隊可以驗證設計假設,確保設計方案符合用戶需求和期望。
          示例:
          一家金融科技公司在測試新功能時,通過用戶體驗地圖記錄用戶的使用體驗和反饋,優化了功能設計。
          5.制定產品戰略和路線圖
          戰略規劃:用戶體驗地圖幫助團隊從用戶角度出發,制定產品戰略和發展路線圖,確保產品的發展方向符合用戶需求。
          優先級管理:通過識別用戶體驗中的關鍵問題和機會,團隊可以更好地確定改進措施的優先級。
          示例:
          一家健康科技公司在制定未來兩年的產品發展計劃時,通過用戶體驗地圖分析用戶需求和市場趨勢,確定了重點開發的功能和服務。
          6.營銷和客戶支持
          提升客戶支持效率:用戶體驗地圖幫助識別用戶在尋求支持時的痛點,優化客戶支持流程,提高用戶滿意度。
          優化營銷策略:通過了解用戶在不同階段的情感和行為,團隊可以制定更有針對性的營銷策略,提升用戶轉化率。
          示例:
          一家SaaS公司通過用戶體驗地圖發現用戶在使用過程中遇到的常見問題,優化了客戶支持流程,并根據用戶行為調整了營銷策略,提高了客戶留存率。
          四、  用戶體驗地圖的組成?
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          組成用戶體驗地圖(User Experience Map)可以分為八個部分,分別是:用戶角色(Persona)、場景(Scenario)、階段(Stages)、觸點(Touchpoints)、用戶行為(Actions)、用戶情感(Emotions)、痛點(Pain Points)、機會(Opportunities);組成部分整合到一張用戶體驗地圖上,團隊可以直觀地看到用戶旅程中的所有關鍵要素。幫助團隊全面理解用戶在整個體驗過程中的行為、情感和痛點,從而制定更有效的優化策略,提升用戶滿意度。下面我們詳細說明這八個部分:
          1. 用戶角色(Persona)
          定義:用戶角色是目標用戶的詳細描述,包括人口統計信息、行為模式、需求和痛點。
          目的:幫助團隊聚焦特定用戶群體的需求和體驗,使設計和決策更有針對性。
          示例:
          年齡:25-35歲
          職業:城市白領
          興趣愛好:網上購物
          需求和痛點:需要便捷快速的購物體驗,不喜歡復雜的結賬流程
          2. 場景(Scenario)
          定義:場景是用戶在某一特定情境下與產品或服務互動的全過程描述。
          目的:幫助團隊了解用戶的具體使用情境和目標,確保設計滿足實際使用需求。
          示例:用戶在下班回家的路上,通過移動應用購買晚餐所需的食材。
          3. 階段(Stages)
          定義:用戶旅程的不同階段,從開始到結束,包括用戶在每個階段的主要活動和目標。
          目的:展示用戶旅程的整體結構,幫助團隊識別每個階段的關鍵活動和目標。
          示例:
          發現(Discovery)、考慮(Consideration)、決策(Decision)、使用(Usage)、回訪(Return)
          4. 觸點(Touchpoints)
          定義:用戶在每個階段與產品或服務的具體接觸點,如網站、客服、實體店等。
          目的:識別用戶與品牌互動的關鍵時刻,確保每個接觸點的體驗都得到優化。
          示例:網站首頁、產品頁面、購物車、結賬頁面、客服
          5. 用戶行為(Actions)
          定義:用戶在每個觸點上的具體行為,如瀏覽網頁、咨詢客服、購買產品等。
          目的:展示用戶的具體操作過程,幫助團隊理解用戶的實際使用方式。
          示例:瀏覽產品、加入購物車、填寫訂單信息、支付、聯系客服
          6. 用戶情感(Emotions)
          定義:用戶在每個觸點上的情感體驗,包括積極和消極的情感波動。
          目的:幫助團隊理解用戶的滿意度和痛點,確保在關鍵時刻提供積極的體驗。
          示例:
          興奮(瀏覽產品時)、猶豫(選擇支付方式時)、沮喪(遇到支付問題時)、滿意(收到產品時)
          7. 痛點(Pain Points)
          定義:用戶在整個體驗過程中遇到的困難和挑戰。
          目的:識別和解決用戶體驗中的問題,提升用戶滿意度。
          示例:
          結賬頁面加載慢、支付方式選擇不便、客服響應慢
          8. 機會(Opportunities)
          定義:基于用戶行為、情感和痛點,識別出改善用戶體驗的潛在機會。
          目的:為團隊提供改進用戶體驗的方向和具體措施,推動持續優化。
          示例:
          優化結賬頁面性能、增加支付方式、提升客服響應速度
          五、  用戶體驗地圖的制作流程
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          制作一份完整的用戶體驗地圖(User Experience Map)需要多個步驟,使用的方法也有很多,不用擔心,下面我們進行詳細步驟拆解:
          1.定義目標
          目的:明確制作用戶體驗地圖的目標和用途,比如改善特定功能的用戶體驗、優化整體用戶旅程等。
          示例:
          一家電商平臺希望通過用戶體驗地圖識別用戶在結賬過程中的痛點,并制定改進措施。
          2.收集用戶數據
          方法:
          用戶訪談:直接與用戶對話,了解他們的需求、行為和情感。
          問卷調查:通過問卷收集大規模用戶數據。
          用戶觀察:觀察用戶在實際使用產品或服務時的行為和反應。
          可用性測試:測試用戶在特定任務中的表現,發現使用障礙和痛點。
          數據分析:分析網站或應用的使用數據,了解用戶行為模式。
          示例:
          電商平臺通過用戶訪談和問卷調查收集用戶在結賬過程中的體驗和反饋。
          3.定義用戶角色(Persona)
          步驟:
          基于收集的數據,定義主要的用戶角色,描述其特征、需求和痛點。
          示例:
          用戶角色A:25-35歲,城市白領,喜歡網上購物,重視便捷和快速的購物體驗。
          4.描繪用戶旅程
          步驟:
          劃分用戶旅程的不同階段,從開始到結束,包括用戶在每個階段的主要活動和目標。
          示例:
          發現階段:用戶在網上搜索和瀏覽商品。
          考慮階段:用戶比較不同商品的特點和價格。
          決策階段:用戶決定購買某件商品。
          使用階段:用戶完成購買并等待商品送達。
          回訪階段:用戶收到商品后可能會再次訪問網站。
          5.識別觸點和用戶行為
          步驟:列出用戶在每個階段的具體觸點和行為,展示用戶的操作過程。
          示例:
          觸點:網站首頁、產品頁面、購物車、結賬頁面、客服。
          用戶行為:瀏覽產品、加入購物車、填寫訂單信息、支付、聯系客服。
          6.記錄用戶情感
          步驟:描述用戶在每個觸點上的情感體驗,包括積極和消極的情感波動。
          示例:
          用戶在瀏覽產品時感到興奮,但在結賬時因頁面加載慢而感到沮喪。
          7.識別痛點和機會
          步驟:基于用戶行為和情感,識別用戶在每個階段的痛點,并找出改善用戶體驗的機會。
          示例:
          痛點:結賬頁面加載慢、支付方式選擇不便、客服響應慢。
          機會:優化結賬頁面性能、增加支付方式、提升客服響應速度。
          8.創建可視化地圖
          步驟:將所有信息整合到一張可視化的用戶體驗地圖上,使團隊能夠直觀地了解用戶的完整體驗過程。
          工具:
          手繪草圖:用紙和筆繪制用戶體驗地圖。
          數字工具:使用工具如Miro、Lucidchart、UXPressia等創建數字用戶體驗地圖。
          9.討論和驗證
          步驟:
          與團隊成員共同討論用戶體驗地圖,驗證其準確性和全面性。
          基于討論結果進行必要的修改和調整。
          示例:
          團隊成員共同審查用戶體驗地圖,確認所有觸點和用戶行為是否準確,討論發現的痛點和改進機會。
          10.制定改進措施
          步驟:根據用戶體驗地圖識別的痛點和機會,制定具體的改進措施和實施計劃。
          示例:
          優化結賬頁面加載速度,增加多種支付方式,提升客服響應效率。
          11.實施和跟蹤改進
          步驟:實施制定的改進措施,并持續跟蹤用戶反饋和數據,評估改進效果。
          示例:
          電商平臺實施優化結賬頁面的改進措施,并通過用戶反饋和數據分析評估效果,確保用戶體驗得到提升。
          六、  用戶體驗地圖案例展示
          通過上面的介紹,相信你已經對用戶體驗地圖(User Experience Map)有了一定了解,是不是已經想自己動手開始制作了,下面我們看幾個案例:
          案例 1:電商平臺優化
          背景:一家電商平臺希望通過用戶體驗地圖識別用戶在結賬過程中的痛點,并制定改進措施,以提升用戶滿意度和轉化率。
           
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          用戶角色(Persona)
          姓名:張女士
          年齡:30歲
          職業:城市白領
          興趣:喜歡網上購物
          需求:需要便捷快速的購物體驗
          痛點:不喜歡復雜的結賬流程
          觸點和用戶行為
           
          1.  發現(Discovery):通過搜索引擎和社交媒體廣告發現平臺
          2.  考慮(Consideration):瀏覽產品詳情,查看用戶評論
          3.  決策(Decision):將商品加入購物車
          4.  購買(Purchase):填寫訂單信息并支付
          5.  回訪(Return):查看訂單狀態,聯系客戶服務
          用戶情感
          發現:興奮和好奇
          考慮:謹慎和比較
          決策:確定和期待
          購買:焦慮和滿足
          回訪:滿意和信任
          痛點和機會
          痛點:結賬頁面加載慢,支付方式選擇不便,客服響應慢
          機會:優化結賬頁面性能,增加支付方式,提升客服響應速度
          案例 2:健身App優化
          背景:一家健身App希望提高用戶的使用頻率和忠誠度。
           
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          用戶角色(Persona)
          姓名:李先生
          年齡:25歲
          職業:程序員
          興趣:健身
          需求:需要個性化的健身計劃
          痛點:課程選擇不夠個性化,計劃制定過程復雜
          觸點和用戶行為
           
          1.  發現(Discovery):通過朋友推薦和廣告發現App下載并安裝App
          2.  考慮(Consideration):瀏覽課程詳情,查看評價
          3.  決策(Decision):選擇并購買課程
          4.  使用(Usage):開始使用課程進行鍛煉
          5.  回訪(Return):查看鍛煉記錄,調整計劃
          用戶情感
          發現:好奇和期待
          考慮:審慎和比較
          決策:確定和信心
          使用:滿足和成就
          回訪:滿意和忠誠
          痛點和機會
          痛點:課程選擇不夠個性化,計劃制定復雜
          機會:增加個性化推薦功能,簡化計劃制定過程
          案例 3:銀行在線服務優化
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          背景:一家銀行希望優化其在線服務平臺,以提高用戶的操作體驗和滿意度。
          用戶角色(Persona)
          姓名:王女士
          年齡:45歲
          職業:教師
          興趣:理財
          需求:需要簡單易用的在線銀行服務
          痛點:在線服務平臺操作復雜,轉賬流程繁瑣
          觸點和用戶行為
           
          1.  發現(Discovery):訪問銀行官網,注冊賬戶
          2.  考慮(Consideration):瀏覽平臺功能和用戶評價
          3.  決策(Decision):決定使用在線服務
          4.  使用(Usage):進行賬戶管理和轉賬操作
          5.  回訪(Return):查看交易記錄,繼續使用服務
          用戶情感
          發現:好奇和懷疑
          考慮:審慎和信任
          決策:確定和信心
          使用:滿足和便捷
          回訪:滿意和忠誠
          痛點和機會
          痛點:操作復雜,轉賬流程繁瑣
          機會:簡化操作流程,優化用戶界面設計
           
          七、  用戶體驗地圖的總結
          用戶體驗地圖(User Experience Map)作為一種強大的工具,在理解和優化用戶體驗方面具有顯著優勢。然而,制作和維護用戶體驗地圖也存在資源密集、復雜性和動態變化等挑戰。團隊在使用用戶體驗地圖時,需要平衡其優劣勢,合理分配資源,確保地圖的準確性和實用性,從而真正提升用戶體驗和產品成功率。
          優勢
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
           
          1.  全景視角
          優點:用戶體驗地圖提供了用戶體驗的全景視角,涵蓋了用戶與產品或服務互動的各個階段。這種全景視角有助于團隊全面了解用戶旅程中的各個觸點和行為。
          案例:電商平臺可以通過用戶體驗地圖了解用戶從瀏覽商品到完成購買的全過程,識別出所有關鍵的用戶觸點。
          2.  用戶共情
          優點:通過記錄用戶在每個階段的情感體驗,團隊可以更好地理解用戶的需求和痛點,增強用戶共情。
          案例:健身App可以通過用戶體驗地圖了解用戶在制定和執行健身計劃時的情感變化,從而設計出更具吸引力的個性化健身計劃。
          3.  識別痛點
          優點:用戶體驗地圖有助于識別用戶在使用產品或服務過程中的痛點和障礙,幫助團隊找到改進的機會。
          案例:銀行在線服務平臺可以通過用戶體驗地圖識別出用戶在進行轉賬操作時遇到的困難,進而優化轉賬流程。
          4.  跨團隊協作
          優點:用戶體驗地圖作為一個可視化工具,可以促進跨團隊協作,使不同部門(如產品、設計、開發和市場)能夠共同參與討論和改進用戶體驗。
          案例:電商平臺可以通過用戶體驗地圖匯集市場、設計和技術團隊的意見,共同制定優化措施。
          5.  數據驅動決策
          優點:用戶體驗地圖基于用戶研究和數據分析,使決策更加數據驅動,有助于制定科學合理的改進策略。
          案例:健身App可以通過用戶體驗地圖中的用戶數據分析,調整課程推薦策略,提高用戶滿意度和使用頻率。
          劣勢
          打動用戶的關鍵:用戶體驗地圖實戰攻略
           
           
          1.  資源密集
          缺點:制作用戶體驗地圖需要大量的時間和資源,包括用戶研究、數據分析和團隊協作。
          案例:中小型企業可能難以投入足夠的資源來全面制作和維護用戶體驗地圖。
          2.  復雜性
          缺點:用戶體驗地圖可能變得非常復雜,特別是當用戶旅程涉及多個觸點和渠道時,可能難以全面和準確地記錄所有細節。
          案例:大型電商平臺的用戶旅程可能涉及網站、移動應用、社交媒體等多個渠道,制作一個全面的用戶體驗地圖可能需要大量的精力。
          3.  動態變化
          缺點:用戶行為和市場環境是動態變化的,用戶體驗地圖需要不斷更新和維護,以保持其有效性和準確性。
          案例:健身App的用戶需求和市場趨勢可能隨時變化,需要定期更新用戶體驗地圖以保持相關性。
          4.  主觀偏差
          缺點:盡管用戶體驗地圖基于用戶數據和研究,但在數據解讀和情感記錄上可能存在主觀偏差,影響決策的準確性。
          案例:銀行在線服務平臺在記錄用戶情感時,可能會受到研究者的主觀影響,從而無法完全準確地反映用戶真實感受。
          5.  過于理想化
          缺點:用戶體驗地圖有時可能過于理想化,忽略了現實中存在的限制和障礙,導致制定的改進措施難以實施。
          案例:電商平臺在識別改進機會時,可能忽略了技術實現上的困難,導致優化方案無法落地。
          參考文獻:
          https://medium.com/@michaeljiager/user-experience-maps-6184f4044e48
          https://liviayang-ms.medium.com/%E4%B8%80%E5%88%86%E9%90%98%E8%AE%93%E4%BD%A0%E4%BA%86%E8%A7%A3%E7%94%A8%E6%88%B6%E9%AB%94%E9%A9%97%E6%AD%B7%E7%A8%8B%E5%9C%96-user-experience-map-e28a1b8817c0https://uxmastery.com/how-to-create-a-customer-journey-map/https://medium.com/art-marketing/incorporating-customer-and-user-experience-data-into-holistic-journey-maps-502ae12072ac
          https://uxplanet.org/empathy-map-user-persona-and-user-flow-5299ada245c8https://medium.com/@myskill.id/persona-user-journey-map-ebd84c15ae2f?
          U
           


          作者:CANAAN8
          鏈接:https://www.zcool.com.cn/article/ZMTYzMDA4MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

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

          WechatIMG27.jpg

          關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發軟件wpf開發、軟件vue開發

          清晰展現關鍵信息,助力高效決策——數據圖表

          ui設計分享達人

          合理使用數據圖表可以幫助用戶更好地理解復雜的數據,提高用戶體驗和數據的可讀性。選擇合適的圖表類型并遵循最佳設計實踐是確保圖表有效傳達信息的關鍵。
          數據圖表是一種非常重要的可視化工具,它能夠
          幫助用戶更直觀地理解和分析數據。
          借助于圖形化的手段,清晰、快捷有效的傳達與溝通信息。從用戶的角度,數據可視化可以讓用戶快速抓住要點信息,讓關鍵的數據點從人類的眼睛快速通往心靈深處。數據可視化一般會具備以下幾個特點:準確性、創新性、簡潔性。
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           
          清晰展現關鍵信息,助力高效決策——數據圖表
           
           

           


          作者:Miao_C
          鏈接:https://www.zcool.com.cn/article/ZMTYzMjk4NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

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

          WechatIMG27.jpg

          關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計醫療行業軟件UI界面設計、教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發

          Web端設計語言庫——數據可視化

          ui設計分享達人

          一、可視化原則
          數據可視化是把相對復雜、抽象的數據通過可視化手段,表達數據內在的信息和規律,促進數據信息的傳播和應用。
          Dreawer Design 團隊總結了以下四個可視化原則,供設計者參考及使用:
          1. 準確
          數據圖表需精準、如實地反應數據信息的變化特征。
          Web端設計語言庫——數據可視化
           
           
          2. 清晰
          讓設計服務于數據內容,給用戶以最為清晰、明確、迅捷的數據展示。用戶看到可視化圖表時,應能在 5 秒內了解到它的用途,而不是花幾分鐘都不能理解各個數據的含義。
          Web端設計語言庫——數據可視化
           
           
          3. 簡單
          可視化結果應該是一看就懂,不需要思考和過度理解,因而選定圖表時要理性,避免為了視覺上的效果而選擇一些對用戶不太友好的圖形。
          下面為圖標類型與認知成本對比:
          Web端設計語言庫——數據可視化
           
           
          4. 美觀
          優秀的數據可視化界面,會有一套非常嚴謹一致的版面。這里的一致性需要考慮到布局、結構和內容。
          Web端設計語言庫——數據可視化
           
           
          二、圖表解構
          1. 構成元素
          我們從標題、坐標軸、圖例、標簽、提示信息、數據圖形這 6 個大類,對數據圖表進行進一步元素拆解及闡述。設計過程中,需遵循可視化原則來精簡數據圖表,讓用戶快速獲取圖表中的關鍵信息,完成任務。
           
          圖表構成 6 大類,元素細分:
          1. 標題:圖表標題;
          2. 坐標軸:X/Y軸線、刻度線、網格線、X/Y軸標題、X/Y軸標簽;
          3. 標簽:數據點、引導線、(文本)數據值;
          4. 提示信息;
          5. 圖例;
          6. 數據圖形:線、矩形、扇形、環形等。
          下面為數據圖表的基本構成元素示例(為了便于觀察,某些字母做了大寫處理):
          Web端設計語言庫——數據可視化
           
           
          除了以上的常規元素,還有常用于餅圖、環形圖中的“引導線”:
          Web端設計語言庫——數據可視化
           
           
          2. 標題
          標題是概括圖表主題的說明文字,一個明確、精簡的標題可以迅速讓讀者理解圖表要表達的內容。
          2.1 位置
          一般位于數據圖表卡片的左上方。
          2.2 使用建議
          標題需言簡意賅、符合圖表主題;盡量控制在 20 個字以內,標題寬度盡量不要超過卡片寬度。
          Web端設計語言庫——數據可視化
           
           
          2.3超長處理
          當標題超過長出卡片寬度時,省略標題中間的文字,保住首尾,如“我是...標題”。
          Web端設計語言庫——數據可視化
           
           
           
          3. 坐標軸
          3.1 坐標系
          坐標軸包含在坐標系的概念里,因此,我們需要先了解坐標系。坐標系是能夠使每個數組在維度空間內找到映射關系的定位系統,更偏向數學/物理概念。
           
          數據可視化中,最常用的二維坐標系有兩種:
          笛卡爾坐標系:即直角坐標系,是由相互垂直的兩條軸線構成。常用于柱狀圖、條形圖、折線圖、面積圖等。
          極坐標系:由極點、極軸組成,坐標系內任何一個點都可以用極徑 r 和夾角 θ(逆時針為正)表示。常用于餅圖、圓環圖、雷達圖等。
          Web端設計語言庫——數據可視化
           
           
          補充說明:
          1. 坐標軸由定義域軸(X 軸)和值域軸(Y 軸)組成。條形圖中,定義域軸為 Y 軸,值域軸為 X 軸。
          2. X軸為水平方向的橫軸,Y 軸為垂直方向的豎軸。以下主要針對笛卡爾坐標系的坐標軸構成進行分析:
          3.2 坐標軸
          定義:坐標軸指二維空間中統計圖表中的軸,是坐標系的構成部分,它用來定義坐標系中數據在方向和值之間的映射關系。
          構成元素細分:X/Y 軸線、刻度線、網格線、X/Y 軸標題、X/Y 軸標簽。
          3.3 軸類型
          根據對應變量是連續數據還是離散數據,可以把坐標軸分為:分類軸、時間軸、連續軸三大類。
          Web端設計語言庫——數據可視化
           
           
          3.4 X/Y 軸線
          顏色層級:X/Y軸線要比網格線層級高、顏色深,這樣能讓圖表有主次區分。
          使用建議:有網格線時,柱狀圖/折線圖會隱藏 Y 軸線,條形圖則是隱藏 X 軸線,以達到信息降噪、突出重點的目的。
          Web端設計語言庫——數據可視化
           
           
          3.5 刻度線
          軸刻度線是軸線上的小線段, 用于指示數值標簽在坐標軸上的具體位置。軸刻度線有 3 種放置方式:置內、置中(即交叉方式)、置外。
          位置建議:刻度線置中/置內時,可能會和網格線、數據圖形重疊,所以建議將刻度線置于數值坐標軸外側,以呈現最佳顯示效果。
          Web端設計語言庫——數據可視化
           
           
          顯示建議:
          折線圖:刻度線、X/Y 軸標簽、數據點需要保持在同一垂直線上;
          柱狀圖/條形圖:由于單個柱子有很強的對應關系,此時可以隱藏刻度線;
          Web端設計語言庫——數據可視化
           
           
           
          3.6 網格線
          定義:網格線是用來輔助圖表優化映射關系的,我們需要弱化網格線的視覺效果,來增加數據的可閱讀性。
          作用:1. 延伸數值刻度至可視化對象中,以便觀察數據值的大小;2. 增加可視化對象之間的對比觀察度。
          使用建議 1 :使用網格線時,需遵從主次原則,以軸線為主、網格線為輔;樣式上可采用實線或虛線;避免顏色過重、使用純黑/純白色。
          Web端設計語言庫——數據可視化
           
           
          使用建議 2 :網格線一般跟隨值域軸的位置單向顯示,柱狀圖、折線圖等采用水平網格,條形圖采用垂直網格。
          Web端設計語言庫——數據可視化
           
           
          3.7 X/Y 軸標題
          軸標題主要用于說明坐標軸數據組的含義,也可理解為“軸單位”。當可視化圖表標題、圖例、軸標簽等已能充分表達數據含義時,可隱藏軸標題。
          這樣處理體現了奧卡姆剃刀定律:如無必要,勿增實體。
          Web端設計語言庫——數據可視化
           
           
          3.8 X/Y 軸標簽
          軸標簽是對當前某一組數據的內容標注,用于提高數據的可讀性。
          以下從 X 軸標簽、Y軸標簽兩方面進行分析:
          a.  X 軸標簽
          X 軸標簽的設計重點在顯示規則上??ㄆ瑢挾冗^窄、標簽過多、名稱過長時,X 軸標簽便會出現顯示問題(如標簽重疊等)。
          為了解決顯示問題,我們從連續/時間軸標簽(數值類)、分類軸標簽(文本類)兩方面進行分析:
           
          •  
            連續/時間軸標簽
          顯示規則:建議等分抽樣顯示、旋轉;不尾部省略。
          建議等分抽樣:連續/時間軸,通常由一組等差數列組成,具有規律性,缺失的數據用戶會在腦海中自動補全。所以建議用等分抽樣來避免標簽的重疊問題。
          注意:等分抽樣盡量保留首尾數據標簽;隨機抽樣沒有規律,會影響用戶的判斷及辨認,不建議采取隨機抽樣顯示。
          Web端設計語言庫——數據可視化
           
           
          連續/時間軸標簽是由“關鍵數值”組成的標注點,一般都明確精簡,尾部省略會影響用戶對關鍵數值的辨認。
          為了保證標簽的辨識度,我們可以將標簽旋轉 45°、 90° 。極端情況下(圖表寬度極窄),可以同時進行旋轉+抽樣。
          Web端設計語言庫——數據可視化
           
           
          •  
            分類軸標簽
          顯示規則:建議旋轉顯示;不建議抽樣顯示。
          分類軸由幾個離散數據標簽組成,標簽之間獨立存在,無緊密邏輯關系,用戶無法自動補全缺失信息。因此,不能采取抽樣顯示,應盡量展示全部標簽的全部文本。
          若標簽橫向展示空間不夠(文字重疊),我們可以將標簽旋轉 45°、 90° 來達到預期顯示效果。若通過旋轉無法滿足需求,可使用條形圖,將分類軸放在Y軸。
          Web端設計語言庫——數據可視化
           
           
          旋轉方向說明:通常情況下,用戶的閱讀視線為從左至右、從上到下。因此,標簽順時針旋轉 45° 更符合用戶的瀏覽習慣。
          Web端設計語言庫——數據可視化
           
           
          b. Y 軸標簽
          Y 軸標簽的設計重點在標簽數量、取值范圍和數據格式上。標簽顯示區域一般根據最長標簽寬度進行自適應縮放。
          •  
            軸標簽的數量
          使用建議:根據米勒定律(7±2 法則),Y 軸標簽數量應控制在 5-9 個的范圍內;Web頁面中,Y 軸常用標簽數為:6 或 7(含標簽0)。
          軸標簽的數量越多,橫向網格線就會越多。過多的軸標簽及網格線會造成元素冗余,違背了清晰、準確的可視化原則,也不利于圖表信息的表達及閱讀。
          對齊方式:右對齊
          Web端設計語言庫——數據可視化
           
           
          •  
            軸標簽的取值范圍
          基準線: Y 軸標簽取值應從 0 基線開始,以反映數據的真實性。如果展示被截斷的 Y 軸數據,會導致用戶做出錯誤的判斷。
          Web端設計語言庫——數據可視化
           
           
          •  
            軸標簽的數據格式
          使用建議 1: 標簽保留的小數位數保持統一。
          Web端設計語言庫——數據可視化
           
           
          4. 數據標簽
          數據標簽是對數據點對應數值的標注,用于直接觀察每個數據點的具體數值。
          若圖表主要是用來看趨勢變化、占比大小等,則不需要顯示數據標簽。若想精確了解每組數據的具體數值,則可以顯示數據標簽。
          Web端設計語言庫——數據可視化
           
           
          4.1 位置
          數據標簽位于數據點的上方。
          4.2 顯示規則
          在不同類型的圖表中,數據標簽的顯示規則不同。我們可以根據數據圖形、數據值的特性,選擇合適的顯示方式,提高圖表的準確性。
          a. 柱狀圖
          •  
            基礎柱狀圖
            :數據標簽可顯示在數據圖形內部、外部。
          數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;數據標簽超長時,旋轉 90°;圖形高度 < 數據標簽高度時,不顯示數據標簽。
          Web端設計語言庫——數據可視化
           
           
          •  
            分組柱狀圖
            :數據標簽可顯示在數據圖形內部、外部。顯示在內部的數據標簽顯示寬度不夠時,解決方案同上。
          Web端設計語言庫——數據可視化
           
           
          •  
            堆疊柱狀圖
            :數據標簽顯示在數據圖形內部。
          數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;數據標簽超長時,旋轉 90°;圖形高度 < 數據標簽高度時,不顯示數據標簽。
          Web端設計語言庫——數據可視化
           
           
          b. 條形圖
          數據標簽在圖形內部的顯示規則:正常情況下,橫向顯示;圖形寬度 < 數據標簽高度時,不顯示數據標簽;條形圖高度需 >= 數據標簽高度。
          Web端設計語言庫——數據可視化
           
           
          基礎、分組條形圖的數據標簽也可以顯示在圖形外部:
          Web端設計語言庫——數據可視化
           
           
          c. 折線圖
          數據標簽顯示在數據點的上方。
          圖表寬度過窄,數據點多且密時,相鄰的數據標簽會出現重疊的問題。此時,我們會采用抽樣的方式顯示數據標簽。鼠標懸停數據點,顯示隱藏的數據標簽。
          Web端設計語言庫——數據可視化
           
           
          d. 餅圖、環形圖
          數據標簽顯示在圖形內部、外部均可。
          由于扇形有角度,且形狀相對不規則,對數據標簽的文本長度包容度較低,環形更是如此。所以,當扇/環形分割過多、面積較小時,建議將數據標簽顯示在圖形外部。
          Web端設計語言庫——數據可視化
           
           
          當然,我們也可以內外部結合使用:
          Web端設計語言庫——數據可視化
           
           
          e. 數據標簽顏色
          數據標簽顯示在圖形內部時,圖形為背景,數據標簽為前景。此時,數據圖形作為背景色,會影響到數據標簽的顯色度及易讀性。
          為了確保良好的可讀性,我們通過對圖形顏色 HS 值的判斷,來決定文字的顏色。這樣對比度就在可控范圍內,不會出現可讀性低的問題。
          Web端設計語言庫——數據可視化
           
           
          由于篇幅問題,剩余內容接下一篇文章展示
           


          作者:布魯星人
          鏈接:https://www.zcool.com.cn/article/ZMTYzNzI0NA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

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

          WechatIMG27.jpg

          關鍵詞:UI咨詢UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司數據可視化設計公司用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計地理信息系統GIS UI界面設計航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發軟件vue開發

          從對話到嵌入:多元場景AI形態淺析

          ui設計分享達人

          前言
           
          當我們一次次被AI技術帶來的變革所驚艷,當ChatGPT一次次宣布其能力已經突破了人類的想象,你是否注意到現有產品與AI融合的新趨勢?值得注意的是,新技術的出現也一定帶來了新的交互體驗。本文將以多種產品場景為例,梳理PC端多種主流的AI融合形態,希望能給大家帶來啟發。
           
           
          多元場景下的主流AI形態
           
          目前主流AI產品有如下3種主要形態,分別為沉浸式的AI智能體(Agent)、伴隨式的AI副駕駛(Co-pilot)、嵌入式的AI場景化嵌入(Embedding)。這3種形態在能力、界面、操作體驗和適用場景都上存在顯著差異。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
           
          一、沉浸式形態
           
          AI智能體(Agent)—功能強大的AI伙伴
           
          一個富有主動性的獨立伙伴,輸出的結果不完全依賴用戶的輸入,啟動AI問詢后有2種主流的形態:
           
          ①「對話智能體」 以對話流的形式展示信息,用戶通過在當前語境下進行追問獲取最終結果;
           
          ②「目標智能體」用戶輸入指令后,一次性給予用戶“靠譜”的結果,配有側邊欄可進行多種輔助操作。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          1.對話智能體示例—Gemini
           
          以谷歌Gemini產品為例,其作為對話流的智能體,為滿足搜索場景,具有以下特征:
           
          1)冷啟頁Prompt形象化
           
          相較于2023年初Gemini冷啟時的樣式,最近改版中冷啟的Prompt卡片變得形象化,當然我們也在其他Agent產品中觀察到了這一變化。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          2)多模態內容
           
          理解用戶的文字意圖,依據要求自主生成多模態卡片是對話智能體的主要特征之一,該功能可以極大地豐富AI反饋的多樣性,并能提高信息傳達的效率。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          3)信息索引的顯示
           
          信息索引的展示是提升AI回答權威性和透明度的關鍵因素。然而,直接在閱讀內容中嵌入索引標簽,可能在某些情況下影響用戶的閱讀連貫性。以Gemini為例,當前的設計允許用戶在卡片下方手動啟用索引信息,這種靈活性平衡了信息的可信度和閱讀體驗,適合多數日常場景。
           
          當然,從設計角度考慮,某些情況下默認收起索引并非最佳選擇。在用戶高度依賴信息準確性的場景中,如金融或醫學領域,索引的可見性將會直接影響信任感。對于深入研究或延展閱讀需求較高的用戶,即時查看索引能更高效地獲取信息來源。
           
          與之類似,在涉及多方信息傳播的業務分發場景,清晰可見的索引有助于減少誤解,提高效率。在這些情況下,索引的默認展開不僅強化了內容的可靠性,也更好地支持了用戶的深入需求。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          2.目標智能體示例—Perplexity
           
          Perplexity作為最近廣受好評的AI搜索工具,相較于Gemini,它更注重給予用戶最精準的答案?;赗AG技術的Perplexity為用戶提供了一種新的“確定性”,而鑒于這種特征,Perplexity擁有雙面板的形態,可以對當前確定性的信息進行深化處理。
           
          1 )輸入即結果
           
          相較于Gemini等對話智能體產品,AI Agent用戶需要反復追問結果,而在體驗Perplexity時的無對話場景感,更傾向于一次性給予用戶“靠譜”的答案。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          2)側分欄—信息補充
           
          因為Perplexity一次就可以給予用戶最“準確”的信息,用戶可能沒有追問的必要,但可能會有對于當前問答進行深度搜索的需求,這時會有右側GUI分欄的出現,以便用戶進行輔助搜索。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          3.思考:給予用戶最佳答案的AI形態
           
          在使用體驗上,Gemini與Perplexity雖然走向兩個不同的流派,但目的都是為了給用戶呈現最佳的搜索結果。Gemini就像一位富有想象力的對話者,用戶在對話中通過不斷地追問來獲得最佳的結果,而Perplexity更像一個AI版的知乎,它堅持“用戶不會犯錯”原則,冷靜客觀地為用戶提供最精準的答案。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
           
          二、伴隨式形態
           
          AI副駕駛(Copilot)—被動性的AI助手
           
          這種形態下的AI更多扮演“副駕駛”的角色,為用戶提供建議和幫助,依賴用戶精準的指令對當前內容窗口進行操作,一般以側邊欄形式展示,目前的Office文檔類產品多采用此類形態。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          1.AI副駕駛產品示例-Office
           
          在近年的開發者大會中,微軟提到最多的詞就是“Copilot”,力推將AI技術快速融入到旗下應用中。其中,Office軟件就融入了AI副駕駛的理念,該形態下的AI主要為用戶提供產品的創作輔助、信息的查詢總結等功能。
           
          1)當前場景下的AI助手
           
          AI的能力默認被限定在當前場景下,滿足用戶問詢、信息檢索、創作輔助等操作。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          2)被動性AI助手
           
          Copilot無法自動執行操作去修改當前頁面內容,需要用戶確認后才可執行,用戶執行操作后會在側邊欄內顯示操作記錄與撤銷操作的入口。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          3)輔助Prompt
           
          由于AI副駕駛的特性,常常需要準確的Prompt才能執行符合預期的操作,這對大部分用戶來說門檻較高,因此在使用時需要及時給予用戶合理的聯想Prompt,輔助用戶決策。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          2.思考:提高用戶工作效率的AI助手
           
          作為被動性AI助手,用戶即使不使用也不會影響其在整體頁面中的操作,AI更多承擔的是提升用戶工作效率過程中的輔助角色。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
           
          三、嵌入式形態
           
          AI場景化嵌入(Embedding)
           
          嵌入式AI主要聚焦特定場景的AI輔助,如AI即時性地生成對當前評論的回復,此類交互無固定形態,AI會在用戶進行高頻重要操作時即時觸發。
           
          在多元化場景中,嵌入式AI的設計相較于前兩類更加靈活和輕量,通常以LGUI(輕量化用戶界面)為核心,強調用戶與AI之間的無縫銜接與高效互動。
           
          與對話式或結構化阿拉丁模式相比,嵌入式AI的設計思路更加通暢,摒棄了復雜的交互流程,更注重場景中的引導性和即時反饋,幫助用戶在合適的時機獲取所需信息。
           
          從對話到嵌入:多元場景AI形態淺析
           
           
           
          1.嵌入式AI示例—One Drive
           
          以微軟One Drive為例,嵌入式AI不僅會在用戶整理文件時提供智能建議,還能在用戶分享文件時根據歷史記錄和內容精準推薦分享對象。這種場景化的嵌入,展現了如何通過LGUI設計最大化提高效率,而非依賴傳統對話或復雜交互。
           
          場景一: 文件整理AI建議
           
          在AI為相關文件創建新文件夾的情境中,執行完成后,它會主動詢問用戶是否需要將其他可能相關的文件一并移入到新建的文件夾中,以幫助用戶進一步整理文件。AI能夠基于文件內容的上下文,敏銳地判斷出哪些文件可能屬于同一類別,進而為用戶提供便捷的一鍵整理服務。
           
          場景二: 智能分享建議
           
          當用戶準備在One Drive中分享文件時,AI助手會根據文件內容和用戶的歷史分享記錄,預測出最可能需要分享的對象名單,為用戶精準推薦受眾人員。智能分享建議可以極大地節省用戶挑選分享對象的時間。
           
          基于上述2個例子,我們可以對嵌入式AI有進一步的思考:
           
          合理的嵌入式AI操作只在用戶進行重要操作時被“激活”,能夠在當前場景下即時給予用戶建議;
           
          嵌入式AI一般情況下點擊大于錄入,方便用戶快速做出決定;
           
          設計此類交互時,需要深度理解用戶使用場景,AI的喚起不應干擾用戶對于主流程的操作體驗。
           
          2.思考:效率導向的AI嵌入設計
           
          對于普通設計師來說,容易在純對話交互和結構化設計兩端搖擺,可能忽視了效率也是設計的重要原則。嵌入式AI的設計啟示在于“什么合適用什么”,既不過度依賴復雜的對話式設計,也不拘泥于結構化方案。關鍵在于聚焦場景需求,以最簡便和有效的方式幫助用戶完成任務。因此,在嵌入式AI的設計中,保持界面的簡潔與流暢,同時結合輕量化的LGUI原則,才是提升用戶體驗的關鍵。最終目標始終是“效率”,無論采用何種形式,選擇最適合當前場景的交互模式才是設計的核心。
           
           
          未來的AI設計
           
          多樣化形態下的平衡與共生
           
          隨著AI技術的迅速發展,各種AI形態在不同場景中不斷涌現,如上述討論的沉浸式、伴隨式、嵌入式等設計形態。無論是主動性強的智能體、輔助型的副駕駛,還是輕量化的嵌入式方案,每一種設計都展現出其獨特的價值。
           
          然而,在這些多樣化的形態背后,我們仍需回歸一個核心問題:什么樣的AI設計才是理想的?
           
          •  
            首先,沒有一種AI形態能夠完美適用所有場景,真正成功的AI設計應始終圍繞需求展開。在效率為先的原則下,設計師需要深刻理解用戶在不同情境下的核心需求,并選擇最適合的交互形態。復雜的對話式和高度結構化的設計并非萬能,嵌入式AI的靈活性和輕量化設計則為平衡提供了啟發—服務于效率與體驗,簡化不必要的交互,專注于解決用戶的實際問題。
           
          •  
            其次,AI設計的多樣性并不意味著割裂,而是指向共生與融合。未來,AI技術將進一步打破不同形態之間的界限,形成更加靈活、動態的交互模式。這種融合不僅依賴更智能的技術,還要求設計師在實際應用中敏銳捕捉用戶需求,提供真正有價值的解決方案。
           
          •  
            最后,設計的核心原則是以用戶為中心,強調合適性,而非追求炫技。無論是大型智能體的復雜場景處理,還是嵌入式AI的場景化介入,優秀的設計應始終聚焦用戶需求,在不同場景中找到最優平衡點。隨著技術的進化,設計師需要更加專注于如何將AI技術自然、無縫地融入用戶的工作與生活,使每一次交互都變得更加高效和愉快。
           
          在未來,AI的形態將會更加多元,但不變的仍是設計師對效率、用戶價值和場景適配的持續探索。希望設計師在面對AI設計時,始終尋求既符合用戶需求又能提升效率的最佳方案。


          作者:百度MEUX
          鏈接:https://www.zcool.com.cn/article/ZMTYzMzkxNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          用戶體驗一致性思考

          ui設計分享達人

          前言
          在團隊內部,我們已確立了一套設計規范,在日常項目中使用設計規范輸出變的高效、統一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設計規范,這些促使我們不得不在保持設計一致性的基礎上進行靈活調整。因此,深入反思并優化一致性原則的應用策略顯得尤為重要。我們需要探索如何在堅守設計規范核心精神的同時,靈活應對多變的需求,確保設計既保持統一和諧,又能滿足特定場景下的獨特需求,從而實現用戶體驗與品牌價值的雙重提升。
           
          用戶體驗一致性思考
           
           
          用戶體驗一致性思考
           
           
          在UI/UX設計中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強調在界面和交互設計上需要遵循既定的規則,無論是在應用內部還是跨平臺之間。
          背后的心理學原理——重復定律,強調了信息重復對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復接觸。一致性的應用正是這一原理的生動實踐,通過不斷重復統一的設計元素與模式,強化用戶對產品的認知與記憶,從而提升整體的用戶滿意度與忠誠度。
          艾賓浩斯遺忘曲線
          艾賓浩斯遺忘曲線
           
          用戶體驗一致性思考
           
           
          用戶側
          1、用戶學習曲線:
          一致的UI/UX設計可以降低用戶的學習曲線。當用戶在應用程序或網站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準確預測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
          2、提升可用性:
          一致性使用戶界面更加易于使用。當用戶在不同的頁面或功能之間找到相似的設計元素和交互模式時,他們可以輕松地將已有的知識和經驗應用于新的情境中。這種一致性幫助用戶快速完成任務,減少錯誤和迷失,提供更好的導航和流暢的體驗。
          3、品牌認可度:
          一致的UI/UX設計有助于樹立品牌形象和增強品牌認可度。通過在不同的渠道和平臺上保持一致的設計元素、標識和視覺風格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
          4、用戶滿意度:
          一致性直接影響用戶的滿意度。當用戶在使用應用程序或網站時感受到一致的設計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業和質量的信號,讓用戶感到被關注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續使用和推薦你的產品或服務。
           
          用戶體驗一致性思考
           
           
          產研側
          1. 降低設計成本,提高開發效率
          無論是設計還是開發,復用已有的組件資源,保持界面的一致性可以有效地減少設計的投入,避免不必要的設計分歧點。
          而在開發階段,可以避免重復造輪子,提高開發的效率,保證落地效果,也可以減少上線前設計走查、測試的工作量。
          2. 形成一致的設計風格
          根據原子設計理論,通過原子組件的一致性,可以構建出統一的界面框架、布局,形成統一風格和用戶交互認知,從而更好地保證用戶體驗質量。
           
          用戶體驗一致性思考
           
           
          色彩
          色彩作為一種兼具物理屬性與感官享受的復雜現象,其本質在于光波在人體視網膜上的特定波長被反射或吸收后,所引發的視覺感知結果。在設計領域,色彩的選擇與運用不僅是視覺藝術的展現,更是品牌身份與個性的直接體現。諸如餓了么標志性的藍色、美團鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構成了品牌識別系統的重要組成部分,還通過其高度的一致性,在視覺層面上構建起強烈的品牌認知,營造出統一和諧的視覺體驗。
          色彩的一致性策略在品牌塑造中發揮著不可估量的作用,它能夠有效增強品牌的記憶度與辨識度,深化品牌形象在消費者心中的烙印,進而提升產品的市場吸引力和用戶忠誠度。同時,這種策略還促進了設計元素間的和諧共存,包括按鈕、圖標、字體、標簽、背景、以及關鍵視覺元素如Banner等,均能在統一的色彩體系下實現視覺上的連貫與流暢,極大地提升了產品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗。
           
          用戶體驗一致性思考
           
           
          字體
          字體作為設計中不可或缺的核心要素,其獨特性在于能夠精準地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細、字間距等多維度特征。這些特征共同構建了一種獨特的文字風格,不僅承載著信息的傳遞功能,更在無形中引導著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設計過程中,合理選擇與應用字體顯得尤為關鍵。
           
          字體類型的多樣性,如有襯線字體與無襯線字體的對比,不僅體現了風格上的差異,還隱含了不同的閱讀體驗與情感表達。字體的粗細變化(如細體、常規、粗體等)更是能夠強調文本的重要性層級,增強信息的層次感與可讀性。此外,字重的調整也是塑造視覺焦點、引導視線流動的有效手段,對于提升設計的整體美觀度和信息傳達效率具有不可小覷的作用。
           
          然而,在實際的開發與實現過程中,若不加節制地使用多種字體,不僅會顯著增加頁面的加載時間,影響用戶體驗的流暢性,還可能因風格不統一而導致頁面顯得雜亂無章,破壞整體設計的和諧感。因此,制定一套統一、規范的字體使用策略顯得尤為重要。這不僅有助于提升開發效率,減少后期更新迭代的復雜度,還能有效避免資源浪費,確保設計作品在視覺上的一致性與專業性。
           
          用戶體驗一致性思考
           
           
          圖標
           
          圖標作為用戶界面設計中至關重要的元素,風格直接影響到用戶的使用體驗與對產品的整體印象。圖標以其簡潔、直觀且富有表現力的特點,在快速傳達信息、引導用戶操作方面發揮著不可替代的作用。在設計中,圖標的設計與應用更是需要精心考量,以確保其既能夠準確傳達信息,又能夠與整體設計風格保持一致,從而營造出專業、和諧且易于使用的界面環境。
           
          設計中視覺上保持統一包括圖標的大小、形狀、色彩以及設計風格等多個方面,能夠增強用戶的認知連貫性,降低學習成本,提升使用效率。相反,如果圖標風格混雜,不僅會讓界面顯得雜亂無章,還會給用戶帶來困惑和不安,進而影響其對產品專業性和安全性的信任。
          用戶體驗一致性思考
           
           
          按鈕
          按鈕設計應統一于項目風格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關鍵。統一的按鈕樣式不僅彰顯專業性,還能增強用戶信任,確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應用環境。因此,精心設計的統一按鈕樣式對提升用戶體驗至關重要。
           
          排版
          設計中的排版一致性對于構建高效、用戶友好的界面至關重要。一致的排版不僅能夠讓用戶快速適應和理解界面的整體結構,大幅降低學習成本,還能在用戶心中激發強烈的歸屬感和安全感。這種熟悉感使得內容更加易讀,用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設計過程中,注重并維護排版的一致性,是提升用戶體驗和界面有效性的重要策略之一。
           
           
          用戶體驗一致性思考
           
           
           
          操作流程的一致性
          標準化流程
          :確保用戶在執行相似任務時,如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應并高效完成任務。
          邏輯清晰
          :操作流程的每一步都應符合用戶的認知習慣和行為邏輯,避免讓用戶感到困惑或不知所措。
          用戶體驗一致性思考
           
           
          交互元素的一致性
          按鈕和控件
          :確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應用或網站中保持一致。例如,所有按鈕都應具有相同的視覺風格和觸發機制。
          導航和菜單
          :導航欄和菜單的設計也應保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
           
          用戶體驗一致性思考
           
           
          反饋機制的一致性
          操作反饋
          :當用戶執行某個操作時,應用或網站應提供一致且及時的反饋,如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結果并采取相應的行動。
          狀態提示
          :對于長時間運行的操作或需要用戶等待的場景,應提供明確的狀態提示(如進度條),以減輕用戶的不確定感和焦慮感。
           
           
           
           
           
           
          在任何維度上,一致性不應成為設計的唯一導向。設計,這一融合了藝術與科學的復雜領域,要求我們在用戶體驗的細膩雕琢、功能需求的精準滿足、美學價值的深刻體現及技術可行性的嚴格考量間游走。
           
          “一致性”作為設計策略,其核心使命在于優化用戶路徑,降低認知門檻,確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當我們在與設計團隊(包括工程師、產品經理等)溝通時,僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
           
          同時,我們應清醒認識到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗或解決特定的設計問題,可能需要打破傳統的一致性規則。因此,設計師需要在保持一致性和創新之間找到平衡點,根據具體情況靈活調整設計方案。
           
          實際落地執行時,要根據產品定位、用戶場景,結合業務功能來確定設計方案,不能為了一致而一致。
          當我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準確合理的設計決策。
          用戶體驗一致性思考
           
           
          真實項目
          真實項目
           
          在SaaS產品設計中,特別是面向B/G端(企業用戶)時,滿足不同用戶角色(如普通用戶與高權限領導)的需求是至關重要的。
          管理端布局設計
          普通簡潔明了
          :為普通用戶設計的管理界面應簡潔直觀,聚焦于日常操作,如數據查看、統計和下載。
          功能分區
          :通過清晰的導航欄或側邊欄將功能區域劃分開,如“數據概覽”、“報表下載”、“任務管理”等,便于用戶快速定位所需功能。
          操作便捷
          :確保常用操作(如搜索、篩選、排序)易于觸達,減少用戶點擊次數和頁面跳轉。
           
          首頁版心定寬設計
          固定寬度
          :為首頁設定一個合適的固定寬度(如1200px、1440px等),以保證內容在大多數屏幕上都能保持一致的閱讀體驗。
          信息模塊化
          :將首頁內容劃分為多個卡片,每個卡片承載一個獨立的信息單元(如數據報表、通知公告、項目進展等)。
          視覺層次
          :通過顏色、大小、陰影等設計元素區分卡片的重要性,引導用戶視線,提高信息獲取效率。
          交互性
          :為卡片添加交互元素,如點擊展開、滑動查看更多等,增加用戶參與度和頁面活躍度。
           
          用戶體驗一致性思考
           
           
          位置差異性分析
          根據「認知負荷>視覺負荷>動作負荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
          相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側表單內容區域。所以按鈕應該緊隨搜索條件,便于用戶快速發現按鈕。
          區域用戶已經形成下意識操作習慣,雖然區別于規范,只能打破,遵循客戶需求
          用戶體驗一致性思考
           
           
          一致性是規則
          “一致性”作為規則或手段,服務于提升用戶體驗的原則。規則與原則一致時,促進業務共識與用戶價值;沖突時,原則優先。用戶體驗原則指導下的一致性,要超越表面控件統一,更在于產品決策與價值取向的一致。必要時,為更好的用戶體驗,可在規則上讓步以實現原則統一。打破規則需慎重權衡,確保用戶便利足以彌補理解成本,需長期全局考量。規則非僵化教條,而是引導我們謹慎創新的框架。
           
          一致性的底線
          無論從哪個角度,一致性存在的必要性都是毋庸置疑的。
          對于關鍵的設計元素,如專有名詞和顏色體系,保持一致性至關重要。這不僅有助于維護品牌形象,還能減少用戶的困惑。
          特定設計語言在特定場景下的變體應用,雖然可能帶來一定的視覺新鮮感或針對性優化,但往往需要謹慎評估其潛在風險。一旦變體打破了整體設計的一致性,可能會破壞用戶對品牌的熟悉感和信任感,甚至引發誤解。因此,在追求設計創新的同時,必須確保這種創新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗。
           
          擁抱復雜性
          一致性確實不應成為設計師的避風港或限制創新的枷鎖,而應是基于對業務深刻理解和多樣化設計能力之上的價值選擇。設計師的核心任務始終是滿足用戶的多樣化需求和偏好,這需要他們細致入微地觀察、理解并解決每個用戶的獨特問題。
           
          在追求一致性的同時,設計師應保持“第一性思考”的能力,即回歸問題的本質,從用戶需求出發進行創新設計。多樣性頁面的產出,不僅體現了設計師的創造力和靈活性,也是提升用戶體驗、增強產品吸引力的關鍵。
           
          一致性與創新設計并非相互排斥,而是相輔相成的關系。真正的一致性不應導致單調或拒絕創新,而應是在遵循品牌或產品核心價值的前提下,鼓勵設計師在細節和體驗上不斷探索和突破。當設計師感到被既定規則束縛時,應勇于質疑并重新評估當前的規范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發展的價值導向。
           
          因此,設計師應時刻保持開放的心態和敏銳的洞察力,不斷探索和嘗試新的設計方法和理念,以更加靈活和創新的方式實現一致性與用戶需求的完美融合。
           
          用戶體驗一致性思考
           
           
          重要的設計原則
          「一致性」作為設計領域中的一項基礎性原則,其重要性不言而喻。它不僅為設計過程提供了穩固的基石,還顯著促進了開發效率與產品體驗的全面升級。在設計實踐中,一致性確保了界面元素的統一性和連貫性,使得用戶能夠迅速熟悉并掌握產品的使用方式,降低了學習成本,增強了操作的直觀性和便捷性。
          靈活變通使用
          一致性原則并非一成不變的強制規定,而是需要根據產品的具體定位和市場環境進行靈活變通的應用。不同的產品可能面向不同的用戶群體,擁有獨特的品牌調性和功能需求,因此在追求一致性的同時,也需充分考慮這些因素,確保設計既符合品牌特色,又能滿足用戶的實際需求。
           
          提升用戶體驗是價值所在
          一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認知和習慣,設計師能夠創造出更加自然、流暢的操作流程,使用戶在享受產品功能的同時,也能感受到品牌所傳遞的舒適與和諧。因此,在追求設計一致性的過程中,我們始終應以人為本,將用戶的體驗和感受放在首位。建設有兼容性和長期價值的的一致性框架,在一致性中做到有用戶價值的設計,是設計師應該不斷探索的命題。
           
           


          作者:cheny米魚
          鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

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

          WechatIMG27.jpg

          關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計航天軍工軟件UI界面設計、醫療行業軟件UI界面設計教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發軟件wpf開發、軟件vue開發

           

          打動人心的直覺設計

          ui設計分享達人

          前言
          之所以對“直覺設計”產生興趣還要源于我們每次的設計評審,在跟其他設計師還有我們的業務方溝通時,大家常常會問到的且令人印象深刻的問題是:
           
          “用戶怎么知道點哪里?”、“這符合用戶直覺嗎?”
           
          類似的靈魂拷問涉及到用戶使用工具產品行為流程的每一步操作。作為設計師大家有時也會心生質疑,“這么明顯用戶注意不到嗎?這么簡單用戶不可能不會操作吧...”。
           
          但是隨著我們的”新手體驗官活動“的逐步進行,當親自站在用戶面前觀察用戶是如何操作和理解工具時,我們漸漸意識到小白用戶
           接觸-認知-使用工具
          的每一環都是至關重要的,即便是一個交互細節的設計都有可能帶來認知和操作層面受阻,從而勸退用戶。
           
          因此,我們想去了解什么樣的設計是符合用戶直覺的,是易用的,同時也想去了解主流3D建模軟件的核心建模邏輯(SU、Revit為代表)--于是開始了“直覺設計”的研究以及“建模課程”的學習。
          打動人心的直覺設計
           
           
           
          1、什么是直覺設計?
          首先來看什么是直覺設計,直覺設計是指用戶無需進行有意識的思考就可以立即理解并知道如何去使用產品。國外有不少的用戶研究機構也專門定義過直覺設計:
           
          “在特定任務的背景下,技術系統可以直觀地使用,而特定用戶能夠有效地交互,而不是有意識地使用先前的知識。”– 用戶界面的直觀使用 (IUUI) 研究小組。一個由跨學科研究人員組成的團隊,致力于探索如何定義直觀的使用和界面。
           
          為了方便大家更好的理解直覺設計,我們先來看幾個例子:
          打動人心的直覺設計
           
           
           
          案例1-玩具收納:小朋友在玩完玩具以后,把玩具擺的到處都是,如果發號施令告訴小朋友“去把玩具收拾起來”,小朋友通常不會去收拾。如果將收納設計成為一種小游戲,小朋友會自然而然的參與其中并且會覺得非常有趣。
          案例2-公共環境衛生:保持小便池的清潔,張貼告示語“注意保持清潔”大多是沒有用的。荷蘭的設計師在公共的男士小便池里設計了一個“蒼蠅”,利用人們的嫌惡心理會發現小便時會不由自主的對準中心的位置,從而減少尿液四濺,維護公共環境衛生。
          案例3-公共設施:設有傳感器和揚聲器的臺階,人們只要踩上去就能聽到音樂聲,從而達到鼓勵人們爬樓梯的目標。
          案例4-工業產品設計:很多耳熟能詳的工業產品中也運用了直覺設計,例如深澤直人的CD播放器,Apple的Vision OS系統等等。
          案例5-游戲設計:游戲中非常多的運用了直覺設計,比如超級馬里奧,塞爾達,想必大家都深有感受。
           
          通過上述案例我們發現其實直覺設計傳達出來是信息包含兩方面:用戶看到就能夠理解是什么,且能夠不由自主地產生行動。
          打動人心的直覺設計
           
           
           
          看到這里,大家可能會好奇為什么會產生這種”直覺設計“?接下來讓我們一起來看看直覺設計是如何產生的。
           
          2、直覺設計如何產生?
          人的直覺設計是怎么來的?是天生的嗎?帶著這樣的疑惑,我們閱讀了相關書籍和文章。
           
          先天視覺和經驗直覺
          先天直覺,也可以說是”本我“,是最原始的”心理現實“,在個體從外部世界獲得經驗之前就存在的內部世界,不需要經過學習或訓練。比如嬰兒時期的特征,希望立刻得到滿足、躲避痛苦、強大的求生意愿等。
           
          經驗直覺,巴普洛夫的實驗想必大家都知道。有機體能夠把已有的經驗遷移到新的學習環境中去,從而擴大學習范圍。
           
          先天直覺一般對應于人類的第一信號系統,是建立在人的直接感覺上的,通過人的感覺(視覺、聽覺、觸覺等)而進行的一種思維活動;經驗直覺(邏輯性直覺直覺)思維雖然利用了人類的感性認識(感覺、知覺、表象等)形式,但它絕不是僅僅停留在這一步上,而是超越了邏輯思維形式達到了更高一個層次上的思維。
           
          從表面上看,邏輯性直覺的結果是以直觀的形式表現出來的,實際上它已經在頭腦中進行了邏輯程序的高度壓縮,迅速地越過了“理性認識階段”,是簡縮了整個邏輯思維過程的一種思維形式。
          所以,邏輯性直覺既源于感性認識,又高于感性認識,是一種常常能在極短的時間內完成,并能夠對問題迅速作出回答的一種無意識的、躍進式的直覺形式。
           
          構建直覺,現有研究指出,分析加工和直覺加工兩者可能處于不斷的相互轉換之中。一方面,分析加工可以通過熟練化形成經驗圖式,從而減少認知資源的消耗,并由此轉化為直覺加工;另一方面,當直覺加工無法通過已有經驗解決新的問題情境時,又需要調動更多的認知資源并轉向分析加工,直到形成新的經驗圖式。
           
          先天直覺大家都容易理解,接下來我們重點看一下經驗直覺是如何產生的?
           
          經驗直覺的產生與人生存的環境密切相關,所以這里包含兩個關鍵點:物理世界(環境)和生活環境。
           
          來自物理環境的經驗
          物理環境主要包括我們生存的自然環境,以及我們與物理環境的互動所形成的感官運動。人類在嬰兒時期就開始體驗和實驗物理環境。這種體驗建立在我們第一次拿著一個物體、第一次把它扔到地板上、第一次學會爬到我們最喜歡的玩具等時學到的基本感覺運動技能上。我們對物理世界的體驗它已成為日常生活的一部分。經過物理環境互動所形成的直覺是跨越國界、且不會被遺忘的。
          來自文化環境的經驗
          通俗的講指社會文化環境。它包括人類通過其獲得的知識和技術開發的所有物質文化元素。例如,房屋、村莊、城鎮、公路和鐵路網絡、交通方式、工業單位、田野、醫院、體育場館、娛樂設施、市場、港口以及日常和特殊用途的物品。除此之外還包括價值觀念、道德信仰、語言、符號、審美觀念、風俗習慣等各種規范。
           
          例如播放圖標“?”是許多文化中的人們在年輕時學習符號的一個很好的例子。在任何可以使用媒體播放器的文化中,人們都知道 ? 圖標的含義。它的直觀性幾乎與物理世界中的對象行為一致。
           
          因此,在媒體播放器中,人們理所當然的希望可以延續“?”符號的含義。來自文化環境的知識也可以變得很直觀,但是由于沒有來自物理世界的持續提醒之后,很容易被遺忘。
           
          因此在提供直覺設計時,應盡量符合用戶從物理世界中獲得的經驗與技能。但如果我們的用戶群體是具有相同文化背景下的人群,符合文化環境的知識與經驗也可以作為直觀設計的決策依據。
          打動人心的直覺設計
           
           
           
          3、為什么要符合直覺設計?
          給用戶留下良好的第一印象,助力產品贏得并且留下用戶。
          當我們開始使用某款產品時,用戶往往在幾秒內就會產生第一印象并且往往會保持不變,少則幾分鐘多則十幾分鐘用戶就可感受到產品的價值。
           
          渥太華卡雷頓大學的Gitte·Lindgaard和她的研究小組發現:人類對事物的初始印象在50毫秒內就會形成。研究小組準備了一批要么極易入眼要么混亂不堪的網頁,讓一批志愿者在快速變換中投票。雖然這些網頁以50毫秒每張的速度一閃而過,但是研究發現他們的評價與長時間觀察后的結果基本無異。
           
          這就說明了用戶的第一印象非常明確且重要,幫助用戶判斷出這是否是一個設計合理的網站。如果用戶停留時間再長一點,那么用戶足以判斷出網站上的信息是否是滿足自己需要的信息,從而影響用戶是否繼續停留下來去使用該網站。
           
          更容易讓用戶達到心流狀態、沉浸式的使用產品,并且持續吸引用戶使用產品。
          符合用戶直覺的、熟悉的操作模式,作為用戶直觀使用的基礎,更容易產生積極的審美評價。相反,如果用戶的認知流暢性受阻,則不太會產生正面積極的評價。簡潔有力的設計會促使用戶再次使用產品,是保持產品吸引力的最佳方式。
           
          4、如何使設計符合用戶直覺?
          因為工作中涉及到3D建模軟件的設計,所以這部分將結合3D建模軟件來探討。
           
          如果您接觸過3D建模軟件,一定用過SU、Rhino吧,我們在使用后不久,就能清晰的感受到它們的核心邏輯,比如SU的推拉,Rhino的曲面建模等,進而能夠舉一反三的學會相關功能,使軟件的學習變得更簡單更直覺。那么怎樣的功能設計才能打造出軟件的核心邏輯,讓其在使用時更加符合用戶的直覺?
           
          為了得到以上問題的答案,我們進行了SU和Revit這兩款建筑領域主流軟件的使用,感受兩款軟件在直覺設計方面的表現,進而找到了一些設計原則指導我們在實際業務中應用。
           
          充分了解你的用戶
          每個人在自己生活的世界里,都會形成自己的一些認知,這個前面也已經介紹過。所以要充分了解用戶的知識、技能、經驗,盡可能減少用戶當前具備知識與完成目標所需具備的知識之間的Gap。當用戶已具備的知識和完成目標需要的知識之間的差距越小,越符合用戶的直覺,越容易實現目標。
          打動人心的直覺設計
           
           
          SU和Revit都是充分了解自己的用戶,基于用戶群體的知識、技能、經驗等特點,去打造自己軟件的核心邏輯,符合目標用戶群體的使用直覺。
          SU 
           ▽
          SU的Slogan 是“3D for Everyone“,人人可用。他的用戶群體非常廣泛,所以它是一個業務屬性較弱的工具,界面設計和操作使用上更簡單,普適性和靈活性更強。使用面作為基本單元建模,推拉面成體,推推拉拉就可以快速完成建模。對于小白來說很容易上手。
           
          Revit  
          Revit的用戶主要是專業的建筑師,場景聚焦在建筑相關領域,所以它是一個業務屬性較強的工具,將更多的業務場景包含在里面。比如標高、工作平面以及模塊化的構件等,這樣的設定對于建筑背景的用戶來說,可以更符合他們的已有認知。
           
          將從物理世界和文化環
          前面反復提到過過,用戶總是利用她在物理和文化環境中的經驗來了解她通過界面可以采取哪些行動。因此我們需要熟知用戶已有的這些經驗,并考慮到設計中。
           
          通過聯想或類比,將物理世界的經驗運用到數字產品設計中,使得全新的事物變得熟悉。
           
          SU 
           ▽
          SU的圖標非常直觀好懂,比如畫筆、橡皮擦、油漆桶、量尺、放大鏡、材質刷、垃圾桶等等,圖標的語意和其在物理世界的功能是相符的,哪怕是第一次接觸建模軟件的人,只看圖標也能大概猜出對應的功能。
          打動人心的直覺設計
           
           
           
          Revit  
          Revit將物理世界中房子映射到設計中。比如像墻、門、窗、柱、屋頂等,這是作為一個房子基本組成結構,對于建筑師來言,非常熟悉。所以在軟件設計中,功能也是基于這種具象的構件分類的,在用戶使用之前,內心已經有了房子的認知,從而也能在產品中找到對應的功能,理解成本很低。
           
          打動人心的直覺設計
           
           
          結合用戶在已有的文化環境中獲得的認知與經驗:比如在類似產品中或你的產品所教給他的一些知識、經驗,并保持這些經驗的一致性。
           
          SU 
           ▽
          很好的匹配用戶已經存在的認知。提及SU就會想到它的推拉交互,推拉面成體。一方面它底層的點線面邏輯是我們學習數學或繪畫最基礎的知識,幾乎人人都知道;另一方面推拉的操作也是和我們已有的推敲形體的過程體驗是一致的,我們在繪制草圖時,會在紙上勾勾畫畫,涂涂抹抹,這跟在SU上推推拉拉有異曲同工之妙,我們使在用它時能夠享受手繪一般的樂趣,很難忘記這個操作。
          打動人心的直覺設計
           
           
          Revit  
          同為Autodesk公司產品,Revit的用戶與Autocad有著大量的重疊,因此在交互上也延用了不少CAD的固有邏輯,將用戶在CAD獲得的認知與經驗沿用在這里。與AutoCAD一樣 ,Revit快捷鍵
          是該命令英文單詞的第1個或前面2個字母,這使得用戶無需再學習。
           
          以及為了讓用戶切換軟件成本最小,Revit中還支持一個指令可以設置多個快捷鍵,這樣可以兼容喜歡自定義快捷鍵的高階用戶的習慣。例如在AutoCAD里習慣用Ctrl+1 呼出屬性面板,而如果按 Revit 快捷鍵的邏輯則應該是"屬性"英文取用 PP,對于已熟悉AutoCAD操作的用戶來說,這么高頻的指令改變會造成極大的不適應,默認兼容多個快捷鍵就是非常優雅的解法。
          打動人心的直覺設計
           
           
          用戶認知和行為要足夠簡單
          關于1+1=?,大家看到后會自然而然的想到答案;28×4=?,稍加思索也能給出答案;那么3927÷23=?,看到這個問題,可能幾乎沒有人想要解開了。有些問題無意識的解開了,有些問題看到就想放棄解答。由此可見改變人們行為方式的通常是能否足夠簡單和容易,當眼前的問題復雜時,人們不會試圖解決它。
           
          SU 
           ▽
          吸附非常的自然。當我想移動到某個位置的時候,很自然將鼠標靠近目標對象,就會幫我精準的吸附到對應的位置
           
          打動人心的直覺設計
           
           
          補面非常簡單。當形體發生破面的時候,自然的想要繪制線去補全,當我沿著要補全的路徑繪制兩個點的時候,整個面被補好了。
          打動人心的直覺設計
           
           
           
          5、實戰:應用最佳設計原則
          將我們在建模軟件中學習到的有助于直覺設計的內容進行總結,得出幾條原則,并將這些設計原則應用到實踐當中,指導我們進行設計。
           
          心理學中也提到,人的大腦處理不同的信息時所消耗的腦力資源是不同的,他們的排序是認知>視覺>行動。用戶花費的腦力資源要多于點擊按鈕或移動鼠標時(動作負荷)。所以我們在設計的時候,首先要從認知上降低用戶的認知負擔,其次在行為上確保操作絲滑順暢。
           
          認知上,降低認知負擔
          提升信息的識別性。
          比如位置、信息分組的邏輯、顏色、比例等的使用等。作為別墅設計軟件,在進行功能分類時,要以用戶使用的流程、場景,識別的效率等為依據進行合理分組。
          打動人心的直覺設計
           
           
          提高和用戶已有認知的匹配。
          作為別墅設計軟件,設計要與用戶已有的對別墅對房子的認知相匹配。比如檐口線、浮雕、墻裙等構件,人們在現實中的房子中都會見到,只是不熟知這些叫法。因此我們采用建造一個真實小房子的做法,當用戶點擊某個構件,對應的構件就會在房子上高亮,用戶瞬間就會明白,哦原來是它,跟已有的認知匹配上了,會有一種恍然大悟的感覺。同時也讓用戶大概知道這個構件位于房子的哪個位置,對后續的操作有預期,知道要擺在哪個位置。
          打動人心的直覺設計
           
           
           
          保持醫學認知的一致性。
          任何產品都很難做到匹配用戶已有的所有認知,總會有一些內容是需要重新學習獲得的,那么就要保證我們教給他的這些認知邏輯始終一致,讓用戶能做到舉一反三。作為別墅設計軟件,用戶要完成一個完整房子的建造,需要用到20+的構件模塊,我們希望用戶學會使用一個構件之后,就不需要再學習,能觸類旁通的使用同類構件。因此歸納出通用操作流程,找到相對統一的方式,串聯起我們用戶的心智。
          打動人心的直覺設計
           
           
          行為上,讓操作絲滑順暢
          提供場景化的行為設計,并將操作聚焦在手邊。
          在我們的別墅設計軟件中,當用戶要修改老虎窗和飄窗的時候,如果看到這個窗戶的樣式不是自己想要的,可能會想去繪制。按照我們現有的流程,用戶要先去左側面板找到自由繪窗入口,然后再選擇要在哪個面上繪制,操作流程是有點繞的。后面我們就想,用戶要修改這個窗子的時候,直覺上會去點擊它,那么在選中這個對象的時候,在手邊提供自由繪窗的入口,讓他能夠快速的綁定這個對象去繪制窗戶,操作上順暢了很多。
          打動人心的直覺設計
           
           
          一次只聚焦做一件事情,減少其他干擾。
          我們現在的大部分操作,都是是激活命令后,左側面板還在。觀察到很多新用戶在激活了功能后,不知道下一步需要干什么。因為界面上需要他關注的事情太多了。所以,我們嘗試用戶在激活功能后,將當前步驟中不需要他關注的面板隱藏,聚焦到他當前需要做的事情上面去。
          打動人心的直覺設計
           
           
          操作要足夠簡單,簡單到不需要有太多思考,是一個自然而然的行為。
           
          以下介紹的是我們的照片還原功能,對于外墻漆、門窗等用戶,他們可以現場拍好房子照片,導入后基于照片還原出別墅方案,再進行后續的外立面和門窗設計。最初,我們需要用戶手動擺放兩組消逝線去確定透視角度、然后調整比例尺、在尺子上選取點劃分樓層、拖拽點調整邊界、通過輸入開間數量確定開間。整個過程比較復雜,也涉及很多專業的概念,用戶不知道該如何操作。
           
          后面優化后,我們結合算法識別出照片中的房子,默認給一個box,用戶通過拖動box上的角點和邊線去調整整個形體。因為用戶對box的概念是熟悉的,拖拽box去擬合背后的照片就變得容易的多。樓層和開間的劃分也采用這種切豆腐塊的方式,用戶一下一下去切就好。不用再去輸入數字,想象會是什么樣子。而比例尺只需要用戶輸入他想要的1樓的高度即可確定。優化后,生成方案的轉化率提升了將近20%。
           
          打動人心的直覺設計
           
           
          6、小結
          直覺設計需要用戶看到產品時產生一種熟悉感,但是這種熟悉感判斷起來并不簡單,其中一部分人熟悉并不代表所有人都熟悉。所以設計師需要充分了解他們的用戶,了解產品的市場,并充分獲取用戶熟悉內容的信息才有助于作出符合直覺設計的決策。
           
          做出符合直覺的設計是困難的,需要充分考慮用戶在物理世界和文化環境中獲得的知識和經驗,并將其應用到具體的設計實踐中,也就是用戶的心智模型和產品概念模型達到基本吻合甚至去塑造與產品概念模型一致的用戶心智模型。
           
          蘋果公司創始人兼前首席執行官史蒂夫·喬布斯解釋說:“我們設計中最重要的是,必須讓事情直觀明顯。
           
          打動人心的直覺設計
           
           
          建議每一位設計師同學也多去感受和認識自己的知道,尤其是首次打開某個網站時,要更加關注自己的視覺動線和心理感受、無意識產生的操作行為等。同時也不要讓競品變成你的直覺,始終去思索有沒有體驗更加友好、創新的交互方式。
           
          當然,連續的直覺操作也可能會讓用戶覺得疲倦,可以適時考慮引入驚喜設計,為用戶打造Amazing的感受。
          •  
            去認識和感受自己的直覺
          •  
            不要讓競品的設計變成你的直覺
          •  
            連續的直覺設計也可能也可能會給用戶帶來疲勞和厭倦,需要考慮在適當的時候給用戶進喜設計。
           
          本文在以下書籍和文章中予以引用,同時也推薦大家閱讀,想必大家對直覺設計會有更加深刻的認知和理解。
           
          注意:文中數據皆為演示數據,非業務真實數據
          參考書籍:
          •  
            《創意選擇》
          •  
            《福格行為模型》
          •  
            《一目了然-Web軟件顯性設計之路》
          •  
            《峰值體驗-影響用戶決策的關鍵時刻》
          •  
            《任天堂的體驗設計-創造不知不覺打動人心的體驗》
          •  
            《玄機設計學:改變人們行為的創意構思法》
          參考文章:
          •  
            Intuitive UX design an approach beyond usability
          •  
            https://uxdesign.cc/the-power-of-intuition-designing-beyond-usability-2899cb37f98a
          •  
            https://www.interaction-design.org/literature/topics/intuitive-design
          •  
            Intuitive Web Design: How to Make Your Website Intuitive to Use
           
          作者:藍胖、瑤一
           


          作者:群核科技MCUX
          鏈接:https://www.zcool.com.cn/article/ZMTYyNTkwMA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
           

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

          WechatIMG27.jpg

          關鍵詞:UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計醫療行業軟件UI界面設計、教育行業軟件UI界面設計企業信息化UI界面設計、軟件qt開發、軟件wpf開發軟件vue開發

           

          日歷

          鏈接

          個人資料

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

          存檔

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