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

          首頁

          響應式布局|打造跨平臺無縫體驗的設計利器

          天宇 交互設計及用戶體驗

          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          一、介紹
          1.1 發展歷程
          響應式布局起源于20世紀的建筑設計領域,最初用于描述建筑物根據環境變化自動調整的能力。隨著互聯網技術的發展,這一概念被引入到網頁設計中,以解決傳統固定布局在多樣化設備上的局限性。自2010年以來,隨著智能手機和平板電腦的普及,響應式布局逐漸成為網頁設計的標準實踐。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          •  
            固定布局:內容在不同屏幕上的尺寸和布局保持不變。這種設計適用于桌面電腦,但在移動設備上顯示效果不佳
          •  
            流式布局:將元素的寬度設置為百分比而不是固定像素值。這樣可以使網頁內容在不同屏幕尺寸下自動調整大小,但仍存在布局失控和內容擠壓的問題。
          •  
            媒體查詢:CSS3引入了媒體查詢功能,允許開發人員根據設備的特性(如屏幕寬度、分辨率等)應用不同的CSS樣式。這種技術使得網頁可以根據設備的不同特性應用不同的布局和樣式,為響應式設計奠定了基礎
          •  
            響應式設計:綜合利用了流式布局和媒體查詢技術,使網頁能夠根據設備的尺寸和特性動態調整布局和樣式,以適應各種屏幕大小和設備類型。這種方法提供了更一致、更靈活的用戶體驗,成為現代Web設計的主流趨勢
          •  
            移動優先設計:隨著移動設備用戶數量的增加,設計師開始采用移動優先的設計理念,即首先為移動設備設計網頁布局和樣式,然后再逐步增強適應桌面設備。這種方法有助于確保網頁在小屏幕上的可用性和性能
          1.2 基本概念
          1.2.1 基于網格布局
          響應式 UI 基于網格布局。該網格可以確保不同布局之間的視覺一致性,同時可以靈活的適配多種寬度的設計。網格列的數量取決于斷點系統。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          1.2.2 斷點(根據寬度切換布局方式)
          斷點是響應式設計中的關鍵概念,它指的是屏幕寬度達到某個預設值時,布局會發生明顯變化的點。通過設置斷點,設計師可以為不同的屏幕尺寸定制不同的布局方案。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          1.2.3 主要應用于橫向空間,同時適配PC + 平板 + 手機
          傳統頁面布局策略通常遵循這樣一種原則:即內容的多少決定了頁面的滾動長度。而頁面的水平寬度則往往被設定為一個固定值,以確保在不同設備和瀏覽器上展示時的一致性和穩定性。然而,隨著移動設備的多樣化和用戶瀏覽習慣的變化,固定的頁面寬度已無法滿足所有場景的需求。在這種情況下,響應式布局應運而生,其核心思想是使頁面的寬度能夠根據不同設備的屏幕尺寸動態調整。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          二、實現方式
          2.1 媒體查詢
          媒體查詢是CSS3的一個特性,允許根據不同的設備特性(如屏幕寬度、分辨率等)應用不同的樣式規則。通過媒體查詢,設計師可以為不同的設備和視口尺寸定制不同的布局和樣式。
          優點
          •  
            靈活性高,可以針對不同的設備特性(如屏幕寬度、分辨率、設備方向等)應用不同的樣式規則
          •  
            允許創建復雜的響應式邏輯,如在橫屏模式下調整布局或針對特定設備優化樣式
          缺點
          •  
            可能導致CSS代碼變得復雜和難以維護,特別是當有大量不同的設備和條件需要處理時
          •  
            需要對各種設備和屏幕尺寸有深入的了解,以確保兼容性和一致性
          使用場景
          •  
            當需要為不同的設備或視口條件定制不同的布局和樣式時
          •  
            當設計需要考慮多種設備特性,如屏幕方向變化或高分辨率顯示時
           
          2.2 百分比
          百分比寬度可以使元素的尺寸相對于其父容器進行縮放,從而實現響應式布局。百分比布局讓元素能夠根據父容器的大小變化而自動調整寬度,保持布局的靈活性。
          優點
          •  
            使得元素的大小能夠相對于其父容器進行縮放,從而實現響應式效果
          •  
            簡單易用,對于基礎的響應式布局非常有效
          缺點
          •  
            百分比布局可能在某些情況下不夠精確,特別是在需要固定元素位置或大小時
          •  
            可能需要結合其他技術(如視口單位)來實現更精細的控制
          •  
            每個屬性都使用百分比,會造成布局的復雜度較高
          使用場景
          •  
            當需要元素大小根據父容器的大小變化而變化時,如流體網格布局
          •  
            對于簡單的響應式調整,如改變容器的填充或邊距
           
          2.3 視口單位(vw/vh 和 vmin/vmax)
          vw(視窗寬度單位)和vh(視窗高度單位)是基于視口大小的相對單位。使用這些單位,元素的尺寸可以與用戶的視口大小同步變化,實現真正的響應式設計。
          優點
          •  
            基于視口的單位提供了一種與設備視口大小直接相關的方法來設置元素的尺寸
          •  
            可以創建與視口大小成比例的布局,確保在不同設備上的視覺一致性
          缺點
          •  
            對于需要非常精確控制元素尺寸的情況,視口單位可能不夠靈活
          •  
            在某些復雜的布局中,過度依賴視口單位可能導致計算復雜和難以調試
          使用場景
          •  
            當設計需要元素大小與視口大小成比例時,如全屏背景圖像或響應式圖片
          •  
            在需要考慮不同屏幕尺寸和分辨率的布局設計中
           
          2.4 rem
          rem(root em)單位是基于根元素(html元素)的字體大小的相對單位。通過設置根元素的字體大小,可以統一控制頁面上所有使用rem單位的元素的尺寸,實現更好的響應性和可維護性。
          優點
          •  
            rem單位基于根元素的字體大小,提供了一種一致性更強的方法來縮放元素
          •  
            有助于保持設計的一致性和可訪問性,因為所有尺寸都與根字體大小相關聯
          缺點
          •  
            對于沒有深入了解CSS的設計師或開發者來說,rem的計算可能有些復雜
          •  
            在某些情況下,rem可能導致布局的縮放不如預期,特別是在與百分比或其他單位混合使用時
          使用場景
          •  
            當需要整個頁面的尺寸和布局與根字體大小保持一致時
          •  
            在創建可伸縮的排版和需要保持一致性的設計中
           
          三、布局的幾種類型
          3.1 基礎布局
          3.1.1 固定
          對于固定寬度的元素,確保它們在所有設備上都保持一致的尺寸,適用于那些不需要隨屏幕尺寸變化的元素
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.1.2 流式
          流式寬度的元素可以根據父容器的尺寸變化而動態調整寬度,適用于需要隨屏幕尺寸變化的元素。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.1.3 吸附(adhesion)
          元素寬度是固定的,直到受到其他元素或斷點的影響。參考產品:花瓣發現頁
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.1.4 擠壓
          元素的寬度隨著面板的出現而收縮
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.1.5 推出
          推出寬度的元素在特定條件下會擴展到父容器之外,以顯示額外的內容或功能。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.1.6 遮蓋
          遮蓋寬度的元素會根據內容的需要動態調整寬度,如果內容超出父容器,將會遮蓋相鄰元素
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.2 混合布局
          3.2.1 固定+流式
          這種布局方式結合了占滿和固定兩種布局方式的特點。元素的寬度可以動態調整以占滿屏幕空間,而高度則保持固定不變。這種布局方式適用于那些需要充分利用屏幕寬度,但高度固定不變的場景。參考產品:UI中國、知乎等
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          3.2.2 流式+吸附(典型的響應式布局)
          等比+斷點布局是指在不同屏幕尺寸下,元素的寬度和高度按照等比縮放,但在某些特定的屏幕尺寸下會觸發斷點,使得元素的布局方式發生改變。這種布局方式可以在不同屏幕尺寸下實現更加靈活和適應性更強的布局。參考產品:站酷首頁。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          四、設計流程
          4.1 確定常見的屏幕尺寸范圍
          通過對目標用戶群體的設備使用情況進行研究,確定常見的屏幕尺寸范圍,如小屏幕手機、中等屏幕平板和大屏幕桌面顯示器。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.2 確定適配規則
          4.2.1 間距寬度不變,縮放內容區域
          為每個布局區間制定具體的布局策略,包括元素的排列方式、大小和位置。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.2.2 內容區域寬度不變,縮放兩側留白區域
          為每個布局區間制定具體的布局策略,包括元素的排列方式、大小和位置。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.2.3 混合縮放,內容區域與兩側留白區域同時變化
          為每個布局區間制定具體的布局策略,包括元素的排列方式、大小和位置。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.3 分解固定元素
          4.3.1 區分固定元素與變化元素
          確定頁面中的哪些元素應該在不同屏幕尺寸下保持不變,哪些元素應該隨屏幕尺寸變化而變化。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.3.2 確定頁面中固定元素的尺寸
          對于頁面中的固定元素,如Logo、導航欄等,為這些元素設定在不同屏幕尺寸下的尺寸和位置,確保其在任何設備上都具有良好的可見性和功能性。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.4 確定卡片(模塊)的布局變化規則
          4.4.1 卡片位置變化
          根據屏幕尺寸的變化,調整卡片的位置,使其在不同屏幕上都能合理布局。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.4.2 卡片布局變化
          改變卡片的排列方式,如從水平排列變為垂直排列,以適應不同屏幕尺寸的布局需求。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.4.3 卡片數量變化
          根據屏幕尺寸調整卡片的數量,例如在較小屏幕上減少卡片數量以簡化內容,提高用戶體驗。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.5  文本拉伸規則
          4.5.1 溢出省略
          對于過長的文本內容,采用溢出省略的方式顯示部分內容,并用省略號表示剩余內容,確保頁面布局不被破壞。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.5.2 文本換行
          根據屏幕尺寸調整文本的換行規則,使文本在不同屏幕尺寸下都能合理顯示,避免布局被破壞。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.6 圖片拉伸規則
          4.6.1 居中裁剪
          在保持圖片比例的同時,對圖片進行裁剪以適應不同屏幕尺寸,確保圖片內容的重點區域始終可見。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          4.6.2 等比縮放
          根據屏幕尺寸調整圖片的大小,確保圖片在不同屏幕尺寸下都能保持原始比例,避免變形或失真。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          五、可見性適配行為
          5.1 固定的
          對于固定可見的元素,確保它們在所有設備上都保持可見,以提供穩定的用戶體驗。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          5.2 可切換的
          對于可切換的元素,根據屏幕尺寸和用戶需求在顯示和隱藏之間進行切換,以優化空間利用和用戶體驗。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          5.3 臨時的
          臨時可見的元素在特定條件下才會顯示,如當用戶與頁面交互時,可以臨時顯示額外的信息或操作選項。
          響應式布局|打造跨平臺無縫體驗的設計利器
           
           
          收藏
          六、響應式模式
          6.1 出現
          出現模式指的是元素在用戶滾動或觸發某些動作時動態進入或退出視圖的過程。
          6.2 變形
          變形模式描述元素如何根據用戶交互或屏幕尺寸變化而改變形狀、大小或布局。
          6.3 分割
          分割模式涉及將內容分割成多個部分,以適應不同的屏幕尺寸和布局需求。
          6.4 重排
          重排模式指的是元素在不同屏幕尺寸下重新排列,以優化空間利用和用戶體驗。
          6.5 擴展
          指的是元素或組件能夠根據內容的多少或者用戶的交互動作而增加額外的空間或者附加信息。這種模式常見于折疊面板、下拉菜單、模態窗口等交互元素。擴展模式的關鍵在于它提供了一種優雅的方式來處理額外的內容,而不是在所有時間里都將其展示出來,這樣可以保持界面的整潔和減少不必要的干擾。
          6.6 位移
          涉及到元素在頁面上的位置變化,以響應用戶的交互或其他條件。這通常是為了重新組織頁面布局,以便為新的內容騰出空間或者將用戶的注意力引向特定的區域。位移可以是平滑的動畫效果,也可以是簡單的位置變動。需要謹慎使用,以確保用戶不會被突然的布局變化所困擾。
           
          七、結語
          在進行產品設計時,我們經常會碰到包含多種元素的復雜設計單元,比如圖文結合的布局,或者是更加多元的卡片、文本和圖像的組合。面對這種復雜性,首要任務是將這些單元分解,審視并理解每個單獨元素的適配需求。然后,我們需要綜合考慮這些元素在尺寸、形態、數量以及排列上的變化,融合這些變化來制定一套綜合的適配計劃。這樣的過程旨在保證不論是在何種設備或屏幕尺寸上,這些設計單元都能維持其原有的功能和視覺效果,進而為用戶提供優質的體驗。
          雖然開發團隊可能依賴于他們的經驗或遵循既定的設計標準來執行適配任務,并不總是需要設計師提供詳盡的適配指導,但設計師對適配原則的理解和掌握對于打造適用于所有用戶設備的連貫體驗至關重要。這種專業知識不僅能夠提高設計工作的效率和產出的質量,還能促進與開發團隊的有效合作,共同推動產品的成功開發。


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

          鼠標指針的秘密:提升PC端交互的小技巧

          天宇 交互設計及用戶體驗

          一、鼠標指針概述
          1.1 鼠標指針的起源
          鼠標指針最早出現在20世紀60年代的早期圖形用戶界面系統中,如Douglas Engelbart在斯坦福研究所開發的oN-Line系統。隨著操作系統的發展,鼠標指針的樣式也變得更加多樣化,以適應不同的操作和反饋需求。
           
          1.2 鼠標指針的定義
          光標是一種視覺提示,它不僅向用戶顯示鼠標的位置,還向用戶顯示如何與特定元素進行交互,包括選擇文本、單擊、拖動或滾動等。了解哪些光標指示哪些類型的交互并適當地使用它們,可以使界面對用戶更直觀。
           
          1.3 在用戶體驗中的作用
          光標作為用戶與計算機系統之間交互的主要視覺工具。在用戶體驗中起到一些關鍵作用,例如:直觀的控制、視覺焦點、操作反饋、精確選擇、交互提示、增強可訪問性、減少錯誤等。
           
          二、鼠標指針的基本功能
          2.1 指向與選擇
          •  
            鼠標指針最基本的功能之一是指向。用戶可以通過移動鼠標來控制指針在屏幕上的位置,指向不同的界面元素,如按鈕、鏈接、文本或圖像。
          •  
            選擇功能通常與指向結合使用。當用戶將指針放在某個元素上并按下鼠標按鈕時,就可以選擇該元素。例如,在文本編輯器中,用戶可以通過指向并點擊來選擇文本;
          •  
            在網頁上,指向并點擊鏈接可以打開新的頁面。
           
          2.2 點擊與激活
          •  
            點擊是用戶與界面元素交互的常見動作。用戶將鼠標指針移動到按鈕或其他可激活的元素上,然后按下并釋放鼠標按鈕來執行點擊操作。
          •  
            激活功能指的是通過點擊來觸發元素的事件或動作。例如,點擊一個按鈕可能會提交一個表單,點擊一個菜單項可能會打開一個新窗口或執行特定的命令。
           
          2.3 拖動與移動
          •  
            拖動功能允許用戶通過按住鼠標按鈕并移動鼠標來拖拽界面元素,如窗口、圖標或選定的文本。
          •  
            移動功能是指通過拖動操作來重新定位元素。用戶可以在桌面上移動窗口到不同的位置,或在文檔中拖動文本或圖像來改變它們的位置。
          •  
            拖放操作是拖動的擴展,用戶可以將一個元素拖到另一個元素或區域來執行特定的功能,如將文件拖到文件夾圖標中進行移動或復制。
           
          三:鼠標指針的多樣性
          3.1 箭頭光標
          介紹:箭頭光標通常表現為一個箭頭形狀,指向屏幕的某個方向(通常是右上方),它允許用戶通過鼠標或觸摸板與屏幕上的元素進行交互。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            選擇:
            箭頭光標允許用戶點擊按鈕、選擇菜單項或激活鏈接。
          •  
            指向:
            它提供了指向屏幕上特定元素的功能,幫助用戶直觀地識別可交互區域。
          •  
            導航:
            在瀏覽網頁或應用程序時,箭頭光標幫助用戶在界面中導航。
          交互行為
          •  
            懸停:
            將箭頭光標懸停在某個元素上可能會顯示額外的信息,如工具提示或菜單;也可能會觸發視覺變化,如顏色或大小改變
          •  
            點擊:
            用戶可以通過將箭頭光標定位到目標上并點擊鼠標左鍵來執行點擊操作。
           
          3.2 指針光標
          介紹:指針光標是屏幕上的一個可見符號,通常隨鼠標移動而變化位置,允許用戶與計算機進行交互。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            選擇:
            通過點擊操作選擇界面元素。
          •  
            指向:
            指示屏幕上的特定位置。
          •  
            激活:
            點擊按鈕或鏈接以觸發事件。
          •  
            拖動:
            拖動窗口或對象到新位置。
          交互行為
          •  
            懸停:
            將光標停留在某個元素上以查看狀態變化或提示信息。
          •  
            點擊:
            按下并釋放鼠標按鈕以選擇或激活元素。
          •  
            雙擊:
            快速連續點擊兩次以執行默認命令,如打開文件或文件夾。
           
          3.3 文本光標
          介紹:文本光標是一個通常出現在文本字段中的垂直線條或豎條,指示用戶可以在此位置插入文本。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            文本輸入:
            允許用戶在文本字段中輸入字符。
          •  
            文本編輯:
            用戶可以通過點擊文本光標來定位文本中的特定位置,進行編輯或修改。
          交互行為
          •  
            點擊:
            用戶可以將鼠標指針移動到文本光標上并點擊,以在該位置插入或編輯文本。
          •  
            拖動:
            用戶可以拖動文本光標來選擇文本。
           
          3.4 十字光標
          介紹:十字光標通常表現為一個十字形或“+”形的指針,它允許用戶進行非常精確的定位和選擇。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            精確定位:
            十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
          •  
            細節操作:
            在需要處理圖像、圖表或其他細節元素時,十字光標提供了更好的控制。
          交互行為
          •  
            點擊:
            用戶可以使用十字光標進行精確點擊。
          •  
            拖動:
            在需要選擇特定區域或繪制圖形時,用戶可以拖動十字光標。
           
          3.5 不允許的光標
          介紹:不允許/禁止光標通過特定的視覺樣式(如帶斜線的圓圈或箭頭)來表示某個操作在當前上下文中是不被允許或禁止的。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            禁用指示:
            指示用戶界面中的某些元素或操作目前不可用或被鎖定。
          •  
            防止誤操作:
            通過視覺提示防止用戶嘗試執行不可用的操作,從而避免可能的誤操作或錯誤。
          交互行為
          •  
            視覺反饋:
            當用戶將鼠標移動到禁止操作的區域時,光標變化提供即時的視覺反饋。
          •  
            操作阻止:
            系統阻止用戶執行任何無效的操作。
           
          3.6 屏幕快照選擇區域
          介紹:屏幕快照選擇區域光標允許用戶通過拖動來定義一個區域,這個區域將被捕捉并保存為圖像文件。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            精確定位:
            十字光標幫助用戶在屏幕上進行精確的點擊或選擇。
          •  
            細節操作:
            在需要處理圖像、圖表或其他細節元素時,十字光標提供了更好的控制。
          交互行為
          •  
            點擊:
            用戶可以使用十字光標進行精確點擊。
          •  
            拖動:
            在需要選擇特定區域或繪制圖形時,用戶可以拖動十字光標。
           
          3.7 消失光標
          介紹:指示在松開按鈕時,所拖移的項目將消失。如果項目是
          替身
          ,則不會刪除其原件。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
           
          3.8 拷貝光標
          介紹:拷貝光標通常表現為一個箭頭旁邊帶有“+”號或其他表示復制的符號,明確告訴用戶當前操作將復制選中的項目。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            復制操作:
            允許用戶通過拖動來復制文件、文件夾或其他界面元素。
          •  
            數據傳輸:
            在不同應用程序或同一應用程序的不同部分之間傳輸數據。
          交互行為
          •  
            拖動復制:
            用戶將鼠標指針放在可復制的元素上,按下鼠標按鈕并拖動以復制該項目。
          •  
            釋放完成:
            用戶在目標位置釋放鼠標按鈕,完成復制操作。
           
          3.9 替身光標
          介紹:替身光標表明用戶可以通過拖動操作創建原文件或文件夾的快捷方式,而不是移動原始項目。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            創建快捷方式:
            允許用戶在不改變原始文件或文件夾位置的情況下,創建一個指向原始位置的鏈接。
          •  
            節省空間:
            替身不占用額外的空間,因為它只是一個指向原始文件的引用。
          交互行為
          •  
            拖動:
            用戶將鼠標指針放在文件或文件夾上,按下并拖動。
          •  
            創建替身:
            在拖動過程中不松開鼠標按鈕,同時按下Option鍵(或根據系統提示的其他修飾鍵),光標將變為替身光標。
          •  
            放置:
            用戶將文件或文件夾拖到所需位置并釋放鼠標按鈕,完成替身的創建。
           
          3.10 幫助指針
          介紹:幫助指針通常表現為一個問號(?)或帶有問號的圖標,表示用戶將鼠標懸停在某個元素上時可以獲取幫助或說明。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            提供信息:
            幫助指針可以向用戶顯示額外的說明或信息。
          •  
            輔助理解:
            幫助用戶理解界面元素的功能或操作方式。
          交互行為
          •  
            懸停顯示:
            當用戶的鼠標指針懸停在具有幫助功能的界面元素上時,光標樣式可能會變化,同時顯示幫助信息。
          •  
            點擊獲取:
            在某些情況下,用戶可能需要點擊帶有幫助指針的元素以打開幫助文檔或獲取更多信息。
           
          3.11 鉛筆光標
          介紹:鉛筆光標是一種視覺提示,通常表現為一個鉛筆形狀的圖標,用來告訴用戶他們當前處于可以繪制或編輯文本的狀態。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            文本輸入:
            鉛筆光標用于指示用戶可以在文本字段中輸入文字。
          •  
            文本編輯:
            在已有文本上移動鉛筆光標,可以進行文字的選擇、編輯或修改。
          交互行為
          •  
            點擊定位:
            用戶可以在文本中的任何位置點擊鉛筆光標,以定位文本插入點。
          •  
            拖動選擇:
            用戶可以拖動鉛筆光標來選擇文本。
           
          3.12 精密指針
          介紹:精密指針是一種特殊的光標樣式,它為用戶提供了更精細的控制能力,特別是在需要精確定位或選擇的應用程序中。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            精確定位:
            允許用戶在需要高精度的界面元素上進行操作,如圖形設計、圖像編輯或表格數據輸入。
          •  
            細致選擇:
            在文本編輯或代碼編輯中,精密指針可以幫助用戶更準確地選擇文本或代碼段。
          交互行為
          •  
            點擊:
            用戶可以使用精密指針進行精確點擊。
          •  
            選擇:
            用戶可以輕松地選擇小尺寸的界面元素或在緊密排列的元素之間進行選擇。
           
          3.13 單元格指針
          介紹:單元格指針是一種特殊類型的光標,它在電子表格應用程序(如Microsoft Excel、Google Sheets等)中用于指示當前選中的單元格或用戶可以輸入數據的位置。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            單元格選擇:
            允許用戶通過點擊來選擇單個或多個單元格。
          •  
            內容編輯:
            指示用戶可以在單元格中輸入或編輯數據。
          交互行為
          •  
            點擊選擇:
            用戶可以通過點擊來選擇單元格,單元格指針隨之移動到該單元格。
          •  
            拖動選擇:
            用戶可以拖動單元格指針來選擇一個區域的單元格。
          •  
            輸入編輯:
            用戶可以在單元格指針所在的位置輸入或編輯文本。
           
          3.14 放大/縮小指針
          介紹:放大/縮小指針通常表現為一個帶有加號(+)或減號(-)的放大鏡圖標,用來指示用戶當前正在進行放大或縮小的操作。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            放大內容:
            允許用戶放大查看細節,例如地圖、圖片或文本。
          •  
            縮小內容:
            允許用戶縮小以獲得更廣闊的視野。
          交互行為
          •  
            點擊放大/縮小:
            用戶可以通過點擊帶有“+”或“-”符號的放大/縮小按鈕來進行操作。
          •  
            拖動縮放:
            在一些應用中,用戶可以通過拖動一個滑塊或在觸摸屏幕上用兩個手指進行捏合操作來放大或縮小。
          •  
            滾輪縮放:
            使用鼠標滾輪或觸控板的多點觸控手勢也可以實現放大或縮小。
           
          3.15 移動&拖拽光標
          介紹:移動光標是一種鼠標指針樣式,通常表現為一個帶有箭頭的矩形或邊框,表示用戶可以通過拖動來移動某個元素或對象。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            元素移動:
            允許用戶通過拖動操作來改變元素在界面上的位置。
          •  
            布局調整:
            用戶可以通過移動光標來調整界面元素的布局。
          交互行為
          •  
            點擊并拖動:
            用戶可以通過點擊并拖動移動光標來移動元素。
          •  
            釋放完成移動:
            用戶釋放鼠標按鈕后,元素將停留在新位置。
           
          3.16 抓取指針
          介紹:抓取指針是一種鼠標指針樣式,通常表現為一個張開的手或帶有抓取圖標的指針,表示用戶可以通過拖動來抓取和移動元素。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            抓取元素:
            允許用戶通過拖動操作來抓取界面上的元素。
          •  
            移動元素:
            在抓取元素后,用戶可以將其移動到新的位置。
          交互行為
          •  
            點擊并拖動:
            用戶可以通過點擊并拖動抓取指針來抓取元素。
          •  
            釋放完成移動:
            用戶釋放鼠標按鈕后,元素將被放置在新位置。
           
          3.17 載入光標
          介紹:等待光標是一種特殊的光標樣式,通常以一個旋轉的圖標、沙漏或進度條的形式出現,用來指示應用程序當前正在忙碌,正在等待某個操作完成或數據加載。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            指示忙碌狀態:
            向用戶明確表示應用程序正在忙碌,正在處理數據或執行任務。
          •  
            提供反饋:
            為用戶提供即時的視覺反饋,告知他們操作正在進行中。
          交互行為
          •  
            顯示載入光標:
            當應用程序開始處理任務時,指針變為載入光標。
          •  
            隱藏載入光標:
            任務完成后,載入光標消失,恢復為正常指針樣式。
           
          3.18 滾動光標
          介紹:滾動光標是一種用戶界面元素,用來指示用戶可以滾動查看的內容區域。它可以是滾動條上的滑塊,也可以是鼠標滾輪或觸控板的滾動手勢。
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          功能
          •  
            內容瀏覽:
            允許用戶瀏覽超出當前視圖范圍的內容。
          •  
            滾動內容:
            允許用戶滾動查看內容,如網頁、文檔或圖像。
          交互行為
          •  
            拖動滾動:
            用戶可以點擊并拖動滾動條上的滑塊來上下或左右滾動內容。
          •  
            滾輪滾動:
            使用鼠標滾輪或觸控板的滾動手勢可以快速滾動頁面。
          •  
            自動滾動:
            在某些應用程序中,內容可以自動滾動,如在演示或某些游戲場景中。
           
          四、鼠標指針的交互設計原則
          4.1 一致性(Consistency)
          •  
            定義:一致性原則要求在整個應用程序或網站中,鼠標指針的行為和樣式保持統一。這意味著相同的操作應產生相同的視覺反饋,相同的指針樣式應表示相同的功能。
          •  
            應用:例如,如果標準箭頭指針用于所有選擇操作,那么用戶就會學會預期這種指針樣式,并知道何時可以進行選擇。
           
          4.2 反饋(Feedback)
          •  
            定義:反饋原則指的是系統應提供即時的視覺或聽覺信號,以響應用戶的操作。這有助于用戶理解他們的操作是否成功,以及系統的狀態。
          •  
            應用:例如,當用戶將鼠標指針移動到按鈕上時,按鈕可能會改變顏色或顯示陰影,以表明它是可點擊的。
           
          4.3 可見性(Visibility)
          •  
            定義:可見性原則確保鼠標指針在所有情況下都是可見的,以便用戶始終知道他們當前的位置和可以進行的操作。
          •  
            應用:例如,當指針移動到特定元素上時,元素可能會高亮顯示,或者指針可能會改變形狀或大小,以提高其可見性。
           
          4.4 適應性(Adaptability)
          •  
            定義:適應性原則指的是鼠標指針應能夠適應不同的用戶需求和上下文環境。這包括對不同屏幕尺寸、分辨率和用戶偏好的適應。
          •  
            應用:例如,提供可調整的指針大小選項,以便視力不佳的用戶可以更清楚地看到指針?;蛘咴诓煌牟僮飨到y或設備上使用適當的指針樣式。
           
          五、鼠標指針對用戶體驗影響
          5.1 提升效率與準確性
          •  
            鼠標指針提供了一種直觀的方式來快速導航和選擇界面元素。通過精確的指向和點擊,用戶能夠高效地完成任務,減少尋找和選擇目標所需的時間。
          •  
            鼠標指針的變化可以即時反映用戶的操作,如當用戶將指針移動到鏈接上時,指針變成手形,這是一種即時的視覺反饋,告訴用戶這是一個可點擊的鏈接。
          •  
            清晰的指針狀態變化可以減少用戶在操作過程中的不確定性,幫助他們更好地理解界面的當前狀態和預期行為,從而降低操作錯誤。
           
          5.2 增強可訪問性
          •  
            鼠標指針的設計考慮到了不同能力的用戶。例如,可調整的指針大小和顏色對比度可以幫助視力不佳的用戶更容易地看到和跟蹤光標。
          •  
            輔助功能,如指針粘滯鍵或慢速指針移動,可以幫助運動障礙用戶更準確地控制指針,確保所有用戶都能有效地與界面交互。
           
          5.3 個性化與品牌識別
          •  
            通過自定義鼠標指針的樣式和動畫,應用程序和網站可以增強其品牌識別度。獨特的指針設計可以幫助用戶在視覺上與品牌建立聯系。
          •  
            個性化的指針樣式可以提供更豐富的用戶體驗,讓用戶感覺界面更加貼心和專屬。
           
          六、技術實現與自定義
          6.1 操作系統的鼠標指針設置
          以mac系統為例:系統偏好設置 -> 輔助功能 -> 指針控制
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
          •  
            操作系統通常提供了一套預定義的鼠標指針方案,包括不同的指針形狀和大小,以適應各種操作和視覺需求。
          •  
            用戶可以通過控制面板或系統設置訪問鼠標指針的配置選項。例如,在Windows中,用戶可以打開“鼠標屬性”對話框來更改指針速度、調整指針可見性(如指針大小和顏色),以及選擇不同的指針方案。
          •  
            一些操作系統還提供了輔助功能,如指針的軌跡顯示,幫助用戶更清晰地追蹤鼠標移動。
           
          6.2 自定義指針樣式與動畫
          •  
            需要下載第三方應用程序完成自定義,例如:Steer Mouse;xGestures;Smooth Scroll;Catch Mouse等
          •  
            用戶和設計師可以通過創建自定義指針樣式來個性化他們的計算機或應用程序。這通常涉及選擇或設計新的指針圖像,并將其應用為鼠標指針。
          •  
            自定義指針樣式可以包括獨特的圖形設計、顏色和主題,以匹配應用程序的品牌或用戶的個性。
          •  
            動畫指針可以提供更豐富的視覺反饋,例如,一個等待動畫可以顯示旋轉的圖標,以表明應用程序正在處理用戶的操作。
           
          6.3 編程控制指針行為
          •  
            開發者可以通過編程方式控制鼠標指針的行為,以增強應用程序的交互性。這包括改變指針的形狀、位置、可見性,甚至創建自定義的指針效果。
          •  
            在Web開發中,CSS和JavaScript可以用于更改指針樣式和行為。例如,cursor屬性可以改變HTML元素上的指針圖標,而JavaScript可以用于監聽鼠標事件并動態更改指針樣式。
          •  
            在桌面應用程序開發中,開發者可以使用相應的API來控制指針。例如,Windows API允許開發者設置自定義光標,而macOS的AppKit框架提供了設置光標的接口。
          •  
            編程還可以實現更高級的交互,如捕捉鼠標位置、響應鼠標事件,以及在特定條件下更改指針行為。
           
          七、案例研究
          7.1 成功的鼠標指針設計案例
           
          Current Time 0:00
          /
          Duration Time 0:52
           
          Loaded: 0%
           
          Progress: 0.00%
          Playback Rate
          1.00x
           
           
          7.2 鼠標指針設計中的常見問題
          •  
            不一致的指針樣式:使用多種不同的指針樣式可能會導致用戶混淆,特別是如果指針變化與功能不匹配時。
          •  
            不明顯的可交互元素:當指針移動到可交互元素上時,如果沒有清晰的視覺反饋,用戶可能不知道可以進行操作。
          •  
            指針尺寸不適當:指針太小或太大都可能影響用戶體驗,特別是在不同分辨率的屏幕上。
          •  
            缺乏視覺反饋:鼠標指針在懸停、點擊或拖動時,如果沒有適當的動畫或變化,可能會讓用戶感到困惑。
          •  
            指針與界面元素間距不當:當用戶點擊按鈕或其他元素時,如果指針位置與實際觸發區域不一致,可能會導致誤操作。
          •  
            指針樣式與品牌形象不符:如果自定義指針樣式與品牌的視覺形象不協調,可能會削弱品牌識別度。
          •  
            在不同操作系統或設備上的兼容性問題:設計的指針樣式需要在不同的操作系統和設備上進行測試,以確保一致性和功能性。
          •  
            動畫過度或不足:指針動畫可能會吸引用戶的注意力,但過度的動畫可能會分散用戶對主要內容的關注;不足的動畫則可能無法提供足夠的交互提示。
          •  
            指針行為與用戶期望不符:用戶對指針行為有一定的預期,如果指針的實際行為與這些預期不符,可能會導致用戶感到困惑。
           
          結語
          鼠標指針的設計需要綜合考慮功能性、美觀性和用戶體驗。一個設計良好的鼠標指針不僅能夠提升用戶界面的整體質量和效率,還能夠增強用戶對產品或服務的滿意度和忠誠度。希望通過本篇文章大家可以合理的利用各種鼠標指針類型。
           
          附件文件如下:可根據需要自行下載。(用于在設計稿上標注,或與開發溝通)
          鼠標指針的秘密:提升PC端交互的小技巧
           
           
           

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

          不錯,這些設計讓我開眼啦!

          天宇 交互設計及用戶體驗

          有時候創意就體現在很細節的局部,不一定是多么驚人的想法,只要一個細微的差異,就能拿捏用戶的情緒。一些簡單的設計處理,只要讓用戶多看幾眼,就能實現設計目的。
           
          本期黑馬哥繼續為大家分享一些不錯的設計案例,希望這些設計思路可以給你開眼,帶給你更多創作靈感。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          一、情感化的打卡設計
          通過線上打卡已經成為眾多業務方向的選擇,在便利性的同時也方便管理與追溯。為了提高用戶的打卡參與度,產品設計師也在不斷挖掘更有趣、體驗更好的解決方案。
           
          作為上班族和家長們會用到一些打卡軟件來輔助完成工作或者學習等,平時我也會經常使用釘釘給小孩進行課業打卡。在完成打卡后“我的成果”展示設計中,打卡標記的設計中嵌入系列 IP 形象或者圖形,通過情感化的設計提升了成果展示的趣味性,更能激發小朋友參與打卡的熱度。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          二、底部標簽欄的二級導航設計
          底部標簽欄更便于用戶操作頻繁切換的功能,通常 3~5 個為最佳,如果遇到超過極限值時就需要在交互形式上面思考解決方案。
           
          在洋蔥學園 APP 中,體驗到一個底部標簽欄帶有二級導航的設計方案,很好的解決了超過極限值的情況。在二級導航設計中強化了字體和添加了圖片背景區分狀態,以差異化的視覺表現吸引用戶關注度,以此增加二級導航的操作率。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          三、圖標設計的背景化運用
          圖標在產品中主要分為功能性和修飾性,對產品的操作體驗和感官體驗都起到了非常重要的作用,圖標的運用也被深挖到各種業務場景中。
           
          在嗶哩嗶哩任務中心欄目中,展示紅包、獎勵、積分、獎品的設計中,除了量化的數字結合以外,在各自數據背景中還添加了圖標設計。相較于單純的數據展示而言,圖標背景化的運用不僅提升了設計的感官度,也助力了業務屬性的差異化。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          四、品牌化的彈窗設計
          彈窗設計在圖形創意、視覺表現和造型等方面都有更多發揮空間,為了提升轉化率和降低阻力設計帶來的負面情緒,提升彈窗設計的體驗感也是至關重要的。
           
          在使用我愛我家 APP 時,發現新版本的彈窗設計造型結合品牌和業務性質進行設計,區別于常規造型的彈窗表達。品牌化的探索可以強化用戶對產品的品牌記憶度,深化用戶粘性。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          五、色彩豐富的卡片式設計
          卡片式設計是近些年非常流行的 UI 趨勢之一,卡片式設計無論在視覺表現力還是造型層面都呈現出了眾多案例,簡單的形式被賦予了各式各樣的表達。
           
          最近發現了一個色彩豐富的卡片式設計案例,相較于常規的白色卡片而言,嘀嗒出行的設計中給帶有描邊的卡片添加了局部突出部位作為背景。在色彩漸變的強化中,不僅使得卡片結構化,也體現出了青春活潑的感官氛圍。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          六、動態 IP 強化功能關注度
          品牌 IP 在產品設計中的運用已經逐步普及,提升情感化設計的同時,也是助力品牌化的關鍵。
           
          在掌上生活 APP 設計中,為了突出“服務大廳”入口的曝光度,采用動態 IP 來強化該功能的關注度。動態化的小招喵更有吸引力,強化功能的同時也讓用戶感受到輕松愉悅,提升了產品設計的情感化體驗值。
          不錯,這些設計讓我開眼啦!
           
           
          不錯,這些設計讓我開眼啦!
           
           
           
           
          七、情感化的用戶反饋設計
          用戶反饋是提高忠誠度和采集數據的關鍵,為了提高用戶反饋的意愿度,從情感化設計或者互動性等方面都在不斷探索。
           
          通過餓了么訂餐之后,當配送員完成送達時,會彈窗提示用戶是否已收到商品。通過表情化的圖標配合文案設計,情緒化的表達使得反饋更清晰,更能提升用戶的反饋意愿。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          八、人性化的導向設計
          地圖軟件的出現改變了大家的出行方式,再也不會擔心迷路,可以盡情地走南闖北。隨著產品體驗的不斷升級,地圖軟件也越來越人性化,帶給用戶優質的導航體驗。
           
          對于駕駛的用戶來說,如果使用高德地圖提前開始導航會進行人性化的導向,方便導航時間預估得更加精準。點擊“我已上車”即可開始導航,讓導航體驗變得更加人性化。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          九、動態頭像設置
          為了提升預設內容的體驗度,針對一些默認的內容也在逐步走向情感化設計的方向,可以讓用戶感受到更加真實的操作體驗。
           
          針對頭像設置也從默認的灰色人物剪影演變為個性化的 IP 形象、人偶、真實人物形象等,為了提升互動性,也在提供動態化的解決方案。比如豆包 APP 在給豆包設置頭像時,設計了不同性別的動態頭像,使得頭像表達更加生動形象。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          十、個性化的界面設計
          產品設計的風格越來越多樣化,為了體現差異化的體驗,個性化的界面設計也是層出不窮。
           
          最近在點餐時體驗到一個設計風格非常個性化的小程序,名字叫:WHAT TO EAT。區別于別的點餐類產品,該產品設計風格以線性插畫風結合,非常有個性化。不僅強化了自身品牌感,也深化了用戶的記憶點。
          不錯,這些設計讓我開眼啦!
           
           
           
           
          小結
          優秀的設計細節可以幫助我們打開禁錮的思維,創作出更優秀的設計方案。描述的觀點屬于個人經驗總結,不足之處我們繼續努力改進。
           
          本文由 @黑馬青年 原創發布。未經許可,禁止轉載。


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

          發現了10個非常棒的UI動效案例

          天宇 交互設計及用戶體驗

          動效在 UI 場景中的運用已經非常普遍,帶給用戶的體驗升級也是很直觀的。無論是一個圖標動效到界面間的轉場動效,還是聊天場景中的表情動效等,都證明了動效已經是無處不在。

           

          最近黑馬哥在體驗產品的過程中,發現了很多優秀的動效案例,今天選擇其中的 10 個和大家一起交流學習,希望能夠帶給大家一些靈感啟發。

           

           

           

           

          01. 動效,讓點贊與眾不同

           

          動態表情為社交場景帶來更活躍的體驗,使得交流過程變得更加趣味性。一個動態的表情不僅活躍了氛圍,也使得通過簡單的一個符號代表了千言萬語。

           

          最近在使用釘釘 APP 進行聊天的過程中,發現輸入框的大拇指圖標在長按的時候結合了動效的變化,對話場景中出現的大拇指表情會隨著長按而增大。結合動效和長按手勢,為點贊的圖標增加了不一樣的趣味性,帶給用戶不一樣的社交體驗。

           

           

           

           

          02. 動態提醒,增強消息的關注度

           

          各類通知/消息在產品中隨處可見,紅點提示剛出現的時候還引起了用戶強迫癥,短時間內也增強了消息的閱讀率。隨著紅點效應逐漸淡化,未讀消息的點擊率逐漸降低,大家都在嘗試更多提高關注度的形式。

           

          支付寶在消息模塊的服務提醒中,采用了動態形式提高關注度。當用戶點擊消息進入界面時,小鈴鐺圖標會左右晃動,以此來吸引用戶的目光,達到增加關注度的目的。

           

           

           

           

          03. 圖標動效,讓你脫穎而出

           

          在金剛區眾多的業務模塊中,想要突出重點模塊的關注度,采用動態圖標是比較常用的方式。采用動靜結合的形式,會讓動態表達得到突出。

           

          比如 Keep App 將活動挑戰圖標動效化,在不改變配色規則和圖標設計規范前提下,依然可以達到突出主題的作用。

           

           

           

           

          04. 博人眼球的動態懸浮廣告

           

          在不破壞產品結構的前提下,融入廣告的做法中,懸浮層廣告是較為明顯的形式。通常是靜態異形和動態異形較多,而動態的關注度相對更強一些。

           

          比如 Keep App 將活動的折扣信息以懸浮層的形式表達,既不會占用太多空間(隨著滑動會隱藏顯示),又能吸引用戶的關注度。如果用戶覺得影響操作,也可以直接關閉,就不會反復提醒而形成干擾。

           

           

           

           

          05. 內容模塊結合動效替換突出存在感

           

          在一些內容量比較多的產品中,比如電商產品,很多內容模塊都是百花齊放。都想要突出自己模塊的存在感,帶來更好的流量引入。而動效的結合也是不錯的選擇,但是需要考慮動效的干擾度。

           

          當當 App 在突出今日搶購欄目時,為了不影響臨近板塊的干擾度,利用動效轉場來替換展示的商品信息。縮放替換商品時的動效既能達到差異化,也不會破壞整體的結構,算是一舉兩得的設計解決方案。

           

           

           

           

          06. 微弱的動效也能呈現有溫度的設計

           

          有時候在進行產品設計的時候,動效帶來的關注度并不是需要很強的表現力,一些微弱的動效依然可以提升產品體驗,帶給用戶更有溫度的設計。

           

          自如 App 整體的設計都是做得非常不錯的,在“我的”板塊頭部區域,結合背景插畫視覺感也是非常不錯。插畫中部分元素的微動效增強了生活氣息和真實感,讓用戶感受到這是一款有溫度的產品,提升用戶的好感度。

           

           

           

           

          07. 動態感十足的底部標簽欄

           

          圖標動效運用到底部標簽欄十分普遍,在這個頻繁切換的操作中,動態的形式可以帶來更強的趣味性和關注度。

           

          優酷 App 底部標簽欄采用多種顏色變化轉場,結合路徑動效帶來動感十足的體驗。首頁圖標還結合了刷新的功能,方便用戶進行內容的刷新,增強用戶體驗感。

           

           

           

           

          08. 拓展功能的動態指引設計

           

          針對一些功能體量較大的產品,會經常結合一些隱藏式設計,拓展出更多功能操作。通常默認為展開狀態,在滑動瀏覽內容時隱藏,通過動效吸引點擊展開,不會造成主內容的干擾。

           

          比如平安口袋銀行底部標簽欄上方的拓展功能區,動態形式的展開與隱藏方便用戶瀏覽主頁內容。個別內容采用動態設計(點我抽獎),突出其點擊欲望。動態設計不僅提高了功能的曝光度,也能引導用戶操作,將繁瑣的操作變得更便利。

           

           

           

           

          09. 結合動態 IP 的下拉刷新

           

          針對下拉刷新這一常規操作,設計形式也是豐富多樣。結合 IP 形象進行動態演變完成刷新動作,被很多產品設計師所采納。

           

          美團外賣就將品牌 IP 形象結合得恰到好處,下拉刷新時兩只耳朵搖擺非常俏皮可愛,松開后 IP 形象露出,還配合眨眼睛等可愛的表情動效。情感化設計結合動態表現,拉近與用戶之間的親和力,帶給用戶更人性化的使用體驗。

           

           

           

           

          10. 圖標動效帶動局部功能的關注度

           

          對于一些局部功能或者模塊占比較小的欄目,為了提高曝光度,獲得用戶的關注度,動態的形式是比較常用的方法。通常會在圖標部分、文字部分、裝飾元素部分等進行動效設計,帶來的效果也是顯而易見。

           

          比如 QQ 音樂在“我的”模塊中,將活動中心、會員中心、每日簽到的圖標采用動態設計形式,雖然幾個模塊占比較小,但是依然能夠獲得用戶的關注度。

           

           

           

           

          小結

           

          動效表達在產品設計中的應用越發普及,不僅可以強化功能的關注度,也能帶給用戶感官體驗上的升級。優秀案例的積累和分析,有助于我們掌握更多的表現形式,靈活的運用到項目設計中。

           

           

          作者:黑馬青年(vx: heimaux)

          本文由 @黑馬青年 原創發布。未經許可,禁止轉載。



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

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

          54個絕妙UI/UX設計秘訣:讓你的設計脫穎而出!

          天宇 交互設計及用戶體驗

          當你為你的項目創建有效的,可訪問的,漂亮的ui時,只需要最小的調整來幫助快速改善你的設計。 努力創造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設計,還有用戶體驗。

          希望你喜歡!

          1·讓你的元素出現更多

           

          用微妙的邊界定義。

          使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現

          更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。

           

           

          2.減少字母間距

           

          標題給一個更好的光學范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標題……我要說“是”!

          你的標題很可能會比他們的標題更大,更重。相比于正文,字母之間的間距有時會出現視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標題視覺平衡,更易于閱讀,通常更賞心悅目。

           

           

          3.圖表一致性

           

          為了一致性,確保你的圖標具有相同的視覺風格。確保它們擁有相同的視覺風格;同樣的重量,要么填滿,要么秒變了。不要混搭。

           

           

          4.頁面可以用一種字體

           

          只使用一種字體就很好。在設計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產生更強、更持久的結果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產生完美的可接受的結果。雖然只有一個單獨的字體。

           

           

          5.適當的留白

           

          留白是UI設計朋友。大膽的使用。適度的留白,即使是少量的白色物質,但要使用得當。能讓你的設計透氣,而且看起來更光亮。

           

           

          6.20pt的文字

           

          創建長篇內容?給20 pt試試。對于長形式的內容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當然,這取決于所選擇的字體,但大多數流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當你的用戶面對一堵文字墻的時候。18pt太過時了。

           

           

          7.字號集比例

           

          使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標題、按鈕等)字體比例將幫助你產生看起來和諧的文本字號集。因為他們的大小根據設定的固定比例增加和減少。

           

           

          8.界面顏色定義

           

          選擇一個基本顏色,然后使用色彩和色調增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設計。如果項目允許,簡單地使用一個有限的調色板選擇一個基地顏色,然后使用你選擇的顏色的色調和陰影可以增加一致性以最簡單的方式來改變你的設計。

           

           

          9.登陸用戶體驗

           

          改善用戶登錄的體驗。記住拇指規則。允許用戶在任何時候跳過您的移動應用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調整,可以為你的用戶提供更好的體驗……

          記住,拇指仍然是主宰!

           

           

           

          10.陰影來自一個光源

           

          你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設計看起來更拋光且統一。記住,我們不是生活在一個擁有一千個太陽的國度里。

           

           

           

          11.建立字體集合

           

          使用更好的字體組合,效率會很很快。當你想要提高你的字體組合技巧的時候,當面對1000個字體選擇,只是去尋找對應的自己集合,效率會快很多。

           

           

           

          12.提高你的對比

           

          文字和圖像與一個微妙的覆蓋。根據文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復雜的內容和圖片。

           

           

          13.使用居中排列文字要有節制

           

          太多就會導致用戶體驗不合格。盡量只在標題和小段落中使用中心文字。對于幾乎所有其他內容,保持文本左對齊。你的用戶會感謝你的你。

           

           

          14.多字重

           

          當選擇一個多用途的文字,盡量找一個大量權重。你搜索的字體有很多選擇嗎?重量、風格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當然也有例外,某些項目會要求“只有一種風格”

          更精致的字體,但對于絕大多數項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風格,希望你在設計過程的后期需要更多的空間。

           

           

           

          15.淺色背景不要文本過亮

           

          想要創造更容易理解的界面,對吧?把你的文字調暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。

           

           

          16.純黑色文字未必是好

           

          當涉及到長形式的內容時,某些常規的粗細字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調,把文字往下寫,讓眼睛更容易看。

           

           

          17.通過色彩對比度作區分

          總是通過icon最突出的內容。你認為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區分,尺寸和標簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標。如果可以使用文本標簽,那就使用它們,讓用戶更好地理解。

           

           

          18.字體越小,行高越大

           

          當你的字體變小時,請增加行高,以達到更好的通用性。這同樣適用于當你的字體大小增加。簡單地降低行高。

           

           

          19.“Il1”測試文字可讀性

           

          使用x-height來測試字體的可讀性?;旧?,x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數字1。

           

           

           

          20.突出實用動作

           

          當設計一個在應用程序內部使用的菜單時,確保提供最多經常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。

           

           

           

          21.顏色-從你的圖像中選擇

           

          顏色-從你的圖像中選擇,會給你的產品帶來生命。簡單地從你的產品圖片中選擇顏色,然后應用各種色調。你選擇的顏色陰影到你的背景,文字,圖標或更多,可以添加。你的設計具有豐富的視覺趣味和個性。

           

           

          22.不同字體,不同行高

           

          基于字體的x坐標,設置您的線高度。不同x高的字體需要不同的行高測量,實現文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現。

           

           

          23.突出最重要元素的方式

           

          突出最重要的元素。通過使用字體大小,權重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調整,讓用戶體驗更好一點。

           

           

          24.錯誤下額外的視覺輔助

           

          操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當他們填寫任何形式的表格時額外的視覺輔助。

           

           

          25.移動端熱區創建

           

          嘗試在移動端創建慷慨的熱區。當為移動設備設計時,嘗試創建足夠大的可點擊區域,是好的。對于只包含文本的按鈕和鏈接來說,這是很有挑戰性的,盡可能使用帶有標簽的圖標。

          以下是iOS和Android的最小推薦點擊區域:

          44 x 44pt用于iOS

          48x48dp用于Android

           

           

          26.短標題上盡量使用全大寫

           

          在短標題上盡量使用全大寫。如果你想在標題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。

           

           

          27.保持文字與圖像的對比度

           

          在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。

           

           

          28.英文標題字體推薦

           

          看看這些很棒的字體,用在標題非常好的。發現他們真的很適合標題,設計感很強。(我沒有推廣費用,請放心用)

           

           

          29.英文長文本字體推薦

           

          看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。

           

           

          30.讓垂直節奏恰到好處

           

          標題和正文。當你想實現一個好的垂直節奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設計。我見過許多設計,最常見的是在文章列表中,它們已經被應用標題的上下空白相等,這樣就失去了這種聯系在它下面有正文。在這種情況下,我總是會給我的標題更多的頂部邊距,而在底部,標題和下面的內容之間的連接是更強,有良好的垂直節奏,視覺層次保留在所有的文章之間。

           

           

          31.使用具有信息性的提示符

           

          對于下載指標,試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現這一點,用百分數來顯示當前進度,一個簡單的圖標,讓他們可以在任何地方取消下載時間。

           

           

           

          32.保持標題相對簡潔

           

          如果你能保持標題簡短,簡潔……“想做就做”。

          如果可以,如果合適的話,保持標題簡短,時髦,切中要點。而不是“這是你的風格,你的方式”,簡單地使用像這樣的“你的風格。你的方式。”人們會瀏覽,保持這些標題簡短有力有助于他們更快地消化中的信息。

          記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標受眾來決定方法是合適的,相對于更標準的格式。

           

           

          33.選擇合適的字體

           

          正確的設計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關鍵在于找到合適的字體你正在做的項目的聲音。當你剛接觸字體時,這似乎是一項艱巨的任務,所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。

           

           

           

          34.行長度的平衡點

           

          你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發現是最佳位置。當然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

          35.幽靈文字提升用戶體驗

           

          偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內容應該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。



           

           

          36.界面元素保證快速區分

           

          使用戶界面中的元素彼此區分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區分開來,輕松掃描您的網站或應用程序。按鈕,在大多數情況下,將優先,所以確保他們是最突出的。項目在屏幕上,并很容易區分其他元素。

           

           

          37.投影的玩兒法

           

          只是一些細微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設計中使用要適度?,F實世界中的陰影,在大多數情況下幾乎是不可察覺的,而且所以你應該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現一些的東西更微妙和栩栩如生。

           



          38.全大寫文本

          使用全部大寫?選擇適合的字體,能夠達到光學清晰度。在你的設計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學清晰度。

           

           

          39.讓面包屑脫穎而出

          讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經常用于內容豐富的網站,通過最小的調整,你可以確保用戶能夠快速定位他們在一個網站上的位置以及他們可能需要去的其他地方。如果用戶已經通過使用跳轉到網站的某個深度,這一點尤其有用。

           

           

          40.嘗試用高飽和顏色

           

          使用高度飽和的顏色?試一試用淺色調來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍色、紅色、綠色等)可以讓網站看起來很棒,但是當過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應該是最優先的。

           

           

           

          41.圖表不要叛逆的使用

           

          在ui中使用已建立的圖標,為了避免給用戶造成混淆。在你的設計中添加圖標時,試著選擇一個有代表性的已建立的圖標。不要選擇一個能傳達正確含義和功能的圖標否則會引起困惑,成為用戶的認知障礙。不要在這些圖標上過于叛逆。

           

           

           

          42.接近原則

           

          在眾多經過嘗試和測試的設計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關鍵。接近只是確保相關設計元素放置在一起的過程,表明彼此之間的關系,這有助于加快用戶的認知。

           

           

           

          43.文本網格

          4pt基線網格+ 8pt網格=單一網格。當使用類型時,8點網格旁邊使用4點基線

          可以為你的設計帶來更和諧的垂直節奏。您需要對齊您的類型到基線網格4,使用的行高值為4的倍數(16、20、24、28等)

          為什么4?我發現在過去使用特定的文本大小時,按8的倍數縮放是不太合適。

           

           

           

          44.文本建議行高比例

          減少標題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標題的推薦行高通常約為1至1.3倍。

           

           

          45.顏色選擇

           

          選顏色有困難計劃嗎?在顏色上進行類比論。類似的顏色,也被稱為相鄰或相鄰的色調,是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調幫助您創建一個簡單的,顏色方案快速。當你需要快速將顏色調和到混合中時,可以使用類似的方法。

           

           

          46.提高信噪比

           

          在你的設計中盡量提高信噪比。你可以在你的設計中通過最大化信號來實現清晰和可用性最小化噪聲,從而產生高信噪比。您可以通過確保提供相關信息(信號)來實現這一點有效,不相關的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

           

           

          47.圖像文字達到強對比

           

          我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達到較強的對比。

           

           

          48.使用重量、大小和顏色來表示類型中的層次結構

           

          當使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進行細微的調整就可以實現這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產生任何混淆。

           

           

          49.淺色文字加深色?

           

          養肥了,字體大小為最佳易讀性。當設置暗色文字與淺色背景,選擇一個更輕的粗細。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標,避免讓用戶的眼睛疲勞。

           

           

           

          50. 用你的字體選擇創造正確的情感回應

           

          試著為你要呈現的內容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當內容與他們交談當它不是。正確的字體選擇是至關重要的,使您的內容講給他們直率和情感的水平。

           

           

          51.大寫字母+字母間距=更好的易讀性

           

          你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區分。字母之間的間距只要稍微增加一點就可以。

           

           

          52.錯誤告知

           

          打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救??偸亲層脩袅私馇闆r,即使是像常規一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。

           

           

           

          53.告知用戶正在發生什么

           

          試著向用戶保證在加載過程中會發生一些的事情你的應用程序。顯示應用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發生一些事情。系統狀態可見性是一個重要的原則要遵循,并允許用戶知道發生了什么。不要讓用戶從一開始玩猜謎游戲。

           

           

           

          54.不可逆的操作強提醒

           

          告訴用戶將要做什么如果他們應用了某個動作。在應用特定的操作之前,總是嘗試并詳細地告知用戶可以有結果。這尤其適用于具有不可逆轉后果的行為,如刪除某些東西。讓用戶知道將要發生什么,并在此之前要求他們進行確認。他們就會按下那個標有“刪除”的紅色大按鈕。

           

           

           

          參考文獻《UI & UX Micro Tips - The Ultimate Collection》

           



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

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

          大廠搜索哪家強?這些交互設計值得你收藏學習!

          天宇 交互設計及用戶體驗

          大體上分為兩類:彩蛋流和體驗流

          搜索的本質是什么?無疑是內容的召回和信息的推薦。

          可隨著時代的發展和行業公司的內卷,不少公司除了持續優化搜索結果與推薦外,在搜索的體驗和彩蛋上也是下了不少功夫,從而進一步加強自有產品的競爭力與用戶黏性。因此今天就來盤點一些,那有意思的大廠搜索交互。

          大體上分為兩類:彩蛋流和體驗流

          A.彩蛋流

          注重提升搜索過程中的趣味程度,以增加用戶的好感度與產品印象/口碑。行業代表:谷歌瀏覽器、百度瀏覽器

           

          1.谷歌瀏覽器

           

          可以說是搜索彩蛋的先行者,內置了很多搜索關鍵詞的有趣彩蛋,如娛樂角色:搜索【滅霸】,頁面右邊會打響指,相關字段會被’毀滅‘掉

           

           

          搜索【馬里奧兄弟】,右邊也有游戲里一樣的點擊彩蛋

           

           

          還有各種有意思的搜索結果比如搜:is google down(谷歌關閉了嗎),搜索結果優先顯示:NO

           

           

          再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時搜索結果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。

           

          而且在日常的節日、活動、熱點運營上,谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與,可以已經形成一個穩定、具有品牌感的企業文化了。

           

          如各種復活節、開學季、母親節動效。而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

           

           

           

           

           

          2.百度瀏覽器

           

          百度在搜索彩蛋里下的的功夫也不少,最著名的應該是搜索【黑洞】時,頁面上會出現黑洞的吸入特效。

           

           

           

           

          而且和谷歌相同,在其他的搜索關鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉】,頁面會左右翻過來

           

           

           

           

          搜索【跳躍】,頁面會在上下跳動

           

           

           

           

          搜索【失重】,頁面上的字會飄起來‍

           

           

           

           

           

          而在【活動運營】上,百度也是很有心地進行著創新設計,力求給用戶一種眼前一亮的感覺。比如每年的愚人節,搜索結果頁上都有‘調戲’用戶的創意設計,各種輕松調皮的畫風 給不少用戶帶來了新鮮感和趣味性。

           

           

           

           

           

           

           

          還有在【活動入口】的設計上也是特別有想法:在某年的圣誕節上,百度創新性地將活動入口’嵌套‘在結果頁卡片中間,用活動里的ip形象-雪人「抬著」結果頁卡片和在上面「滾動」

           

           

           

           

           

           

           

          用這種充滿創意+應景的的入口設計與引導方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動。另外,百度搜索框上面的運營活動入口,也和谷歌有異曲同工之妙。

           

           

           

           

          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

           

          B.體驗流

           

          注重提升搜索過程中的交互體驗,以增加用戶的操作效率與產品易用性。

           

          代表:蘋果產品、夸克瀏覽器

           

           

          1.Apple/蘋果產品

           

          ·iPhone

           

          iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件,它還自帶了【匯率轉換和計算器】。在搜索框輸入【數學公式、匯率轉換】時會自動計算對應的結果。無需用戶額外打開計算器、瀏覽器,大大減少操作鏈路。

           

           

           

           

          在iOS的原生鍵盤里,可以根據輸入詞檢測+搜索對應的手機號碼:當你輸入 【打+我或通訊錄好友+電話】時,鍵盤上會自動顯示自己或好友的電話號碼,點擊號碼就能自動粘貼在輸入框中。

           

           

           

           

          用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼,大大提升操作體驗與效率

           

          ·Mac

           

          在Mac電腦的工具欄上搜索相關幫助時,系統會直接把該結果所對應的頁面位置調取出來并懸浮展示。用戶可以直觀地該結果在哪里,并減少尋找的操作路徑,免去多余操作

           

           

           

           

          在Mac電腦的‘系統偏好設置’里搜索幫助,在結果列表上會以聚光燈的形式展示各個結果入口。選擇具體某個結果時,該入口的聚光燈會更清晰些,特別容易找到搜索結果。

           

           

           

           

          2.夸克瀏覽器

           

          夸克瀏覽器除了傳統的「點擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢同樣可以喚出搜索框。

           

           

           

           

          降低「需要往上手指移動,才能點擊搜索框」的操作成本,讓用戶更快、更精準地觸達搜索。

           

          而且在輸入網址或英文等字段時,搜索框下方會出現一個滑塊區。點擊就會變成長條的滑塊,拖拽滑塊即可改變光標位置。

           

           

           

           

          而且更多有趣、創意的設計案例,可上:有蛋案例 youdananli.com 近千個行業/大廠里的創意案例、上百個知識模型、設計方法。

           

          讓用戶更方便地將光標快速移動到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會前置搜索結果, 比如在搜索框中輸入“某城市+天氣”的關鍵詞,上方就會以卡片的形式顯示該地區最近一周的天氣。

           

          用戶無需觸發搜索、進入結果頁才能看到想要查詢的信息。

           

           



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

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

          交互設計:我們是不是要把“用戶體驗”中的“用戶”拿掉了

          天宇 交互設計及用戶體驗

          精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚,領導和客戶往往也會忽略這一重要的步驟...

          交互設計:我們是不是要把“用戶體驗”中的“用戶”拿掉了?

          前言:這篇文章寫得特別好,很精準的分析了UX設計師的技能定位。其實不光是作為一些交互設計師自己不太清楚,領導和客戶往往也會忽略這一重要的步驟。文章篇幅有點長希望大家能靜下心看完,會幫助自己了解更多哦~

          什么是用戶體驗設計師?

          我最近從一位來自MathWorks(世界領先的技術計算和基于模型的設計的軟件開發商和供應商)的高級用戶體驗專家那兒看到了一個很棒的廣告,這是其中一些節選:

           

          • 與開發團隊合作,遵循以用戶為中心的設計方法,協同工作,對復雜的問題進行頭腦風暴和設計創新的解決方案

          • 向團隊成員建議使用哪些可行的方法來回答他們關于用戶的問題,并根據項目的需求、目標和約束來設計方向

          • 與團隊成員密切合作,進行用戶研究,發現痛點,開發用戶配置文件,并創建任務列表

          • 在紙上畫出功能原型

          • 進行可用性測試,進行用戶交流和網上調研,組織調查,并進行你認為合適的其他可行性評估

           

          它準確地描述了我在對于用戶體驗工作的期望。我們從目標人群和競品那里學習有關項目的一切知識,找到方法來研究用戶的需求和目標,與目標人群一起評估這些需求,修改項目計劃,并在最終確定產品之前創造出經過用戶驗證的解決方案。

           

          但當我換一份新的工作時(當然那是個例外),我看到許多職位描述都要求具備廣泛的用戶體驗技能,有些人甚至要求具備除此以外的更多技能。但似乎他們真的需要一個能進行原型設計的視覺設計師。

           

          來自高級UI/UX設計師的廣告:

           

          • 有測試和可用性實驗的經驗和熟練的交互原型的經驗

          • 創造清晰和具有視覺沖擊畫面的能力

          • 深入了解用戶的興趣和需求

           

          聽起來他們在尋找一個精通調研、可用性測試和交互原型的人。但更迫切的需要反映在以下關于"附加"的要求中:

           

          • 項目工作能展示強大的用戶體驗過程和完美的細節視覺和交互設計原則(IA,IxD,排版,布局,層次結構,顏色,組成)

           

          你認為他們只會招聘一個可以進行用戶調研,畫線框圖和測試的人嗎?或是視覺設計做的很出眾的人?也許這反映了“UI”這部分的職位描述。讓我們來看看一個純粹的UX設計師的職位,它要求:

           

          • 優秀的分析能力

          • 在實際用戶研究、信息架構、交互設計、以用戶為中心的設計過程以及用。戶體驗原則和技術等方面有豐富的經驗

           

          聽起來不錯!但其真面目會在下一個要求中顯示:

           

          • 把想法/概念轉化為優質的視覺設計

           

          如今,用戶體驗已成為熱門詞匯。盡管看起來不言自明,但一些公司并沒有明白這一點——他們仍然忽視了行為經驗,而不是外表和感覺。我看到的許多廣告都是在視覺設計上表達了最具體和生動的語言。這讓我撓頭,懷疑是否只有最成熟、規模最大的公司才真正需要用戶體驗,并有足夠的預算來支持它。難道其他公司只是通過招聘視覺設計師并給他們貼上“UX”的標簽,來追個市場熱點而已嗎?

           

           

          遠離調研?

          用戶研究員Alan最近離開了一家總部位于亞特蘭大的公司,那里擁有大量的用戶體驗員工。他在公司的頭兩年里,參加了全國各地許多不同類型的用戶調研。然而,在最后一年,他發現他的調研被拋到一邊了。

          "我的新老板不關心做調研。似乎整個公司都在降低它的重要性。相反,他們會開辦設計思維講習班,直接進入開發階段。“任何研究或可用性測試都被留到最后,只是為了驗證解決方案。

          由于該公司以嚴厲對待用戶體驗而聞名,這一點尤其令人不快。

          像用戶體驗(ux)這樣流行的詞匯會突然變得受人追捧,我想不出在這個行業還有什么比“設計思維”更重要的了。根據谷歌在過去的五年中的數據,對設計思維的網頁搜索翻了兩倍。

           顯示從2012年12月到2017年6月設計思維搜索增加的圖表。

           

          搜索“設計思維”,2012年12月-2017年6月(資料來源:Google Trends)

          設計思維過程的第一步是移情化,就是讓用戶參與并觀察他們如何談論的,同時觀察他們如何真正完成任務。換句話說,這就是用戶調研。誰做調研?做用戶體驗的諸位!不難想象互聯網項目負責人和利益相關者繞過這個步驟,直接進入步驟2和3,開始定義問題和開展頭腦風暴去解決方案。爽死他們了。

           

           

          在“設計思考家最初犯的五個錯誤,”Dana Mitroff Silvers,一個設計思維驅動者和數據戰略家寫道,“我經常被客戶要求跳過這個階段,直接進入解決問題的階段。”

           

          她還描述了我有過很多次的經歷,公司禁止接近用戶!很多時候,silvers的客戶都會問他們是否可以跳過這個階段,因為他們“已經知道他們的受眾需要什么,可以為他們代言。”

           

          這就說的通了。團隊繞過不熟悉的移情階段,直接進入定義問題及其解決方案,過去一直都是這么做的。而且如果沒有在移情方面的訓練和指導,或者充分了解,很容易跳過這個階段。在我接下來的交談中可以看到,一個公司告訴我他們需要一個兼并的ux/視覺設計師。我問他們是否需要設計思維,產品總監回答:“是的。”他們跳過移情步驟了嗎?他同樣回答道:“是的。”

           

          如果一家公司僅僅遵循設計思維的最后四個階段——設計、構思、原型和測試——那么一個用戶體驗設計師是什么樣的呢?是一個可以做原型開發的視覺設計師。

          分離調研和設計

           

          用戶體驗架構師Alyssa最近與一家大型電信公司簽訂了用戶調研合同。讓人失望的是,設計師似乎沒有責任跟蹤調研結果。調研人員每一到兩周進行一次新的可用性測試,然后將測試結果提交給設計師,也不知道設計師是否會遵循建議

           

          這似乎不對。

           

          我已經注意到越來越多的公司在調研和設計師之間拆分他們的用戶體驗實踐。問題是,“用戶體驗設計師”通常不僅要處理交互設計,還要處理視覺設計。盡管易于使用的工具的出現使得創建可點擊的原型變得容易,但這是兩個不同的技能。我期望交互設計師分析行為和工作流程,并充當用戶的擁護者;視覺設計師則負責推廣品牌。

           

          將設計團隊分成調研人員和設計師可能會阻礙有效的軟件開發。為了真正了解用戶,設計師需要培養共情心。他們和其他團隊成員可以通過進行用戶調研或可用性研究——或者參與調研過程來實現這一點。這就鎖定了用戶的目標和痛點,并讓設計師了解到什么是最重要的點,這將有效幫助如何更有針對性的設計。除了對設計人員有好處之外,定期的用戶調研還可以讓公司了解用戶的期望和行為。如果這些好處能被廣泛理解,那公司一定會對共情心和用戶調研付出比口頭更多的心思了。

           

           

          功能原型和測試不足

           

          Alan Cooper是視覺基礎的創造者和用戶體驗的領袖,也是《囚犯們管理收容所》一書的作者,他在Twitter上抨擊了“原型和測試”的思維模式并表示:“原型和測試不是交互設計”。 Cooper寫道交互和測試能讓領導感到高興,但它只是蚍蜉撼大樹。盡管它創造了微小的改進,讓設計師和他們的領導們充滿希望和快樂,但它從來沒有真正從大的程度上理解用戶或者產品。

           

          我們都搞錯了

          我們已經看到,在設計思維的大旗下,公司可能會跳過移情階段,回歸到一個舒適、獨立的設計過程。設計思維確實帶來了一個有價值的原型/測試階段,但在用戶研究上的偷工減料卻使本末倒置,并錯過了一個時機,去進行具體的見解和創新,從而可以將產品推向頂峰。而斷斷續續的研究只會拖延我們“想要知道我們的用戶想要什么”的心態。

           

          雖然強調視覺設計的技巧,但分離研究和設計,可能消耗掉那些面向認知將用戶體驗放在首位的設計師。視覺設計提供了一個重要的初步印象,許多研究表明,人們對第一眼有吸引力的網站的評價通常比較高。但視覺只是用戶體驗中的一部分。一個經常使用你的產品的用戶到底是如何評價的?視覺效果將發揮一定作用,但我認為它更有可能依賴于一個偉大的工作流程——需要反復跟進用戶體驗的流程。

           

          我們到底要什么?

           

          我不知道出了什么問題,但我猜是我們的理由還不夠充分。我們都含蓄地理解真正的用戶體驗過程的價值,但開發或市場主管是否也是如此?

           

          可能是我們自己被自己的完美所欺騙了。我們已經大幅改善了用戶體驗的程度,現在在任何手機上都可以找到偉大設計的例子。改進后的開發工具利用了我們創新的交互模式,小工具使平面設計看起來很棒。也許開發領導者覺得他們已經看到了足夠好的設計,他們相信他們也可以做到這一點。


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

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

          【設計秘籍】掌握按鈕設計的藝術,打造極致用戶體驗!

          天宇 交互設計及用戶體驗

          怎樣正確設計按鈕?

           

           

           

          一、我們對“按鈕”認識都是從這里開始

          按鈕這個組件,在我們UI設計中出現頻率最高,交互使用最重要,確在用戶體驗上最容易被忽略的一個組件元素因此我們要對按鈕做一個重新認識在沒有互聯網的時代,按鈕就已經被人們廣泛使用了,例如:電燈的開關、電視機的遙控器、最早的固定電話等等,在物理形態下的按鈕也將是互聯網時代出現后UI按鈕組件的前身,目前物理按鈕仍在被廣泛沿用,作為UI設計中的按鈕組件,不管如何演變,萬變不離其宗,依然需要參考現實環境物理按鈕,按鈕的交互就是通過觸摸能夠完成用戶的行為需求,所以按鈕的設計理念一定是直觀性和易用性優先,從而指引用戶完成輕松無障礙的完成任務。
          我們在UI設計環節如何將按鈕完美呈現,是我們將要深入研究一個課題,按鈕的交互體驗、視覺體驗會影響到產品的轉化、引流、行動觸發等。

           

           

           

           

           

          二、按鈕的應用

          按鈕是一個帶有明確指示性的交互提示組件,它指引用戶準確的完成下一步的操作,UI設計中一項任務的關鍵節點與轉折點的操作步驟,都是通過按鈕來完成的。

           

           

           

           

           

          1.按鈕基因

          我們平時見到UI設計中的按鈕,第一眼看上去很簡單,大多是由一個底色塊或一個帶描邊框加上文字注釋組合構成的,其實真正的按鈕是由其大小尺寸、擺放位置、顏色、文案、圓角的大小…等細節元素組成,對細節的運用和把控,直接關系到用戶的使用體驗。

           

           

           

           

           

          2.按鈕使用

          我們在UI設計中,設計按鈕時,會深度探究按鈕在當前環境下的意義,出現在哪里?是否需要增加按鈕?為何增加按鈕?

          按鈕功能:
          展開、收起、下拉、加減等功能,重點強調的是功能,在操作之后會發生一些交互形態的化這種按鈕主要起到通過功能形態的變化來告知用戶操作的信息與結果。
          引導用戶接下來的操作:
          我們完成一項內容編輯或信息的確認后,就會對當前環節的頁面失焦(視覺焦點),而引導型按鈕(如:下一步保存、支付、確定)就會重新聚焦視覺重點,通過按鈕功能的文案描述告知用戶下一步該怎么辦。

          行為習慣養成:
          培養用戶的點擊習慣,當我們在一個操作按鈕之后會得到相對應的信息反饋,并且可以持續的給用戶帶來價值那么我們設計這個按鈕時可以重點突出這個按鈕的視覺表現力,在同維度不同的區域保持這個按鈕視覺上的統一持續培養用戶的點擊習慣,以后在遇到類似的按鈕時思維的慣性就會引導這個行為完成點擊操作。

           

           

           

           

           

          3.按鈕的結構

          按鈕需要經過很多細節的設計,才能發揮出按鈕的最大作用例如,內容的長短/邊距;容器的大小、圓角;填充色的主/次之分…等,讓我們來了解按鈕到底是由哪些屬性、元素構成。

          圓角:通過視覺上給用戶的感受,圓角的大小決定按鈕的氣質,小圓角是按鈕經常使用的如:4PX圓角,也有比較嚴謹的、力量型的全直角也有柔和到極致的全圓角等等。

          圖標:可視信息抽象化表達,通過圖形直觀表達文字的含義,例如:加載中編輯等。

          容器:是按鈕上所有信息的載體,包含顏色、紋理、文案、圖標等元素。

          邊框:確定按鈕的邊界,常用于次級按鈕描邊。

          文案:用文字表達按鈕的含義,文案要精煉簡要。

          背景:表達按鈕的狀態,形象氣質,品牌氣質。

          投影:投影主要運用于凸顯層級關系,讓按鈕在原有維度提升,達到視覺聚焦的作用,往往配合紋理與漸變色可以打造更好的視覺體驗。

           

           

           

           

          三、按鈕的類別

           

          1.功能類別

          按照功能屬性分類,可以將按鈕分為流程控制和功能選項兩大類別

          流程控制:常見的傳統按鈕,如支付、確定、下一步、確定、保存等,容器承載著圖標、圖標加文案、文案等形式。

          功能選項:開關、加減控件、標簽欄、分類、狀態切換等,操作之后只針對當前頁面做出屬性上的的調整,不涉及流程的變化。

           

           

           

           

           

          2.視覺樣式上區分-橫向區分

          視覺呈現上有所區分,在不同的頁面可能存在同等級的權重

          常規型按鈕:常見的按鈕,在同一個頁面出現多個常規型按鈕時,有主次之分。

          虛線型按鈕:常用于添加、上傳等操作。

          文本按鈕:僅用文字作為觸發點,部分會用主色、右側箭頭、下劃線等方式。

           

           

           

           

           

          3.層級區分-縱向區分,層級上劃分為高、中、低三個等級

          高權重:帶有填充色的主功能操作按鈕,當同一個頁面存在多個按鈕,只允許存在一個高權重(主操作)按鈕。

          中權重:帶邊框輪廓的按鈕,同一頁面可存在多個中權重的按鈕。

          低權重:文本按鈕,圖文按鈕、圖標按鈕,同一頁面可存在多個低權重按鈕。

           

           

           

           

           

          四、按鈕的狀態

           

          1.按鈕交互樣式

          是設計過程的重要組成部分,在不干擾界面視覺的前提下,對每個按鈕的樣式、狀態有清晰的定義,與其他元素布局區分開來。

          待激活狀態:需要完成規定業務流程的操作、或滿足一個以上必要的前置條件后才允許交互。

          正常狀態:按鈕的正常狀態,可正常進行交互操作。

          點擊狀態:按壓效果,表示按鈕正在進行交互還未結束,交互完成后,即會引發此按鈕的真實事件。

          加載狀態:產生交互后沒有立即執行、或系統需要一定的時間才能執行完成。

          禁用狀態:暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能操作此按鈕 。

           

           

           

           

           

          五、按鈕的尺寸和風格

           

          1.按鈕尺寸

          PC端設計按鈕時,注意到鼠標的點擊精確度高一些,通常我們會將按鈕設計的小一些同時也能讓整個界面看起來更加細膩,只要不影響操作,36px~48px 范圍內的按鈕是比較常見的。
          移動端的按鈕設計,我們要更多的考慮到物理尺寸,即手指(指尖)在操作的時候需要占用的實際范圍。

          標準參考:設計規范中,將按鈕的最小點擊區域規定為 42pt/84PX,一旦小于這個數值,操作時就會出現精準度較低的情況,導致操作失誤或無效。

          文字按鈕:文字按鈕,自身可視化面積較小,所以我們要在操作熱區上做規劃,熱區大于文字按鈕可視化范圍,方便用戶操控。

          費茨定律」告訴我們「目標尺寸越大,移動至目標所花費的時間就越短」,所以在滿足手指觸控范圍的同時,還要根據所對應功能的權重占比來適當調節按鈕的大小,當某個元素的尺寸越大就越吸引眼球,就更容易被視覺捕捉到,也更容易被「點擊」,精準度被降低的同時,也減少了用戶的操作成本。
          我們以8像素柵格系統、iOS的2倍圖為例,較為常見的有:小型-64px、中型-80~88px、大型-98px、超大型-隨機這四種按鈕。

           

           

           

           

           

          2.按鈕的風格

          設計風格常見,例如扁平化、微質感、擬物化、新擬態(概念)...

          扁平化按鈕:填充色平鋪風格,沒有多余的視覺干擾,這種類型的按鈕一般在應用中用的最多,例如:工具型應用、B端應用等。

          微質感按鈕:填充漸變色基礎上加入淺淺的投影效果,保持了信息內容的簡潔、同時讓用戶產生更強的點擊欲望更加耐看。

          擬物化按鈕:設計的很立體,3D效果、屬性樣式豐富多彩,參考現實世界中的事務或攝取應用場景中的某些元素,使其更加逼真,有較強的代入感。例如:游戲類應用、H5專題、運營banner等。

          新擬態按鈕:風靡一時的風格,目前只有少數工具類應用使用了新擬態,例如:計算器、AI設備控制、有道云筆記等。

           

           

           

           

           

          六、容易被忽略的細節

           

          1.主/次操作層級分明

          頁面出現多個按鈕時,只允許存在一個主操作按鈕,其他不做特別設定如果次要按鈕/操作較多,也不益過多的出現次級按鈕,可根據權重降級處理,以小圖標或文字按鈕的方式呈現。

           

           

           

           

           

          2.統一樣式

          主/次操作按鈕要統一樣式,用戶需操作時,盡可能的減少其思考及選擇時間按鈕應該迎合用戶固有認知及慣性思維,節省時間成本,提高操作效率。

           

           

           

           

          3.圓角的值

          常見的按鈕還是以「小圓角」和「全圓角」居多,也有部分按鈕「直角」需要根據產品的行業屬性與氣質來選擇最合適的圓角類型,盡量避免大圓角(卡片圓角除外),按鈕外形要規整統一不可以出現不方不圓的奇怪樣式。

          小圓角:小圓角按鈕的圓角值通常控制在高度的1/5、1/6,根據按鈕的尺寸大小,直接將圓角值固定在 4px(目前使用)能減少設計組件的數量也利于開發做組件封裝后續調用。

          全圓角:全圓角按鈕的圓角值固定為高度的1/2,或者在軟件的圓角設置中直接將數值拉到極限。

          直角:不設圓角值,在PC端較為常見,也有部分較為嚴謹的移動端應用使用直角按鈕。

           

           

           

           

          4.按鈕中的文案

          按鈕中的文字要便于用戶理解,不能過于陌生或繞口,用戶碰到不易理解的信息會產生困惑甚至誤導用戶導致操作失誤從而造成損失,文字還需要言簡意賅,不能過多或折行且能合理的引導用戶完成操作。

          如圖:
          文案歧義就很明顯,想要挽留用戶,刻意將主次按鈕樣式對換,希望用戶操作不成功,那么用戶在需要取消訂單時就疑惑了,到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢?或許稍加思考,用戶也能反應過來但無疑增加了選擇難度、思考時間及操作成本。

           

           

           

           

           

          5.文字與按鈕的比例

          按鈕中的文字太大或太小都會影響用戶對信息接收的效率,比例需要適中文字太大會感覺很擁擠,沒有呼吸感,要給文字四周留下足夠的空間,同時文字太小會顯得小氣,看起來也會比較吃力,不利于信息接收。

           

           

           

           

          6.按鈕與其他組件的區分

          按設計好按鈕組件之后,頁面中的其他組件或元素要與按鈕有很明顯的區別避免讓用戶產生不必要的誤解。

           

          7.彈窗主/次按鈕的位置

          在彈窗中,主按鈕是在左?還是在右?這是一個爭論不休的問題,在移動端的彈窗設計中,主按鈕靠右就行了,不一定絕對正確,但絕對不是錯的,根據調查數據顯示,單手使用右手操作手機的用戶比左手操作手機的用戶量高且用戶也有一定的意識,左側為上一步、右側為下一步,頂部左側為返回右側為保存或確定。

           

           

          8.無障礙設計

          可操控性是按鈕設計最重要目標之一,不僅要樣式統一,還應符合用戶的認知讓用戶能快速知曉這個元素能否點擊?如果將按鈕樣式設計的與用戶認知有較大的偏差,不易于用戶理解。

           

           

          9.減少使用禁用按鈕

          按鈕設計中,大部分都需要用戶完成一定任務之后才能正常操作下一步按鈕在完成之前,需少用禁用按鈕,在前面有講到「待激活狀態」,即在按鈕中填充淺淺的主體色等待用戶完成任務激活。
          通常系統默認不允許操作或存在時間限制會用到「填充為灰色的禁用按鈕」即便如此,也要盡量讓系統將其隱藏萬不得已的情況下需要在按鈕附近說明情況,以免使用不當引起用戶的負面情緒。

           

           

           

           

           

          七、總結上述內容

          對于設計師來說,按鈕作為設計組件之一,有很多細節容易被忽略,我們需要對每一個細小的元素進行深入思考無論任何大小組件,都需要做到精益求精,才能給用戶帶來更好的使用體驗,那我們該如何實現按鈕的正確使用方法?我們總結了20條把按鈕設計到最好的建議,我們一起來看。

           

           

          八、設計好按鈕的20條建議

          按鈕在產品界面中是非常重要的元件之一,按鈕作為用戶引流和行動觸發來說都是至關重要的,如何把按鈕設計做到最好,是設計師需要不斷探索的問題,把控好每一個細節才能讓每一個元件更精致,我們梳理總結了 20 條在設計按鈕時需要避免的問題,把按鈕設計做到最好。

           

          1.按鈕設計強弱表現

          在整個產品設計中我們要根據信息傳遞的優先級對按鈕設計進行主次區分,設計表達要有強弱差異按鈕設計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異,不同強弱的差異表現出按鈕的等級:行動觸發主要、次要、輔助、禁用等。

           

          2.圓角設置要合理

          對于按鈕邊框來說,我們通常采用全圓角和小圓角居多,這樣顯得穩重大氣。而大圓角按鈕并非不可用,只是相對較少,會顯得按鈕不方不圓的,設計表現顯得不夠成熟,全圓角的圓角值等于按鈕高度值的一半,而小圓角的圓角值我們通常控制在 1/4H(高度值的四分之一)以內。

           

          3.投影設置要用對色彩關系

          給一個有彩色系按鈕設置投影時,選擇無彩色系(比如黑色)也能達到效果,只是為了得到更好的視覺效果,提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色,這樣得到的效果會顯得更加干凈清爽。

           

          4.投影的使用勿過度泛濫

          雖然投影的運用可以使按鈕更有層次感,但是也需要根據具體情況慎用,比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度,使得按鈕配色環境顯得不夠干凈清爽。

          5.給按鈕文字一點呼吸感

          按鈕文字和邊框的設計要預留一定的留白,不要做“舍不得”的設計,使得按鈕給人感覺很擁擠,看看文字大小和負空間之間是否存在某種比例關系,找到這個比例關系運用到按鈕設計中,可以給按鈕賦予生命具有呼吸感。

           

          6.按鈕設計別讓用戶思考

          按鈕的存在是為了引導用戶進行引導式操作,而不是讓用戶對其產生困惑,按鈕設計別讓用戶思考這是啥,是否可以點擊,需要簡潔明了的對此操作進行指引,用戶已經養成對按鈕外觀和功能的行為習慣,如果你設計的按鈕樣式與“標準”差異太大,用戶就會產生疑惑,影響使用體驗。

           

          7.樣式表達的一致性

          當設計元素規范統一時,用戶操作過程中的理解成本最低,一致性也因此成為最有力的可用性原則之一,我們在設計按鈕的時候要注意樣式表達的一致性,比如:按鈕形狀、色彩定義、風格特征等,這樣會使得我們的設計可用性更強。

           

          8.箭頭運用不是字符輸入

          直接字符輸入形成按鈕內部所需箭頭,這樣的表達方式自然顯得粗糙些,箭頭要當成圖標來進行設計,控制好箭頭的粗細和文字筆畫的粗細值接近,這樣顯得更有細節和態度。

           

          9.按鈕設計主次分明

          通過信息對比才能形成主次之分,按鈕設計需要在風格上進行區分,達到層次結構的視覺提示,主要的按鈕需要和次要的、輔助的形成差異,最大化突出主按鈕的視覺效果,更好的引導用戶根據設定的軌跡進行操作。

           

          10.按鈕設計不要讓用戶誤解

          在整個項目設計規范中,我們需要避免讓用戶把非按鈕狀態的內容進行誤判,在確定好按鈕樣式特征之后,不要在其它場景運用其樣式特征或者類似的風格特征,這樣會讓用戶產生錯誤的認知,因而進行無用的操作。

           

          11.按鈕文本表達要言簡意賅

          在進行按鈕文本思考的時候,盡量減少字符和單詞的數量,內容表達言簡意賅,只要能夠準確傳達信息識別度即可,有時候也不一定需要文本,圖標可以傳遞的信息可以考慮文本的減少也許可以讓界面的呼吸感更強。

           

          12.按鈕文本設置切勿換行

          單行文字的可讀性更高,如果出現換行就會降低可讀性,我們在設計按鈕的時候,確保文本內容在一行之內顯示如果設計空間不足要考慮文本內容的精簡。

           

          13.特殊場景要靈活轉變

          底部按鈕的運用并非固定不變,不同機型或者特殊場景的考慮需要靈活轉變,比如 iPhone X 等類型的機型,由于底部需要預留主頁控制器的位置,所以在設計按鈕的時候需要考慮上中下的過渡銜接,這樣才能帶給用戶更好的感官體驗。

           

          14.按鈕大小要便于點擊

          按鈕需要方便用戶進行點擊操作,如果用戶點擊失敗或者誤點到周邊元素,就會帶給用戶不友好的體驗。若是帶有文本的按鈕,只要文字大小不要小于極限值,通常實現出來的按鈕交互熱區都會滿足點擊需求,如果是純 icon 的按鈕,除了按鈕大小需要控制合適以外,也要確保交互熱區能夠滿足點擊區域要求。

           

          15.同屬板塊按鈕大小一致

          在同屬板塊內的按鈕設計,我們可以通過按鈕的強弱來體現層級關系,不要讓按鈕大小不一致這樣視覺平衡會受到影響。

           

          16.按鈕設計考慮文本最大值

          稍微注意細節的設計師也不會讓文本的長度超過按鈕寬度,這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的,幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候,要根據最佳的視覺效果設定一個最大值,不要任其無限制發揮,這樣會使得最終的視覺效果大打折扣,甚至影響用戶感官體驗。


          17.保持按鈕可讀性

          按鈕設計需要考慮在不同環境下的適應度,確保用戶可以一目了然的發現它,現在很多產品都適配了深色主題模式,按鈕的配色不能只考慮白色或者淺色背景下的運用,需要考慮大多數背景下的適配。在進行色彩選擇的時候始終保持按鈕與背景的高對比度和可讀性。

           

          18.按鈕去文本是否合理

          關于按鈕文本的設置需要結合信息傳遞的識別性和準確性,雖然純圖標顯得設計簡潔大方,但是需要考慮圖形是否可以準確的表達其含義,不會讓用戶出現誤解或者錯誤的認知。所以,按鈕去文本需要根據文案代表的含義來判斷,如果不需要輔助解釋也能判斷出按鈕的意思,那么更為簡潔的設計表達效果更佳。

           

          19.正確判斷按鈕顏色選擇

          色彩在設計中是最直觀的體現,不同的顏色會傳遞不同的性格,帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發揮,需要結合品牌色和輔助色作出判斷。
          通常比較統一的標準是采用品牌色作為大部分按鈕的顏色,遇到一些需要差異化的按鈕會選擇輔助色來表達,紅色或者橙色多為行動刺激作用,不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用失效等屬性,需要酌情選擇。

           

          20.按鈕位置結合用戶體驗

          引導用戶作出選擇的按鈕應該放在左邊還是右邊,根據操作系統的不同也引起了設計師們的爭議。比如 Windows 系統習慣將確認按鈕放在左邊,而蘋果系統卻選擇了放在右邊,用戶運用系統的習慣會影響其行為的適應度。不過要是在移動端個人傾向于將引導用戶作出選擇的按鈕放在右邊,更有利于用戶點擊。
          有時候為了防止用戶誤操作,我們會將確認操作的按鈕放在左邊,通過助力設計讓用戶再次確認。所以,一方面我們要結合操作系統的習慣,另一方面也要結合用戶習慣,將按鈕放在最合適的位置,便于用戶操作。


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

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

          微交互:提升產品用戶體驗的魔法鑰匙

          天宇 交互設計及用戶體驗

          在我們使用的產品中,多多少少都會有一些微交互的穿插,但由于微交互性能的不搶眼也不明顯的條件下,所以往往會被很多設計和開發人員所忽略。

           

          微交互的轉型

           

          但在一個優秀的產品中,微交互卻是必不可少的重要關口,它直接承載著用戶在使用產品時對產品細節的細微體驗。雖然在互聯網產品早期,微交互曾被人稱之為是“很炫酷的特性象征”,但時隔今日,在這百花齊放的產品大環境中,其實微交互已經慢慢從膚淺的炫酷轉型為附有內涵的用戶體驗關鍵要素了。

          作為產品細節體驗的重要承載,微交互的價值與地位逐漸提升,在用戶使用產品過程中,它不僅僅能促進產品與用戶的互動性,而且還能激發用戶對產品的積極感覺,并且最終影響用戶的整體行為。

          什么是微交互

           

          微交互的基本概念就是指:關注一項主要任務、一個目的得事件過程。通常情況下,微交互需要關注得是這個事件的整體交互過程,并且它存在的目的也是為了讓用戶在使用產品時能感覺到順暢性、一致性,并產生心理的愉悅感,從而讓用戶喜歡產品,愛上產品,從而留住用戶。

           

          如果籠統概括的話,可以說微交互幾乎會遍布任何設備、任何應用程序中。并且他們存在的價值就是讓用戶高興。就單純從產品說起,如果說在產品設計中,在大多數用戶與產品接觸時都能發現微交互的存在與應用。

          舉例

          1、你在Web看一段話時結尾展示是“…”時,那么通過你的心智程序,你就會下意識的將光標停留在這段話上,在這樣的情況下,微交互就會出現了,則在這段話的周圍就會出現這句話完整的展示從而被你瀏覽。

           

          2、還有一種常見的就是在你輸入錯誤的信息時系統會自動識別,并在末尾彈出消息提示,提示你需要從新輸入,更有優秀的系統會從你開始輸入時就跟進你的輸入狀態,時刻提醒你輸入的結果是否正確。

           

          其實這些小的視覺暗示和微妙的指示就是所謂的為微交互,也有人稱之為“圍觀互動”。雖然這些微交互平日不太容易能被用戶所直觀的發現,但也就是這些微小的交互,才能提升一個產品的整體用戶體驗。所以說,無論他們是多么的微妙,你都需要重視起來,并嘗試著將一般的設計方案和這些結合起來使用,并提供一些有效的信息,這樣才能讓你的用戶在瀏覽產品界面和執行操作時有基本的保障。

          知道了什么是微交互后,你還需要吃透微交互它到底是怎么工作的,只有這樣才能確保你靈活的使用微交互…

           

          微交互是如何工作的

           

          微交互的工作一般要分為四個基本要素:觸發、規則、反饋、循環。

          觸發

          觸發簡單講就是“啟動微交互”,例如:點擊按鈕或點擊鼠標。這里需要注意的是,觸發并不單純是人為操作的開始,它也同樣包含系統自動啟動的操作,比如說在你設備上收到一份郵件或短信時,這時的你其實并沒有任何操作,但系統就會有一個微交互啟動為你提示,這時的微交互就是被動的。

           

          這些所謂的啟動微交互,需要注意的是必須與一組已經擬定好的操作規則一起工作,這些規則里包含了什么能做,什么不能做的內容。

          規則

          微交互的規則就是表明用戶在操作后產品該如何按照用戶正確的心智程序進行微交互,它決定了觸發之后會發生什么事情。因此,當你在拉下界面時,產品的規則就應該包含下滑的規則,這同時也能表明用戶當時的心理是希望看到界面以上的結果或者下拉刷新看到更多新的結果。同樣,規則就是規則,在你沒有進行操作時,規則時而也在生效,例如:微信里對方并未添加你為好友,但依然和你說了句話,規則就是生效的,這里的規則就是阻止了信息的傳入。

           

          反饋

          顧名思義反饋在現實中就是你與人對話交流,對方饋贈你的信息,在產品中這個環節也同樣必不可少,它的存在可以讓用戶明確知道在用戶操作后產品發生了什么,出現什么結果的回饋信息。在微交互中,用戶看到的、聽到的、操作的、甚至包含感覺到的,都是可以反饋的。

           

          例如:

          1、看到的:希望打車,看到的反饋就是地圖和輸入起始地/目的地的界面,這就符合了用戶心理;

          2、聽到的:在與人聊天時,其他人也和你說了句話,就聽到手機“蜂”一聲,這樣的反饋就是提醒用戶聽到有新消息;

          3、操作的:在任何產品中都需要用戶操作,那么然后反饋用戶操作結果;

          4、感覺到的:這包含界面樣式、產品交互是否符合用戶心理預期,并通過預期實現操作后得到想要結果,這里面就包含感覺到的反饋;

           

          循環

          循環在微交互里屬于次數的說明,在我們手機設置鬧鈴時就經??吹接刑嵝岩淮?、一周提醒等說明,這就是循環的微交互,循環的微交互基本上定義了交互的某種性質,它會告訴你隨著時間的推移發生了幾次,發生了多少。

           

          例如:在你去銀行自動取款機取錢時輸入的密碼,如果輸入錯誤,就會提示你還有幾次輸入,這樣的就是循環的過程,等于是在原地打轉,但當你成功進入后就會從這個環節進入到下一個環節繼續循環。

           

          說了這么多,我想你應該知道了微交互的工作方式以及流程,那么接下來要說的就是微交互需要在何時、何地以及如何才能正確使用了。

           

          何時、何地以及如何使用微交互

           

          1、界面滑動

          現如今產品幾乎都帶有滑動的交互,之所以滑動越來越多,是因為滑動交互可以清楚的展示給用戶行為操作路徑,而點擊確實短期記憶性的,當用戶想要開始滑動時,這是用戶操作前的準備,而當用戶正在滑動時,這是操作中的節點,這時滑動的界面就會隨著手勢的方向進行移動并告訴用戶界面即將去往哪里,下次想要找到該從哪里找的路徑,在操作結束后,微交互完成,這時操作后的結果,這一整套流程下來,通過短小的微交互,就能很清晰的告知用戶他在做什么以及他做了什么。

           

          2、下拉/側拉菜單

          下拉/側拉菜單就像產品某個界面內的一個抽屜,它里面包含了當前界面賦予的更多選擇,并且還能占據極小的空間,根據用戶的心智程序來講,竟然是抽屜就應該拉取,這才符合環境映射的條件。當前在產品設計內,幾何都包含了下拉/側拉菜單的微交互,例如淘寶的側拉菜單、美團的下拉菜單都是微交互的展示,在輕松點擊后,界面tab則下拉或側拉出一個抽屜,里面就包含了N多個附加選擇或者篩選器。

           

          3、引導頁

          對于產品的不斷迭代與改版,其界面一定會發生一些細微的變化,更有時功能會作為轉移,那么為了能更好的引導用戶的操作路徑,就需要用到一些引導頁,我這里說的引導頁并不是啟動頁后的大篇章引導,而是在半黑透明遮罩的同時,流出需要用戶操作的功能引導,在聚焦了操作功能上,賦予一些微交互,會加大用戶對產品的認可,包括喜歡新產品。

           

          4、操作反饋

          在用戶正在輸入一個列表菜單時,最需要的微交互就是即使反饋,作為產品首先應該賦予用戶的就是安全與人性,安全是指產品在用戶心理的懷疑指數多少,指數越低安全度越高,而人性就需要操作的了路徑與展示是符合用戶的心理預期的。安全與人性都可以通過微交互來實現,例如在建設銀行APP登陸前會出現安全掃描,在支付寶輸入了支付密碼后出現的結果符合了人性思維。

           

          5、卡片旋轉/淡化

          有些app會出現卡片類樣式的界面,并通過用戶的操作實現卡片淡化和卡片丟棄等微交互,這樣的微交互則更加具象了用戶的真實空間感受,通過與真實環境的結合,將用戶帶入產品,使用戶在使用產品時會有現實版的感覺。例如:陌陌的附近人卡片丟棄,網易音樂的音樂專輯封面淡化。

           

           

          總結

          微交互在產品內可以說是無處不在,雖然這些都是一些很小的細節,如果只是靜態展示可能并沒有太大作用,但通過產品與用戶的這種互動,變相交流,微交互在產品的整體體驗上就可以增加巨大的價值,這也可能是所謂的“宜家效應”吧,用戶在自己親手制作或行動時,才能賦予產品更大的價值感。

           

          好的產品必須擁有這種精心設計的標志,它不僅包含了對用戶的心智理解,更多的,是對用戶的一種尊重與情感抒發。



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

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

          情感化設計:打造APP中的魅力磁石,吸引并留住用戶的心

          天宇 交互設計及用戶體驗

          情感是我們生活中不可割舍的元素,UI設計師也開始在設計時添加「情感化元素」

           

           

           

           

           

           

          undefined

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           

           



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

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

          日歷

          鏈接

          個人資料

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

          存檔

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