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

          首頁

          幫你掌握網頁端交互創意 99% 的玩法!

          純純

          放眼過去大量同質化或跟風的網站風格,空有一副美觀的皮囊,卻少了些什么,為何不交互創新一下呢?具有創意的交互必然能使一副黑白的畫面瞬間點亮色彩。

          你可能想有創意的交互能為網頁帶來什么?

          挺多的,我舉例:一個連微動效都沒有的靜態網頁你進去后也就看見的這樣,那么如果這個網頁進去時,內容會有入場動效,你是不是馬上能感覺到這個網站有點兒東西,要抄起鼠標探索一番?換言之,好的交互創意甚至能讓你產生心流模式,你通過鼠標到處點擊,頁面上不斷的給出動畫效果,然后你收獲驚喜,最終促使你進行更多的嘗試。

          好了,說多了,就是希望為更多設計師提供設計思路或執行概念,幫助大家找到更多的創意靈感。

          首先了解 Web 端交互支持

          Web 端交互圍繞計算機為中心。主要涉及鍵盤鼠標兩類設備的交互,個別網站的產品可能會涉及麥克風聲音采集或攝像頭應用。

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          1. 鼠標允許的交互

          現在的鼠標可以支持更多功能,但是通常來講需要嚴格的考慮兼容問題,所以僅以鼠標左右鍵滾輪滾動以及光標映射選取為主;

          • 光標選中/hover
          • 左鍵單擊
          • 左鍵雙擊
          • 左鍵連擊
          • 左鍵長按
          • 左鍵按住拖拽
          • 右鍵單擊
          • 右鍵雙擊
          • 右鍵連擊
          • 右鍵長按
          • 右鍵按住拖拽
          • 滾輪滑動

          以上所有交互都可以根據實際場景進行設定,不過鑒于用戶習慣,一般不會用到快速的連擊交互以及右鍵的雙擊、長按或拖拽,這不符合交互手勢的舒適度或簡化易用的初衷。

          2. 鍵盤交互支持

          鍵盤支持大量的按鍵交互,除去一些全局的功能按鍵和組合快捷鍵,在網頁交互應用中常見的還可以分為以下幾種情況;

          • 數值、字母、符號輸入
          • 某個指定按鍵單擊/雙擊/連擊/長按
          • 用某個指定的或組合按鍵代表網頁上的功能
          • tab 鍵切換網頁選項
          • 用空格切換下一屏
          • 方位鍵切換選項或移動窗口視角
          • ESC 退出視頻或全屏查看

          在應用鍵盤按鍵功能的時候,除去那些作用明確大眾悉知的按鍵功能,其他的按鍵操作應該保證界面上有指引有提示。

          常見的交互動作組合

          組合的交互動作常配合不能簡單直接完成的任務,這里的組合指有兩個及以上交互動作完成的類型,復雜的交互動作盡量少用,且盡可能的為用戶提供操作指引,若非必要,費力不討好;

          • 鼠標左鍵長按橫向拖拽
          • 鼠標左鍵長按上下拖拽
          • 鼠標左鍵長按任意拖拽
          • 鼠標左鍵長按繞中心拖拽
          • 鍵盤方位鍵與鼠標點擊
          • 鍵盤指定按鍵加鼠標點擊
          • 多個按鍵組合使用
          • 指定按鍵配合鼠標長按
          • 指定按鍵配合鼠標長按拖拽

          組合動作主要分為以上 9 類,鼠標拖拽的組合動作通常會細分來應對界面場景的應用,例如通過橫向拖拽將一個豎放的圓柱物體旋轉起來,那么垂直的拖拽必然是沒辦法轉動起來的,而且左右還會決定拖拽的方向。

          交互影響的元素

          簡單來講,無非就是看得見的元素、聽得見的元素。聽得見的元素無非就一個聲音,講深一點,也就涉及一些音效的交互控制。而看得見的元素則會相對豐富很多,如果再次細分的話還可以歸為以下幾種情況;

          • 顏色(例如內容被選取時的顏色變化)
          • 文字(所有文字相關的樣式及狀態)
          • 圖形(所有靜態可見圖形的樣式變化)
          • 動畫(所有的動態內容或交互動效)
          • 按鈕(所有可操作的按鈕及多狀態呈現)
          • 控件(頁面中用于交互的控件元素)
          • 模型(所有可交互的三維內容)

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          1. 常見變化形式

          位置變化、透明度變化、角度變化、大小變化、形狀變化、顏色變化、翻轉效果、特效變化

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          網頁交互的概念

          web 端的交互概念即觸發到呈現的過程。用戶可以使用交互設備進行事件觸發或變量,頁面則將內容進行對應的呈現。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉場切換“構成。

          頁面內容呈現通常分為“默認時“、“選擇時“、“運行時”三個時態(鼠標短暫的點擊時屬于“選擇時”,若長按有內容影響則屬于“運行時”),因此在網頁交互的過程中,我們需要考慮好這三種完整的狀態時呈現形式,另外在考慮補充合適的動效進行過濾或信息反饋。歸根到底網頁的交互概念就是控制內容呈現罷了,這是網頁價值的本質。

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          Web 端內容呈現結構

          web 端內容呈現的結構應該算是頁面交互的范疇吧,其實上網頁的頁面并不只是長頁面的形式,實際上會有更多種結構可用。因為電腦顯示器更大的緣故,web 端結構上比移動端更加靈活,同時根據產品的性質也有需要考慮移動端響應式的需求,一般來講這些頁面結構可以分為以下六類:

          1. 上下長屏滾動結構:通過長頁面布局內容,頁面滾動查看信息
          2. 全屏上下切換結構:每次定焦一屏的范圍顯示內容,通過滾輪或按鈕上下切屏
          3. 全屏左右切換結構:同樣是定焦一屏顯示內容,但采取左右切換結構
          4. 全屏頁面覆蓋結構:基于全屏定焦顯示,頁面通過覆蓋式切換或跳轉,甚至鼠標滾輪深入或淺出頁面。
          5. 自適應平鋪結構:適用于頁面模塊小而簡單的時候,直接將模塊在屏幕內一個個展開即可,一屏放不下時可以換行或繼續平鋪并定焦
          6. 三維場景結構:將內容場景 3D 化,通常導航或部分 UI 控件會在屏幕上固定,然后可以采取定向鏡頭伸縮查看,也可以是環繞中心與自由移動查看內容信息

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          網頁的組成區塊通常分為五大類型,即導航、面包屑、背景、內容呈現、彈出框。菜單導航欄通常分為頂部導航、側邊導航、底部導航、組合導航四大類,也有個別是通過點擊彈出的導航。內容布局則更是五花八門了,是板式與技巧的呈現了。

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          14 種視覺層創意形式

          個別產品本身也是創意的一部分,有一些可能界面交互平平,但是卻有著魔性或引人關注的產品內容。而這里整理了些比較典型的視覺展現形式和交互創意形式的案例,這些方式通??梢愿鶕a品的定位與特色進行組合設計和開發呈現,讓你的網站更富有創意和較好的視覺體驗;

          1. 幾何色塊搭配文案

          色塊搭配標題文案,簡約大氣有視覺沖擊力,再也不用擔心沒有圖片或插畫素材了

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          2. 精美大圖背景搭配內容

          采用精美大圖背景搭配文案或交互控件,精美的圖片本身就很搶眼,再搭配標題大字,瞬間就使得頁面有沖擊感有層次,常見于游戲官網或活動專題

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          3. 關聯插畫或圖標搭配文案

          采用小范圍的插畫或圖標來表達服務或產品優勢,搭配文案說明,風格統一精致耐看。常見于服務描述或產品說明模塊應用

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          4. 留白大圖搭配文案

          將某個產品或其他元素放大顯示再結合極簡的排版說明,有較好的視覺沖擊力和產品凸顯效果,同時留白保證呼吸感和減少視覺噪點,使得用戶能夠更加專注產品圖

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          5. 動態的背景或微動效裝飾

          應用動態背景或微動效的元素裝飾,有較好的內容吸引力或氛圍渲染力,可以展現更多的產品細節或豐富畫面層次感,不過也比較考驗視頻本身或動效裝飾自身質量

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          6. 點線面裝飾與文案排版

          應用簡單點線面元素去裝飾界面,再結合有對比有版式的文案排版。頁面簡潔美觀,適合簡約干凈少圖的頁面模塊

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          7. 柵格化應用與板式跳躍率

          應用柵格化與版式跳躍率,使界面整體充滿平面藝術,富有節奏感且不顯凌亂。在日本的網頁設計上有大量應用

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          9. 充滿個性的視覺裝扮

          采用卡通化、科技感、故障效果、毛玻璃效果、賽博朋克風、手繪插畫等視覺風格,來打造符合產品的特殊視覺效果,為網頁印象加分,提升品牌感染力

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          10. 引用 3D 視覺裝飾

          運用 3D 視覺搭建頁面場景,常見的有 3D 圖標、3D 動效或 3D 產品大圖等,有較強畫面立體感和表達能力,視覺新穎讓人眼前一亮,也是當前的一種視覺趨勢效果

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          11. 產品元素或其他元素來填充背景

          將品牌元素進行弱化處理后作為背景墻,凸顯個性和豐富畫面,結合微動效可以有進一步的效果增強

          12. 矩形陳列或卡片陳列

          將內容模塊用矩形陳列顯示或卡片陳列,Win10 菜單或 WP 系統的手機桌面有較好體現,特點是干凈利落模塊分明,適合同類模塊較多的場景進行排列顯示

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          13. 極致的簡約

          采用極簡的方式呈現內容核心,可以是一張圖一段字、一段文案排版等,總之就這么簡單的搞定了

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          14. 魔幻或神秘感界面呈現

          如示例網址一樣,魔幻且神秘,有著迷之吸引力和趣味性,不過需要慎用,比較惡搞。而適當給出一些神秘感,可以使得頁面內容更有吸引力,用戶更愿意去點擊嘗試。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          24 種交互層創意形式

          主要是關于頁面內容元素交互時的創意形式講解,這里不對交互動效或特效細節進行過多說明,因為怎么去動又或者用什么樣的特效去呈現實在數不清說不完,如果有興趣可以參考一下文中的精選案例視頻整理和提供的一些體驗合集地址。

          1. 光標跟隨動畫

          會使頁面上的元素根據光標的位置或移動產生相應變換,增加頁面的互動性與趣味,適用于裝飾或加強背景層次感,在特定的場景也可以使整套控制 UI 往鼠標移動的方向微微靠近,結合菲茲定律公式,距離的不斷縮減也能夠加快選中的效率)


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          2. 鼠標懸浮動畫

          簡單易用的鼠標懸浮動畫,用于聚焦顯示或 Tooltip 說明,常用與內容選中狀態區分或元素細節展示,加上一組好的動效創意非常能夠凸顯個性,使用戶感到驚喜為體驗加分


          如果是一個完整動畫緩慢播放完會更有敘述性

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          3. 鼠標點擊特效

          由鼠標點擊進行觸發,基本樣式即點擊狀態顯示,觸發后的特效可以是圖標動畫、光效、音效、界面動畫等,游戲場景中較為常見,點擊后不僅有光效反饋還有音效附和,這是一種觸發反饋效果。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          4. 鼠標長按特效

          當鼠標長按某個按鈕時持續出現的特殊效果,一般是持續鼠標點擊的特效或維持某個元素的變化效果,通常對數值持續增減動作較為常見,可以代替連續的點擊,交互更輕松。也或者是需要一定的加載時間所以用長按配合

          通過長按持續增加細菌圓點

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          5. 鼠標拖拽特效

          通過鼠標點擊長按某個元素進行移動的組合交互,一般用于拖拽移動、內容繪制、元素連接等。應用場景廣,互動性較高,能為用戶帶來更多的參與感和趣味性,甚至制造小驚喜

          示例內容:阿里內測的 Real 3D

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          6. 鼠標滾輪巧妙的聯動效果

          主要用于頁面某個值的控制或頁面滾動,在頁面滾動的時候可以配合控制元素變化來實現更具創意的展現效果,通常元素透明度、位置、大小、序列圖都可以控制


          國內官網

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          7. 鼠標選中自動展開

          鼠標經過選項時自動展開選項并聚焦,可以省去鼠標點開的動作,但不適用于選項內容較多且內容密集的場景


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          8. 按鍵與鼠標配合觸發

          通過指定按鍵和鼠標配合交互進行觸發,適用于同界面的復雜交互場景,且存在某些變量需要鼠標控制。如果你的網頁內交互豐富且包含變量元素,不妨試試看


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          9. 模塊或分頁加載動效

          在頁面滑動或分頁信息加載時,界面構成元素有序的緩入進場。采用流暢的動效演示數據加載的過程,緩解數據加載渲染壓力的同時,使得用戶可以更加從容不迫地瀏覽信息,讓界面呈現更加精致優雅


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          10. 趣味轉場或加載等候

          應用轉場效果與 Loading 動畫,運用某個元素變大覆蓋或頁面移動交替轉場,而非生硬的直接替換,使得頁面切換更有趣味和層級關系體現。再對加載較慢的內容補充 Loading 動畫,緩解用戶焦慮的同時還能延展品牌信息


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          11. 大圖或多圖輪播應用

          精美的圖片總是想要放大看,看了還想看。運用超大的輪播圖展示與沉浸式功能布局,滿足用戶操作與大圖賞析


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          12. 內容穿插滾動

          運用特殊的圖層順序結構,在頁面滾動查看時,形成奇妙的元素穿梭視感。通常會穿梭替換背景或讓元素接力,這樣相比靜態寫實的頁面滾動時會更有層次感


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          13. 內容自動生成

          輸入關鍵內容后,頁面自動生成結果進行呈現,整個過程可以是緩慢有序的,適用于降壓或畫面創意生成的產品,可以讓用戶感受整個過程與細節變化


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          14. 游戲互動模式

          將產品內容以游戲的形式或交互呈現,讓內容充滿趣味和互動性,使得用戶在參與游戲互動的過程中打破了常規的閱讀體驗

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          15. 三維或全景空間

          建立一個三維或者全景空間進行查看或操作,再賦予操作按鈕或說明,實現 3D 場景的交互與視覺效果,常用與地圖全景查看或 3D 游戲應用,可以巧妙的結合產品 3D 模型,打造非凡的互動體驗


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          16. 一鏡到底的視角呈現

          打造一個非平面的視覺場景。用鼠標點擊或滾輪聯動交互利用分層的元素變化,營造出由近到遠或由上至下的一鏡到底的視角穿梭體驗。界面場景切換更加自然,還有超強的空間感與趣味性,讓人難以忘懷如臨其境。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          17. 按鍵交互效果

          將某些功能或任務引用按鍵進行交互或觸發。常使用字母、數字、空格、方位鍵,界面需要有提示對用戶進行指導。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          18. 個性的模塊展現方式

          常見的有彈窗、抽屜、卡片展開、轉盤等,通過個性輕松的顯示結構與交互方式也能讓人眼前一亮。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          19. 可交互的顏色或圖形

          對一些顏色或形狀元素提供切換或 DIY 的空間,允許用戶進行意料之外的交互或配置能力,提升網頁趣味性或用戶個性化需求滿足。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          20. 音視頻媒體控制

          圍繞產品介紹的媒體內容,常見有視頻或音頻且支持基本交互控制,結合場景需求可以豐富交互的形式或更多媒體控制功能,例如長按快進、倒退、剪輯、混音等,常用于娛樂互動場景或音視頻類產品。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          21. 內容或窗口抖動

          通過抖動進行報錯或反饋,常見為密碼輸入錯誤時或游戲中受到傷害的場景,可伴隨音效提示一起。使用場景不廣泛,但是也可以進行創意應用,例如抖掉灰塵小游戲,長按元素抖動干凈為止。

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          22. 打造儀式感

          結合現實場景中的交互方式,打造相似的線上場景幫助用戶共情帶入,再配合交互和動效完成類似的動作,為用戶帶來儀式感和共情效果。

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          23. 有聲交互

          通過麥克風采集聲音來影響交互,是一種聲音的交互,如果網站支持,甚至可以語音交互,是一種少見的網頁交互形式,并非傳統的音視頻控制而已。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          24. 鏡頭交互

          通過攝像頭授權獲取鏡頭畫面進行交互,通常是一些鏡頭濾鏡效果或者增強現實技術結合做交互創意,網頁上少見新穎。


          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          網頁創新設計的方法

          找對方法去創新很重要!在實際工作中,我們不僅要衡量界面設計與交互效果,同時還要兼顧開發資源、實現難度以及產品架構本身考慮。對此我們也需要了解一下開發實現的概念,之后再研究如何進行創新設計。

          1. 開發者的痛點與解決方案

          在進行創意設計時不考慮開發,那不是自嗨就是對開發耍流氓。靜態界面開發或簡易的切換效果并不難。而代碼層的圖形變化效果、仿物理效果(例如反彈、律動、重力等效果)、3D 交互效果相對會復雜許多。大多的動效不能依賴 GIF 或 Lottie 進行解決,這對交互控制或性能優化都是挑戰,而代碼能夠更好的保障這倆點,所以大量的交互動效還是需要開發者支持,而代碼實現顯然會比設計師產出復雜。

          那么如何解決呢?

          CSS 進行實現,部分動畫元素可以由設計師通過第三方軟件或在線生成 CSS、Svga、lottie 文件(相對下 lottie 更消耗性能,在線生成 icon 動畫代碼: https://loading.io/ ,在線 Lottie 模版搭配使用: https://design.alipay.com/emotion ,自主繪制導出 lottie: http://airbnb.io/lottie/ ,Svga 在線創造: https://www.svgator.com/ ,2D 動畫制作: http://zh.esotericsoftware.com/ )。而大部分的特殊物理效果或特殊動效,其實會有可用的第三方庫或代碼資源來解決,首先就是保證你所設計出來的動效是可行的,過于逆天可能還是有難度,剩下的便是提供動效關鍵詞方便開發查找相關資源,或者你給出參考來源。常見的代碼動效素材網有: https://hakim.se/ 、 https://www.17sucai.com/pins/33749.html 、 http://www.sucai58.com/tag/2408.html 等(歡迎補充哈,別藏著掖著)。對于 3D 效果的前端開發呢,暫推薦新開源的 Oasis 引擎或 Three js 這些來實現,當然其他引擎也沒問題。2. 網頁創新設計的策略考慮

          考慮到創新開發的背景情況不一致,這里我提供了一些創新研發的策略提供參考:

          傳統改版:

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          1.明確改版目的,挖掘價值點

          會議說明,清楚改版需求的背景與痛點,挖掘價值找到設計發力點

          制定改版目標,明確分工計劃,同步項目情況

          2. 構建原型框架,評審優化

          設計新版架構,確認范圍層細節(功能型:功能規格支持。信息型:內容需求),完善流程與信息框架,然后拉攏項目相關人員進行評審優化,直到新版框架大體定型后,再進行視覺層輸出

          3. 明確產品定位,建立設計語言

          要保障產品氣質與視覺風格的契合,即一個資訊網站肯定不適合采用電商視覺進行輸出。然后根據內容占比,考慮呈現的布局方式,即不同模塊中的視頻、圖片、文字比例情況。然后你可以結合上文的視覺層創意形式進行套用,當主要的靜態視覺設計完成后即可進入評審階段

          4. 高保真評審,挖掘交互創新點

          對網頁高保真進行評審,確認頁面信息框架或界面設計可行。然后對交互創新方案探討,結合網頁的板式設計,提出交互創新的細節,與開發者同步,確保實現的可行性與項目工時可控,同時披露交互細節幫助開發者進行調研或準備

          5. 交互創新對齊開發,進入研發階段

          準備提供交互的細節 Demo 或參考內容,在基礎內容開發完成后或開發者認為適合介入的時機,進行交互創新內容的對齊,使創新方案在最小可行的基礎上進行開發實現。之后建議設計同學耐心的陪同開發小哥進行還原,確保效果

          6. 測試驗收,預發上線

          最后進行成果驗收,確?;镜膬热菔欠穹蠘藴?,再根據工時情況或上線計劃等,考慮交互創新部分的細節還原調試,適公司實際情況可以考慮再迭代一版。之后根據產品情況自行考慮是否 A/B 測試、灰度上線等,上線后就是線上數據跟進或用戶調研了,希望你的新版本收獲一片叫好 哈哈

          敏捷開發:

          對于想要敏捷實現目標的話,可以采用谷歌沖刺法(Google Sprint),當前基本分為六個階段進行,分析理解階段、定義階段、發散思考階段、決策階段、原型產出階段、測試驗收階段。這里我結合交互創新的方法,對多個階段進行了補充,內容如下:

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          1. Understand 理解

          明確建站目的、需求背景、梳理業務或用戶需求。通過用戶研究或競品分析等手段,更好的理解產品、行業現狀以及痛點機會,也為后面階段提供可靠的依據或支撐

          2. Define 定義

          基于對此次建站需求與背景深度理解,定義產品設計目標,挖掘價值點

          3. Diverge 發散

          讓參與者們集思廣益,發散思考,將不同的點子記錄下來,最好圖文并茂的畫一下,然后形成自己的方案。在這個過程中不必共處一室,獨立進行即可,這樣可以避免被帶偏或擾亂

          4. Decide 決策

          方案決策環節,產品經理、設計師、開發小哥等將各自的方案進行展示說明,這個過程中不要急著評價對方,只要投票選出最佳方案即可,這是一個方案的根基,之后再進行優化和細節完善

          5. Prototype 原型

          建議先將方案框架進行原型繪制或 demo 產出,然后經過一輪初步測試評審后可以再次優化復盤。在原型繪制的過程中,主要是確認流程與信息框架,不必著急視覺層的問題。若準備進入視覺設計,則可以帶入這幾個問題進行思考;

          • 了解框架結構,采取合適的布局方式(參考上文)
          • 明確產品定位,挖掘符合產品氣質的設計方案(制定初步的視覺規范)
          • 根據產品屬性,頁面內容類型選取合適的視覺創意形式(可參考上文)
          • 靜態頁面基本確認的情況,添加交互創意畫龍點睛(網頁內容呈現是核心,所以交互創意放在后面考慮,確保項目最小可行性優先)

          6.Validate 驗證

          首先通過內部自測優化,再根據產品類型考慮是否找利益相關者進行可用性測試驗證,或者找專家做顧問。之后再進行下一步的優化完善即可

          網頁框架如何搭配創意形式

          也許講了這么多,你還是不知道前面諸多的創意方式怎么用,沒關系,這里我進行了簡單的整理對標,希望你看完還有救!

          1. 明確產品定位

          網站本身即視為一個產品,一個產品的風格定向一定是由產品本身屬性或用戶屬性影響,了解產品定位或目標用戶也是重要的環節,這些環節可以制定更符合產品或用戶的信息框架或視覺表現。通常我們可以將網站類型分為企業官網、品牌官網、營銷官網、門戶網站、論壇相關、綜合網站六大類,這里簡單講一下這些網站定位與視覺特征;

          1.  企業官網風格較為莊重正式,個性化體現少且相對板正些;
          2. 品牌官網內容是多元化的,視覺與交互都更具個性化,沒有太多表現限制,傳遞品牌優勢或能力為主;
          3. 營銷網站更加體現產品或業務能力,并且都有相關咨詢或消費入口,圖片插畫應用不會少;
          4. 門戶網站是指提供某類綜合性互聯網信息資源并提供有關信息服務的應用系統,內容多緊湊型;
          5. 論壇相關又稱 BBS,是聚集用戶進行資訊、情感、娛樂等領域的電子公告系統,導航多,偏資訊;
          6. 綜合網站,內容結構更豐富,如企業營銷品牌一體化,通常是產品營銷做核心,圖文搭配干活不累;
          2. 信息框架決定板式細節

          通常一個網頁怎么設計版式、如何調整布局結構、調整基礎交互,都是需要參考原型的信息框架。信息框架中的元素情況會直接影響視覺輸入和基本交互。如信息框架中有很多圖,那么設計時就需要考慮是平鋪直敘還是輪播顯示。

          信息框架設計學習:《Web 信息框架》

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          那么關于不同的信息架構有什么好的布局方法嗎?這一點通過內容的搭配形式,整理了幾種方式供參考:

          文の處理:

          通常一個純文本的界面是很難設計的,因為過于單調,對此可采用

          • 幾何色塊進行搭配,配合字號對比形成沖擊力
          • 點線面裝飾,標點符號箭頭等都可以合理運用
          • 利用板式跳躍率排版,有大有小有節奏有對比
          • 補充插畫搭配文案,采用小范圍插畫彌補單調
          • ……

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          圖の處理:

          純圖片的形式不多見,但是不能否定,一般可能是圖本身有一定的信息傳達,或者是圖片瀏覽類型的服務

          1. Banner 走馬燈的形式進行大圖輪播
          2. 大圖展示加預覽切換控件
          3. 非全屏圖片展示,配合 hover 狀態提示切換,或屏幕上顯示切換按鈕,適合全屏布局
          4. 圖片響應式陳列排放,鼠標懸浮選中時進行聚焦放大
          5. 環繞顯示,通過鼠標拖拽或按鈕切換聚焦對象
          6. 多張圖可陳列擺放或通過大小對比疊加擺放,也以柵格化錯位擺放,再適當的配合切換控件

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          圖文の處理:

          少量圖文配套是比較好處理的,手法也比較多,根據配套數量情況還可以調換位置形成錯位區分模塊

          1. 大圖背景鋪滿加遮罩文案,控件與內容少可采用全屏切換的頁面交互
          2. 圖片摳圖加文案左右排版,注意留白。多組可左右調換位置往下排布,或者使用不同的背景色分割
          3. 圖片陳列分割或多個橫向排布,文字可以在圖上下方擺放或圖內加遮照顯示,也可以鼠標懸浮聚焦時顯示
          4. 小圖片配合加大文案疊加顯示,突出文字,圖片為輔

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          視頻の處理:

          視頻的處理分為自動跟手動控制,自動即作為背景自動播放,可進行簡單的切換,手動則要注意相關按鈕布局和顯示遮擋問題

          1. 視頻封面配合播放按鈕做入口,不用直接播放,入口可以更小數量更多,點擊后畫中畫或全屏播放都行
          2. 設定好視頻播放的大小或位置,給予封面以及播放按鈕提示,或者鼠標移入范圍顯示播放按鈕
          3. 單個模塊的多視頻交互最好給予切換按鈕,或者加以帶縮略封面的切換欄進行處理,以減少視頻模塊的占比
          4. 在能夠保證內容播放清晰的情況下可以多個陳列擺放,鼠標移入目標時可以直接播放達到視頻預覽效果

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          圖文視頻の混合:

          通常圖文視頻混合的情況很少見,視覺焦點不好控制,其中視頻做背景是最好處理的,但內容信息不易過多

          1. 視頻做背景,少量圖文或按鈕搭建頁面框架,確保視頻內容不被過分遮擋,也能較好兼容這些元素
          2. 在視頻未播放前,也可以疊加遮罩與相關圖文信息或按鈕控件,點擊播放按鈕后,收起即可
          3. 通過鼠標懸浮選中目標后,Tips 浮框顯示額外的圖文視頻信息或按鈕控件即可
          4. 小范圍播放視頻支持全屏,使得圖片文字視頻能夠在有限的范圍顯示更多有效內容
          5. 半沉浸式全屏視頻交互,采用幽靈式風格將圖文按鈕控件等往屏幕邊緣分布,留出核心區域交互視頻或觀看

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          三維の處理:

          因為是三維的場景,所以需要考慮到三維場景下的視角形式與操作方式

          1. 固定視角,有一個固定的場景和視角,可以通過交互使場景的內容發生變化,內容和操作可以輕量化
          2. 穿梭視角,通過交互場景中的圖或模型,形成向前后穿梭的效果,適合多層內容逐步查看或過程演變
          3. 自由視角,控制元素或視角在場景中自由移動,或者圍繞某個元素全景查看,適合細節展示或空間體驗
          4. 固定操作,指固定的操作按鈕布局或通過鍵盤控制場景變化,適合場景中效果簡易有規律的產品
          5. 三維操作,在三維場景中含有鼠標可以選取操作的元素,適合帶有場景元素互動、交互豐富的產品

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          按鈕の處理:

          按鈕是網頁中最常見的交互控件,是頁面扭轉或功能啟用的基礎

          1. 色塊按鈕,色塊式的按鈕,有視覺明顯易觸達的優點
          2. 線性按鈕,用于弱化顯示或透出背景內容時較為常見的按鈕樣式
          3. 鼠標懸浮按鈕,不直接顯示而通過鼠標經過相關模塊時顯示對應按鈕
          4. 元素按鈕事件,對圖文內容加上點擊事件,通按鈕使用,例如超鏈接

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          控件の處理:

          控件組適用于復雜場景的任務交互,通常由多個按鈕或控件單元組成,特點就是控件單元多模塊占比大

          1. 覆蓋式卡片,通過卡片承載控件,控件多了就用更大的卡片唄
          2. 幽靈式控件,線性樣式展示控件來兼容背景,并結合鼠標懸浮加強選擇樣式
          3. 為控件留白,留出控件交互的區域,通常采用留白或純色背景來陳列控件組
          4. 鼠標懸浮展開,結合圖標或直接隱藏,在鼠標懸浮選中時顯示相關控件詳情
          5. 展開收起式控件組,小面積顯示核心控件,配合展開收起按鈕隱藏更多
          6. 折疊按鈕與跳轉,通過按鈕入口觸發新的彈框,或者打開新的頁面來陳列控件組完成任務

          萬字長文!幫你掌握網頁端交互創意 99% 的玩法!

          3. 交互創意如何下手

          結合信息框架對不同元素類型進行視覺設計調整后,再對頁面內容的基本交互進行考慮,例如輪播、切換、彈出、展開收起、轉場等。之后才是更加細膩的交互創意思考。

          基本交互發力點

          鼠標經過反饋:常見且重要的交互方式,通過鼠標經過時反饋選中狀態或提示相關信息

          按鈕點擊反饋:在鼠標點擊后,按鈕或控件的顏色形狀變換效果,用于反饋點擊成功,實現眼手體驗一致

          按鈕長按效果:長按狀態的動效示意,通過對長按目標加動畫響應進度或持續的狀態,而非單純的變色或樣式切換

          完善 Loading 動畫:如點擊上傳下載更新等,出現對應進度條或 loading 動畫幫助用戶完善體感

          內容入出場動效:頁面切換加載或滑動頁面后,內容采取動效有序的進入場景定格,而非生硬的靜態切換

          多內容輪播應用:對 Banner 或其他多個內容展現,進行輪播交互完善和時間細節控制

          錦上添花交互發力點

          按鈕切換動畫:通過 icon 的路徑動畫表達按鈕切換,而非直接的圖標對換,更具個性和視覺觀賞性

          鼠標跟蹤動畫:可以適當的做一些鼠標跟蹤事件,讓一些背景或界面元素跟隨鼠標律動起來,增強互動

          特殊滾輪聯動效果:通過鼠標滾動聯動其他元素進行交互變化,來呈現更有創意的場景切換或內容展示

          內容穿插滾動:將內容分層控制,頁面滾動時將元素固定或交替顯示,產生穿梭感提升界面層次

          響應式展開收起:主要用于二級或下級內容的自動展開,由鼠標經過自動展開并聚焦,減少用戶操作

          結合音視頻媒體控制:在頁面中植入音視頻內容通過按鍵或鼠標進行交互或切換,打造互動性更高的媒體傳達

          趣味轉場或頁面加載:對頁面轉場或加載深度優化。采取更有創意的方式或動畫來過渡,讓視覺體驗提升億點點

          內容或窗口抖動報錯:合理采用抖動效果進行報錯反饋或特殊場景應用,使呆板提示更靈動

          可 DIY 的顏色或圖形:提供主題或模塊的 DIY 空間,滿足用戶編輯符合自己喜好的視覺效果

          結合產品的場景創意

          打造個性的模塊呈現方式:結合產品的應用場景打造有個性的呈現方式

          打造游戲互動的呈現:將有劇情有故事的產品或內容游戲化,可以讓用戶趣味互動更加深刻

          打造一鏡到底的轉場:結合鼠標滾輪聯動做鏡頭創意,突出產品細節或內容呈現

          打造三維或全景場景:根據產品屬性考慮用三維的場景來增強互動與突出產品

          打造儀式感交互:利用視覺和交互變化來制作符合產品的應用效果,實現儀式感線上體驗

          有聲交互:比較少見,視產品情況應用,可以使聲音產生互動或視覺影響

          鏡頭交互:適合有鏡頭針對性應用的產品采用,需要授權,要做好隱私說明

          補充按鈕交互觸發:在場景更為復雜交互需求更多后,進行的常規解決方法

          補充按鍵與鼠標配合交互:適合按鍵觸發且需要鼠標控制變量的復雜交互



          文章來源:優設   作者:泡泡bing

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          探討交互設計

          周周

          本文主要探討交互設計

          交互設計之探索GUI和VUI

          周周

          本文主要探討GUI和VUI的交互設計 。

          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量啊!如果和視頻播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王。灰色則表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通常可以通過一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。

          文章來源:站酷      作者:應駿

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          你好,我是《用戶體驗四維度》

          ui設計分享達人

          你好,我是《用戶體驗四維度》,一本關于用戶體驗的新書,今天正式上市了。


          具體內容方面,我選擇了聚焦于“人”——主要探討了人與界面、人與內容、人與人和人與品牌的交互體驗——大部分話題既有宏觀上的綱領,也有微觀上的實現細節。這四類交互體驗,下文的提及會使用簡稱,所以先看下簡稱及對應的全稱。

           

          HI X:Human Interface Experience,人與界面的交互體驗;

          HC X:Human Content Experience,人與內容的交互體驗;

          HH X:Human Human Experience,人與人的交互體驗;

          HB X:Human Brand Experience,人與品牌的交互體驗。



          下面把時間交給作者李瀟,由他來做一些分享。

           

          你好,我是作者李瀟。我主要分享兩點,第一點是這本書的來龍去脈,第二點是這本書的主要特點。

           

           

          01 《用戶體驗四維度》的緣起

           

          2019 年 7 月 15 日,我在個人公眾號上發表了第一篇設計類文章《淺談 Keep 的 UI 設計》,轉到朋友圈后有很多人點贊,也有朋友說寫得不錯,轉到站酷后也有很多設計師留言稱贊。算是一個還行的開頭,這給了我信心。

           

          之所以會寫公眾號,是因為當時我成立了一個個人的設計工作室,希望借公眾號的文章引來一些客流。之所以第一篇文章會寫 Keep,一方面是因為 Keep 比較知名,另一方面是因為我比較喜歡 Keep,也是 Keep 比較忠實的用戶。

           

          當時的計劃就是挑一些個人比較喜歡的、具有一定知名度的產品來寫,每款產品至少寫兩篇文章,一篇寫 UI 設計,一篇寫交互設計,或許還可以就產品功能再寫一篇。因為我分別從事過產品經理和 UI 設計的工作,同時也兼任過交互設計的工作,有這些方面的經驗。

           

          按照計劃,第二篇文章很自然地就是關于 Keep 的交互設計,不過名字是《淺談 Keep 的用戶體驗》。因為所寫內容已經超出了“交互設計”的范疇,而“用戶體驗”恰好是一個更合適的主題。這篇文章的反響依然還行。另外,有趣的是,根據使用感受,我發現 Keep 這個擁有課程和社區的運動品牌,它的用戶體驗可以用四個維度來描述,它們分別是:人與界面、人與內容(課程)、人與人(社區)、人與品牌。沒錯,這就是本書最原始的雛形了。

           

          再加上也有讀者朋友反饋說“用戶體驗的四維度”挺不錯,有啟發。于是第三篇文章就“拐彎”了——沒寫 Keep 的產品功能,也沒寫其他產品,而是把“用戶體驗的四維度”單獨寫成了一篇文章:《淺談用戶體驗的 4 個維度》。

           

          某種程度上,第三篇文章的反響好過前兩篇,因為當時有 3 個業內比較知名的公眾號(分別是 MicroUX、應謀鬼計、UXPA,在此向他們致以謝意)轉載了這篇文章,且有一名立志成為產品經理的大學生根據這篇文章的觀點寫了一篇分析 QQ 和微信用戶體驗的文章:《從微信與 QQ 的交互比較中談用戶體驗》。另外,當時在跟一些朋友聊起我寫公眾號的近況時,有兩位設計師朋友都提了句“可以寫書/出書”。

           

          不知說者是否有意,但是聽者有心,朋友的話更加堅定了我內心逐漸萌發的寫書的想法。第三篇文章之后,我就開始認真考慮寫書這件事了:首先,“用戶體驗的四維度”這個概念比較新,或許可以作為書的框架;其次,個人對用戶體驗非常感興趣,也就是對這個潛在的書的框架非常感興趣;第三,發在網上的文章,包括“用戶體驗的四維度”這個概念,反響都還行;第四,公眾號我是全職在寫,為了質量寫得很慢(平均兩周一篇 4000 多字的文章),時間成本已然很高,還不如再增加點時間成本來寫書。

           

          所以,是不是真的可以把“用戶體驗的四維度”寫成一本書?

           

          試試才知道。于是,在參考很多書的大綱以后,2019 年 8 月下旬,我就為“用戶體驗的四維度”列好了一個初步的大綱。

           

          之后發在網上的所有文章,也就是從第四篇開始,就是按照這個大綱來寫的。也就是說,我是先把書稿寫成了網文,這種網文的更新一直持續到第 2 章 HI X(人與界面的交互體驗)的尾聲,隨后斷更。因為那時已和出版社簽好合同了,按照約定,書里的內容不再發到網上。對于那些曾在網上追過我文章的讀者朋友,在此我要說聲抱歉,請見諒。

           

          順便說下書稿和網文的主要區別。歷經編輯的指導與建議、作者的反復修改、審校流程的打磨,與網文相比:

          一,書稿的邏輯與結構更加嚴謹、合理,內容和語言也比網文精簡;

          二,書稿更加體系化,相互之間(如 HI X 部分的根需求、功能架構和信息架構)盡可能做到了“環環相扣”,章節之間的起承轉合也更加連貫、自然;

          三,書稿在內容層面進行了一定程度的修改和優化,個別章節(第 1 章的四維度,第 2 章的根需求、功能架構等)則是進行了極大程度的修改和優化。

          四,書稿在產品案例和生活案例方面也進行了一定程度的調優。

           

          以上就是這本書的一個簡單緣由,接下來分享下它的主要特點。

           

           

          02 《用戶體驗四維度》的特點

           

          這本書主要有四個特點,它們分別是:追求深度、追求卓越、展望未來、兼顧大小。當然,我也很期待你去發現這本書的其他特點,包括它的缺點。



          1 追求深度
           
          無論是宏觀上的大綱(用戶體驗四維度),還是微觀上的具體內容(根需求、功能架構、UI 設計、HH X 等),本書都著力于深挖本質。
           
          先以根需求為例。在日常工作中,“需求”是一個高頻詞匯:大到上線一個大功能,小到改一下字體顏色,都被我們稱之為“需求”。面對大大小小、林林總總的“需求”,是不是有必要關注下根需求(本質需求)?因為根需求是一切需求的根本。如果根需求有問題,往往意味著用戶的根需求沒有完全得到滿足,那由此衍生出來的一系列大小需求都會有問題;如果根需求有問題,就意味著這個行業的類似產品,依然有機會,直到用戶的根需求完全得到滿足為止。所以本書就以幾乎人人都會用的資訊產品為例,比較深入地探討了兩類用戶(生產型用戶和消費型用戶)的根需求。
           
          再以 UI 設計為例。關于 UI 設計,最近幾年出現了一些“商業化設計”“增長設計”的概念,也就是說,UI 設計的肩膀上多了“增長”“商業化”這些擔子。這不禁使人擔心,未來會不會有新的擔子,繼續加在 UI 設計的肩膀上?另外,術業有專攻,職能亦有分工,這些擔子,UI 設計擔負得起嗎?我認為未必擔負得起。就像于動物的生命而言,心肝肺各有分工、各有貢獻,總不能讓心臟負責呼吸、肝臟負責跳動、肺負責造血。于心肝肺而言,做好分內的事情就是最大的擔當與貢獻;于 UI 設計、交互設計、信息架構、產品功能等而言,情況亦然。那 UI 設計的分內事是什么?是它的本質,這便是本書關于 UI 設計的探討視角。
           
          2 追求卓越
           
          在本書中,有些話題有嘗試深挖本質,有些話題沒有。不管有沒有深挖本質,最終目的都是落腳于“如何做到更好”,也就是追求卓越。
           
          以交互設計為例,在規劃它的大綱時,我嘗試過不同的切入點:大的設計原則(iOS Human Interface Guidelines, 尼爾森十大交互原則等)、小的交互細節(微交互)、設計哲學(3-4 個要點)、設計目的(人人喜愛)。仔細斟酌之后,我發現要想實現“人人喜愛”這個設計目的,“設計哲學”這個方法的可能性是最大的,而且設計哲學本身是足夠“海納百川”足夠“獨立成章”的,所以最終果斷摒棄了其他切入點,而只保留了“設計哲學”這個切入點。具體而言,這個設計哲學就是:周到,品質,驚喜,善意。想象一下,一個為人周到、能力(品質)卓越、時不時會給身邊人帶來驚喜、同時又很善良的人,自然會受到身邊人的喜愛。類似的交互設計,同樣會受到用戶的喜愛。

          3 展望未來
           
          內容“扎根生活”是本書的追求之一。但是當探討到目前面臨困境并存在諸多不足的話題時——比如 UGC 產品(HC X 部分)——本書則會更多地展望一下未來。
           
          UGC 產品面臨什么困境,存在什么不足?
           
          以文章類 UGC 產品為例:各行各業的從業者——比如教師和律師——都有自我充電(如看到本行業高品質的深度文章)的需求,這個需求基本上能在公眾號里得到滿足;但是,不管一篇深度文章的品質有多高,公眾號這個包含各類信息的平臺,都是像黑洞一樣將其“吞噬”和“湮沒”,而不是像書店、圖書館一樣將其“陳列”和“流傳”下去。再以極其熱門的短視頻類 UGC 產品為例:得益于簡單易用等諸多優勢,短視頻類 UGC 產品在“信息和知識的大眾普惠”(尤其是針對老年人)上做出了重要貢獻;但是,短視頻類 UGC 產品也存在一定不足,比如容易使人上癮、沉迷,比如上面的信息和知識一定程度上缺乏質量保障。
           
          未來更好,或更受歡迎和尊重的 UGC 產品,會是什么樣子?
           
          個人觀點,首先是簡單清晰的分類,也即 UGC 產品需要分成知識型 UGC 和信息型 UGC,前者以知識為主,后者會包含前者。實際上這個分類目前是存在的,比如站酷、人人都是產品經理、CSDN 等社區就屬于知識型 UGC,公眾號、B 站、抖音等平臺則屬于信息型 UGC。
           
          篇幅所限,這里僅說下信息型 UGC。以短視頻類的信息型 UGC 產品為例,雖然大熱,但也飽受爭議,甚至飽受詬病。什么樣的信息型 UGC,在廣受歡迎的同時還受人尊重,甚至受人喜愛?據個人觀察,有兩大類。一類是像公眾號這樣足夠多元的“真實世界”,另一類是像 B 站、Instagram 這樣在某些方面比較美好的“理想世界”?!罢鎸嵤澜纭焙汀袄硐胧澜纭?,值得所有信息型 UGC 來學習。

          關于信息型 UGC,怎么建立更多“真實世界”和“理想世界”?關于知識型 UGC,未來更好的產品會是什么樣子?這些問題,本書都嘗試進行了探討,以供參考。

          4 兼顧大小
           
          用戶體驗的四個維度,交互設計的設計哲學,知識型 UGC 和信息型 UGC,都是比較宏觀的大話題。本書不光有這些大話題,還有與之對應的關乎“怎么實現”的小細節。
           
          還以交互設計為例,周到的、高品質的、給人驚喜的、帶有善意的交互設計會受人喜愛,那交互設計如何做到周到、品質、驚喜和善意呢?自然而然地,本書就這四個問題進行了比較深入的探討。以“驚喜”為例,本書先是將交互設計的“驚喜”分為“小驚喜”和“大驚喜”,簡單給出了定義和示例,然后又就“如何做到驚喜”分別給出了針對短期(可以立馬實現,更適合“小驚喜”)和長期(需要長期積累,更適合“大驚喜”)的建議。
           
          于 UI 設計、信息架構、功能架構、HH X 等話題而言,也是同樣的或類似的寫作手法。


          分享完主要特點,接下來請允許我簡單介紹下這本書適合哪些讀者,供你參考。
           
          5 適宜人群
           
          得益于以上幾個主要特點,再加上本書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI 設計,也有更進一步的 HC X(人與內容的交互體驗)、HH X(人與人的交互體驗)和 HB X(人與品牌的交互體驗),個人觀點:
           
          本書既適合一線從業者(產品經理、交互設計師、UI 設計師等),也適合相關從業者(技術人員、運營人員、市場人員等);
          既適合創業者(“根需求”“功能架構”以及“知識型 UGC”“信息型 UGC”等部分或許會使你發現更多新的機會),也適合學生。
           
          希望你能在書中找到自己需要的、或自己感興趣的內容。
           
          以上就是我的分享,接下來把時間交給《用戶體驗四維度》。
           
           
          結語
           
          好的,謝謝作者李瀟的分享,讓我意識到我的出生似乎是個意外;也謝謝李瀟把我夸得這么好,但我還是要補充一句,他的夸獎僅供參考,一切以自己的切身感受為準。
           
          用戶即人,談用戶體驗,自然離不開對人的關注。人作為高級動物,自然有其強大和理智的一面;人作為動物本身——置身于高速發展的現代社會,置身于“亂花業已迷人眼”的智能化信息社會,置身于既相互溫暖也相互競爭甚至還相互“傷害”的同類中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


          是最堅強的人,是最脆弱的人   
          是最理智的人,是最敏感的人   
          固若金湯的人,語無倫次的人   
          不過,血肉之身   


           
          同樣作為人的互聯網從業者,在打造自家產品時,在兼顧商業化的同時,有沒有可能以更美好的方式去對待這一個個用戶,一個個血肉之身?
           
          我想這是一些產品正在面臨的問題,也是所有產品都難以回避的問題(用戶利益和企業利益難免會發生矛盾)?;ヂ摼W行業在中國的蓬勃發展,不過二三十年的歷史,所以相信這也是一個布滿荊棘、充滿希望的問題?!队脩趔w驗四維度》從根本上探討的,也正是這個問題。希望我的探討,能為你帶來一點參考或啟發。
           
          最后,謝謝你的時間。


          - -  The End - -


          實拍圖:

          undefined

          文章來源:站酷      作者:SonwDesign

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          設計師眼中的用戶體驗

          ui設計分享達人

          用戶體驗

          首先,我們先來了解什么是用戶體驗

          從字面上來說,用戶體驗就是用戶在使用產品過程中對產品的直觀感受以及評價

          這種感受非常的主觀,但又很容易影響別人對產品的判斷。這就是為什么某寶商家一直求好評,而某團騎手會為了好評跟用戶“大動干戈”的原因了


          名詞解釋

          • UI——User Interface,本意是“?戶界面”,但現在這個詞已經被擬人化了,即把那些做用戶界面的設計師們叫做UI

          • UE——User Experience,本意是“?戶體驗”,現在也變成了一個職業名詞,是指那些做用戶調研的研究員,比如用戶畫像、產品分析、競品分析等。有些公司把“交互設計師”也叫做UE,嚴格來說UE和交互是兩個職位,不過現在很多UE除了做用戶調研也會畫交互原型,所以混在一起也不奇怪了

          • IxD——InteractionDesigner,本意為“交互設計”,也就是交互設計師,現在也常常用UX(User Experience)來表示交互設計,用來跟UI進行區分。簡單來說就是幫產品畫原型的,實際上這個職位非常的關鍵,產品希望表達的邏輯,各個界面的跳轉與關聯關系,以及產品的可用性與易用性,都體現在交互上

          • UED——User Experience Design,本意為“?戶體驗設計”,現在常常表示用戶體驗設計團隊,基本上大一點的互聯網公司都有自己的UED團隊,甚至大的部門都有自己的UED團隊


          UED工作領域

          UED團隊要做的事情可多了,通常來來說主要坐下面的事情: 

          • 用戶研究

          • 產品分析

          • 交互設計

          • 產品設計

          • 視覺設計

          • 品牌設計

          • 插畫設計

          簡而言之,UED是以用戶需求為目標而進行的設計的團隊,通過團隊的經驗與設計能力給出設計方案,是幫助公司進行產品策劃的主力之一


          用戶體驗五要素

          說到用戶體驗,就不得不提用戶體驗五要素了

          現在我們所談論的用戶體驗的概念,其實最早出自一本叫《用戶體驗要素》的一本書

          《用戶體驗要素》--作者Jesse James Garrett,是美國用戶體驗咨詢公司Adaptive Path的創始人之一


          這本書出的其實比較早,英文版在2001年就出了,國內常見的是2010年出版的中文版第2版,書里的概念在互聯網設計界廣為流傳,非常值得閱讀


          當設計師在設計或重構產品,卻不知從何開始時,這時我們可以參考用戶體驗五要素


          用戶體驗五要素是一種產品分析與設計的方法論,他向教科書一樣指導我們從0到1設計一款產品。同時它涵蓋了一個產品從想法到落地的整個流程,這正是我們學習它的重要原因

          用戶體驗五要素由戰略層、范圍層、結構層、交互層、表現層等5個層級構成,由下而上像個金字塔的結構一樣,戰略層則是底部最堅定的根基,產品的起源也源自該層


          1.戰略層

          這是五要素的最底層,一般是公司負責人與產品總監、市場總監等高層之間的討論范圍層。這一層主要是確定產品目標以及用戶需求。比如:

          • 公司要做什么

          • 面向什么樣的用戶

          • 什么樣的解決方案

          • 公司的產品特色是什么

          • 競爭對手有什么

          • 將來的收益怎么樣

           

          值得一提的是用戶畫像需要在這一層定義出來。我們可以招募一些用戶進行訪談,然后為用戶分組,并結合用戶的需求確定我們的產品目標

          2.范圍層

          戰略決定范圍,這一層主要針對戰略層的需求進行更細致的分析,定義需求是什么,提出解決方案,同時要定要好需求的優先級

          3.結構層

          根據前兩層思考產品的信息架構,規劃任務流程,簡單來說這一層主要是產品PRD的輸出

          4.框架層

          頁面的具體功能擺放,信息布局,這一層主要是交互設計,輸出低保真原型

          5.表現層

          頁面最終給用戶呈現的視覺效果,這一層主要是視覺設計,輸出高保真視覺稿

          模擬案例

          作為設計師的你,接到了一個餅干公司的設計需求,公司希望你能幫他完成從產品到包裝一系列的設計,你該怎么去做呢?

          我們用用戶體驗五要素來整理設計思路:

          -戰略層

          • 先了解這家公司的產品需求和用戶需求

          • 產品需求:公司是個小型食品加工廠,主營是面包和餅干,有實體店也有網店,今年準備在圣誕節推出一款圣誕餅干

          • 用戶需求:用戶畫像是20-35歲的女性,喜歡看劇,喜歡網購,對可愛的東西沒有抵抗力。今年上映的一部電影叫《餅干俠》(虛擬)票房火爆,用戶都想買到劇中同款的餅干

          • 公司目標:希望圣誕前后一個月內盈利50w

          -范圍層

          • 分析需求:公司是做一款圣誕餅干,了解到《餅干俠》的原型是出自美國卡芙食品的一款餅干,并把它確定為競品并展開分析

          • 設計方案:列出一系列設計清單,包括品牌logo重新設計,食品包裝、網店圣誕裝飾、廣告宣傳圖等,給這些設計需求確定好優先級

          -結構層

          • 信息架構:進一步細化已列出的設計方案,輸出文檔或者設計規范,比如《品牌手冊》《食品包裝標準》等

          • 交互流程:進一步的用戶畫像與分析,收集市場同類型品牌調性,通過試用的方式整理出餅干的分類屬性,如口味、分量、包裝材質等

          -框架層

          • 從這里可以開始整體的、低保真的設計了,可以出一些比較具體的設計方案,目的是快速跟需求方進行評審,為后續的視覺設計作準備

          -表現層

          • 經過前面反復的溝通與評審,開始高保真的視覺設計,從產品包裝到廣告圖到物料,這里就是設計師們展示商品顏值,提升其商業價值的時刻到了

          • 最終產品上市



          文章來源:站酷      作者:Pison西歌
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          交互規范制定指南

          ui設計分享達人

          一、如何「理解」交互規范


          說起設計規范,大家應該都不陌生,一個成熟的設計規范對 產品設計、研發開發、用戶使用 都有著重要的指導作用:


          產品設計:保障產品內不同模塊的設計一致性,同時提高不同設計師間的設計、協作效率

          研發開發:通過定義的標準規范,提高流程、組件的復用率,提高整體開發效率

          用戶使用:讓用戶能夠在產品全局感受到統一且完整的體驗,降低使用成本和學習難度



          而一個完整的設計規范一般分成「視覺」「交互」兩個部分合并組成,在全局原則的指導下,側重不同的維度和內容分別展開規范的定義,最后再合到一起形成一份完整的設計規范。



          從用戶體驗要素來看,視覺主要是在「表現層」「框架層」進行規范的統一,主要包括:形、色、字、構、質、動 六個層面。



          而交互角度相對抽象,主要針對于產品的「結構層」「框架層」入手,定義統一的交互規范,指導頁面、流程搭建和組件使用規則。包括:全局原則、頁面布局、通用流程、標準組件、文案規范。



          整體維度呈“從抽象到具體的總分關系”,不僅對產品的各個維度都有具體的交互指導,而且不僅能保證長期使用,避免重復返工;同時也便于囊括后續的迭代內容。而這些內容,就是我們通常定義的交互規范,也是交互參與定義設計規范的發力點。


          有了對于基本認識和搭建框架之后,我們來詳細聊聊如何定義交互規范具體內容。



          二、不同階段應該定義

          哪些交互規范?


          產品有不同發展階段,設計規范同樣也有,不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多,保證投入產出比最大化;同時也要構建一個合理的規范迭代思路。


          產品探索初期


          該階段的產品核心目標是「驗證產品或商業模型」,業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態,存在著“先滿足功能,再優化體驗”的情況,導致該階段的產品體驗往往不太過關。


          搭建目的:通過定義原則,梳理關鍵頁面和流程,搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷;從頁面到流程,又能對應設計參照標準;同時業務可以在規定的框架下發展,不僅讓產品體驗的根基牢固,而且不會限制功能設計自由。


          搭建范圍:「全局原則」「頁面布局」「通用流程」


          產品穩定發展期


          該階段的產品基本形態已穩定,也形成了初步的模型結構。后續迭代是在現有結構的基礎上,進行增加或優化功能。雖然探索期定義了產品原則、布局和流程,但探索期產品的自由生長,會導致不少設計細節不一致,從而影響了產品整體的體驗和效率。


          搭建目的:通過回溯整理過往設計,沉淀優化成完整的交互規范。再根據規范統一產品體驗,進一步優化流程和效率, 讓整個產品體驗達到相對穩定的狀態。

          搭建范圍:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」



          三、如何「定義」交互規范


          3.1 定義交互規范的原則


          與行業通用的設計規范(如TDesign、AntDesign,文末領取騰訊設計系統源文件)“大而全”“通用”的特質不同,一般團隊內構建的設計規范都是源于某一個產品或業務,主要的特點是“專精”。專注于「業務」本身,主要是「團隊內成員使用」,追求的是投入產出比最大化。


          基于此背景,當我們在定義「交互規范」時,有三點原則:


          原則一:保持規范的業務性。設計規范既要貼合業務場景歸納完整,同時又要避免憑空定義脫離實際。故我們定義時要代入業務規劃,盡量富有前瞻性,這樣定義的規范不僅能覆蓋當前需要,同時后續也能更好地迭代。


          原則二:保持規范的專注性。有的放矢,明確內容優先級,避免盲目追求大而全和形式主義。對于優先級高(覆蓋面廣、復用率高)的關鍵內容重點描述;優先級低(邏輯簡單、認知一致)的內容可簡要描述,避免事無巨細降低效率。


          原則三:保持規范的生長性。設計規范不是一成不變,而是跟隨業務發展不斷迭代完善的,所以需要階段性的回顧規范。遇到規范未能覆蓋或無法指導設計的地方,及時修訂同步團隊,避免墨守成規,固步自封。



          最后,還有一點建議:在定義規范時,可以站在前人肩膀,適度參考行業設計規范,能復用用的直接參考,具有業務特性的再集合業務綜合考慮,使整個規范制定效率更高,科學性、指導性更強。


          在找到自己當前所屬的產品階段、明確要建立哪些設計規范后,具體應該如何進行落地執行呢?建議從以下4個步驟入手。



          3.2 第一步:定義規范分類


          如上文中提到,一個完整的交互規范分為:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」五個維度,但每個維度具體含有哪些內容,都是不一樣的。仍然需要根據實際業務需要去定義,這樣才能盡量保證沒有遺漏,也更好為下一環節評估工作量。


          通用的做法有兩種:


          方式一:整理業務場景下不同的頁面、流程等,并進行抽象合并?!溉衷瓌t」「頁面框架」和「通用流程」具有強業務導向,可以采用此方式。

          以「頁面布局」為例,就需要將關鍵頁面按統一顆粒度收集(按層級或按場景等)。



          方式二:參考行業通用規范的定義,先羅列完整,再根據產品實際業務需要進行增刪改。

          「標準組件」「文案規范」已經在行業內有了不少科學的目錄和沉淀,可以采用此方式,例如下圖組件的梳理。



          最后可產出如下圖的規范分類和具體內容。(可以列的不是很全,后續補充具體部分內容時持續維護這張表。)



          3.3 第二步:確定分工排期


          有了具體內容作為依據,便可以根據此進行排期分工。


          分工原則:推薦按規范分類進行分工,一個大的分類由一人負責,保證專注性。同時團隊交互最好都能參與,保證后續對規范更好的沿用。

          排期原則:「定義規范」和「輸出需求」兩者經常要并行處理,此時提高效率,控制投入產出比就很重要了,我們需要明確優先級,先做什么后做什么。有3個思路可以綜合參考:


          - 并行的思路:在定義完「全局原則」后,剩下的頁面、流程、組件、文案都可考慮并行定義,彼此之間沒有明確的依賴項。

          - 迭代的思路:近期有迭代的版本,如:即將改版的模塊、反饋較多體驗較差的模塊,其中涉及到的頁面框架、組件可優先定義。

          - 復用的思路:某些典型頁面、典型流程、典型組件涉及面廣,許多需求的設計都將借鑒參考,亦可優先抽象定義。



          3.4 第三步:統一撰寫原則


          設計規范是由不同的設計師一起合作完成,所以我們盡量在一開始,就需要統一規范的撰寫和展現形式。以此提高后續合并的效率,同時又能保證其閱讀體驗,讓其它使用者能夠更好遵循。對此,我們定義了幾個關鍵原則:


          目錄完整:高效檢索,快速讓使用者找到需要的內容。

          原則清晰:抽象的內容往往含有許多概念和原則,需要讓使用者先理解再參考,才能保證后續使用正確、舉一反三

          多圖少字:沒有人喜歡看字,圖片更容易吸收

          搭配案例:讓使用者更好的代入場景,理解和使用規范。



          3.5 第四步:定義具體規范 ★


          前面鋪墊了許多流程性的內容,就像我們日常輸出設計需求一樣,大家或多或少在工作中都有遇到過。接下來,將重點聊聊,我們具體的內容應該如何定義。依然分成5個環節一一講解。


          3.5.1 全局原則

          目標:明確影響整站各個模塊、各個頁面設計的原則和規范,指導我們后續各種規范的定義和設計。


          而全局原則也分兩種,設計原則和業務原則兩種。


          設計原則:每個完整的設計規范都需要包含的內容,如:設計價值觀、設計準則??此葡鄬仗摰臇|西,實則影響后續整個設計方向。這個部分需要和產品經理、視覺同學結合產品的定位和發展共同提煉。具體定義方式可參考:

          《你為什么需要設計原則?》

          https://zhuanlan.zhihu.com/p/246430795


          業務原則:源自實際業務本身產生的問題,行業內沒有標準定義。需要具體問題具體分析,推導出具體目標,最后再統一制定規范解決業務問題。

          舉一個實際的例子便于理解:全局Z軸定義


          1)明確問題:整站層級高度沒有統一定義,導致不同控件間相互遮擋,沒有統一規則。需要定義全局Z軸規范,統一不同場景、頁面、組件的高度。



          2)梳理借鑒:統一梳理相關場景、頁面、組件,明確需要定義的范圍。再查找行業規范,有無參考借鑒。(如Z軸定義,可參考Material Design)



          3)定義規范:最后通過最具代表性的場景進行展示



          全局原則沒有維度高低之分,例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業交互規范內龐大且抽象的原則。只要能夠實際解決你業務的需要,能夠覆蓋整站各個部分,都可以納為全局原則。


          3.5.2 頁面框架

          目標:梳理整站所有關鍵頁面,整理抽象成相對固定的 框架布局&功能分區 讓后續設計新頁面時能遵循規律、找到參考。


          頁面框架的搭建一般由四個步驟組成:

          第一步,收集頁面:根據早期定義的規范分類,收集展示所有相同層級的頁面。這些在定義規范分類時,應該已收集完成。

          第二步,框架布局:提取共性,搭建框架和布局,明確頁面大的區域劃分和結構。(TDesign布局詳細指南,文末領取騰訊設計系統源文件)



          第三步,功能分區:基于框架布局,細化區域內具體的業務功能屬性,如:導航區、操作區等。這部分是頁面框架內最接地氣最具指導性的內容,同時也是最難定義的。主要原因如下:


          - 定義太細,擔心缺乏前瞻性限制后續設計:定義越細靈活度就低,后續改動和限制性就越高。為避免這種問題,推薦在定義關鍵頁面時,按輸出設計稿的思路:整理「信息架構」→定義「功能分區」,這樣后續拓展性和前瞻性更高



          - 定義太粗,無法定義出明確的功能分區,擔心缺乏實際指導意義:同一區域有些頁面展示操作,有些展示導航。從規范角度好像不應該,但實際套在各個業務內卻又合理。當遇到這種無法達成一致的情況時,建議就不定義具體的“功能分區”,避免因為盲目追求統一而限制實際設計。


          而可以采用“窮舉舉例”的方式,將該布局下可承載的內容均展示出來,既可以起到參考意義,又能供后續沿用達到統一的效果。



          第四步,加入案例:將剛剛定義的布局框架與功能分區,與實際案例完整結合,便于后續理解和沿用。



          3.5.3 通用流程

          目標:梳理整站所有流程,對那些可復用的流程進行整理、抽象、封裝。讓后續設計師和研發能夠直接沿用。


          “可復用的流程”是指:在多個場景下,不改變其原有業務邏輯的情況下能夠“既插既用”。例如:登錄注冊流程、掃碼關注流程、分享流程等等。往往一個通用流程中,不同的步驟亦可以打散,重新拼裝成不同的流程,以適配具體的場景使用。


          下面就舉一個具體的例子:注冊流程。一般完整的注冊流程如下,通過不同的入口觸發后進入,通過一定步驟后注冊成功。



          當業務有了進一步需求,需要通過插件快捷登錄時,步驟便可以重新組合,再適配具體的場景。



          對于設計師要做的,就是識別具體的通用流程有哪些,并將其給「步驟化」串聯起來。當有新的需求來的時候,判斷能直接復用,還是需要重新組裝,亦或是新增步驟。

          而這樣拼裝的思維,恰好對應了研發搭建流程時的思路。通用流程對于他們就是將不同的步驟進行組合起來。當遇到不同場景時,再以搭積木的方式進行拼裝。


          而具體的搭建步驟也是由兩個步驟組成:1.第一步,收集流程;2.第二步,抽象步驟。具體方式上面已提到,就不過多贅述。


          3.5.4 標準組件

          目標:將產品內使用過的組件整理成“標準組件”,統一定義規則,讓后續設計和研發時能直接調取組件,提高設計和研發效率。


          其實行業中已經有很多通用組件,可以快速調用。但由于不同業務的復雜度不一樣,也會生成自己獨特的業務定制組件。同時,產品持續在迭代,也很難能抽出時間單獨定義組件。故基于這個背景,結合“需求設計流程”和“組件整理流程”,有兩種高效定義標準組件的方式。


          方式一:調用行業通用組件


          第一步,業務設計確定基本邏輯。

          第二步,挑選行業通用組件,增加業務規則。(一般開發在搭建產品初期時,便會選擇一家行業組件進行使用,而組件也僅能在這家提供的組件中挑選)

          第三步,視覺根據全局視覺原則,設計新的樣式。

          第四步,將交互規則、視覺樣式合并,統一成標準組件?;A規則直接引用行業組件已定義的內容,場景規則按需補充。




          方式二:業務定制組件


          第一步,進行正常的業務設計。交互根據需求搭建原型,視覺設計具體樣式。

          第二步,判斷組件是否通用,是否可復用到其它場景。例如:分享對話框,不同的內容分享都能夠用得到,像這種就是可抽象成標準組件的典型案例。

          第三步,定義標準組件規范。簡單的組件展示具體樣式即可,團隊內設計師基本認知一致,無需重新學習。而復雜的組件為保證后續的正確復用,建議包括以下內容:


          - 更新日志:因為組件是變動最多的規范,需要明確具體的版本和改動點

          - 組件定義:簡要介紹用途和使用規則,如對話框定義:必須是用戶主動觸發時才出現、主要使用在二次確認場景需用戶確認后才消失等。

          - 組件結構:介紹組件構成、功能分區、分區定義,詳細展示不同分區內具體信息和對應規則。 



          - 使用場景:詳細區分多種場景下不同的使用方式,明確給予使用指導



          - 設計方案:備選,如果比較復雜的組件且涉及到流程中的關鍵環節,建議可以考慮復制一個完整的設計方案嵌入其中,便于團隊成員理解沿用。


          第四步,跟研發溝通,封裝成標準組件。這一步是非常關鍵也是重要的一步,這將大大提高我們后續的組件復用率,降低重復性走查的耗時。推薦使用CoDesign-設計規范功能,上傳「組件庫」后能夠按目錄自動生成規范文檔,同時將自動標注和切圖,大大提高研發開發標準組件的效率。



          3.5.5 文案規范

          目標:將產品內各個場景內文案進行整理,幫助業務更準確表達意圖,讓設計師更好沿用,同時讓用戶感受到一致的產品風格。


          文案就像“產品對用戶說的話”,不同的人說話方式可能并不一樣,沒有絕對的對錯。但清晰明了的語言表述,讓用戶更容易理解;符合產品氣質的語氣,能拉近產品與用戶的距離;統一的文案描述,又能讓用戶在整站一致的語境下體驗產品。


          需要定義的內容,包括但不限于以下3個部分:


          1.語言:語言是指我們通過什么樣的規則來組合文字,讓它形成一種慣用的表達方式。例如語句簡潔明了,不過度修飾,避免重復描述,使用簡潔清晰的語序,幫助用戶快速理解;例如用詞精準易懂,使用簡單、易于用戶理解的詞匯,避免使用專業術語,或過于口語化的表述。


          單純說規則可能太虛了,在實際定義規范時,還要如下圖所示,加上實際案例示意避免誤解。



          2.語氣:語氣是可以體現產品氣質和風格,定義時要結合全局原則內的設計價值觀,明確產品性格后才能更好的定義出符合產品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網絡異常時:


          ? 俏皮的文案可能是:網絡開小差,請稍等一下

          ? 而正經的文案可能是:網絡異常,稍后重試。



          3.書寫規則:主要包括常用詞匯的書寫方式,例如「日期簡寫方式」「英文大小寫方式」「使用全角標點符號」等。以及易錯的詞匯短語示意,例如「賬號還是帳號」、「登陸還是登錄」等。這是團隊設計師最容易沿用遵循的,也是接地氣的部分。



          4.具體使用指南:以上「語言」「語氣」「書寫規則」3個部分,是構成全局文案的基礎規范。如果有充足時間的團隊,可以考慮再結合實際業務,分別定義不同場景和組件下具體的使用指南。如下圖:



          最后再附上各個行業內定義文案規范例子,供大家參考:

          B端產品文案指南:

          https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw

          AntDesign 文案規范:

          https://ant.design/docs/spec/copywriting-cn

          Clarity Design 文案規范:

          https://design.teambition.com/doc/introduction

          國家標點符號用法:

          http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf



          四、如何「推進」交互規范


          定義完交互規范,后續將考慮如何將其順利的推進落地。本文羅列幾個推進時重點需要注意的事項。


          4.1 團隊評審,達成一致


          規范的定義不是一個人的事情,而是一個團隊事情,它將關系到每個后續每個人的設計產出。所以在制定規范期間,應該定期在團隊中進行設計評審。這不僅是評審設計好壞的過程,更是讓團隊達成一致、大家更深入了解如何使用規范的過程。


          注意,參與評審的人不止是設計師,當然也包括具體的業務開發,很多時候我們會得到新的思路和啟發。


          4.2 善用工具,沉淀規范


          規范搭建的過程中,有很多痛點:組件庫需要多人參與維護和創建,容易造成沖突內容丟失;同時沉淀規范文檔時,需要圖片逐一復制、粘貼到文檔內,更新時又要重復一遍這樣的操作。而這些問題,使用CoDesign設計規范功能,就可以有效的解決提高效率。


          首先組件庫支持多人同時維護,差量更新;其次組件庫上傳后,可以自動生成/更新規范文檔,避免反復編寫文檔,整體提效;最后當組件庫有新版本時,會自動提醒團隊內其他成員進行更新,保障團隊設計一致性。



          規范的過程其實也是整體設計走查的過程,我們會發現有些設計可能有體驗問題,或不符合規范。每當這個時候,我們就需要對這些設計進行標記。在規范定義完成之后,迭代排期優化線上的設計。


          而在實際設計使用過程中,可能又會發現規范無法滿足的地方,此時又可以展開新一輪的提煉和總結,再反哺規范,形成正向循環促使設計和規范不斷完善。



          五、寫在最后


          在前言的時候就有提到「交互規范」只是整體規范中的一部分,最終是需要與視覺合并成一份統一的設計規范,指導后續具體的設計。具體的合并方式,在定義的章節內已有提到,就不再贅述。


          最后,我一直認為好的設計規范是提高設計效率,引導設計方向,而不是因為設計規范而局限了具體業務的設計,如果這樣,還不如不去定義。

          文章來源:站酷      作者:大魔V

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確。例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋。



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量??!如果和視頻播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王?;疑珓t表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通??梢酝ㄟ^一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。


          文章來源:站酷      作者:應駿

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          UX可發現性咋提升?這12條技巧

          純純

          用戶找不到=不存在 


          在數字界面中,可發現性定義了用戶在產品中查找新內容或功能的難易程度。在許多情況下,良好的可發現性至關重要,因為用戶找到所需內容的能力將直接影響其完成特定任務的能力。


          在本文中,我們將討論可發現性的概念和其重要性所在,以及設計可發現性的詳細技巧。


          為什么為設計可發現性這么困難?

          UX中的Findability和Discoverability這兩個術語經常互換使用。雖然二者相關,但它們不是一回事,關鍵區別在于用戶對內容的看法。Findability是指用戶已經知道或認為存在于產品中的內容或功能的能力。而Discoverability是用戶遇到新內容或以前不知道的內容或功能的能力。


          這種差別使我們更容易理解——為什么設計高度可發現的界面如此困難。在許多情況下,用戶并不是有意識地尋找新內容。人們只想簡答地使用產品,如果沒有遇到新功能或新內容,用戶壓根兒不會想到去尋找它們,因為一開始就不知道它們是作為產品的一部分存在的。注重可發現性是UX設計師解決此問題的途徑,好讓用戶更容易發現這些新功能。


          12個提升UX可發現性的技巧

          許多因素都會影響用戶界面的可發現性。以下是12個技巧,幾乎適用于所有想要提升可發現性的產品。


          技巧1:設計熟悉的界面

          許多設計師喜歡試驗和嘗試新方法,但在嘗試創建新內容時,往往適得其反,使用戶更難以理解頁面。


          依據設計常識創建界面,這是設計師的責任。使用現有的設計規范(例如,操作系統的設計范例),結合用戶需求建立可發現性,更容易獲得用戶的認可。因為人們通過自身經驗去感受一個新事物時,是非常容易理解其內在邏輯的。例如,許多網站將導航菜單放置在頁面頂部,緊鄰網站的Logo,也是大多數用戶不假思索就能找到的位置。


          技巧2:優先安排有價值的內容和功能

          當我們在UI中隱藏某些內容時,會加大用戶找不到它的風險。移動應用和網站之所以放棄漢堡菜單,轉而使用標簽欄的原因就是UX的可發現性。雖然漢堡菜單通過隱藏導航選項來節省屏幕空間,有句說話說的好“眼不見,心不煩”,隱藏的選項也更容易被忘記。


          良好的可見性可以帶來更多的曝光率——元素越明顯可見,用戶就越有可能記住它??梢妼Ш骄腿缫粋€標簽欄,告訴用戶他們有哪些選項,并使其成為首要考慮因素。


          技巧3:按邏輯順序對內容和功能元素分組

          具有密切關系的項目應被組織在一起,該規則適用于內容(例如,電子商務網站上定義產品類別的信息架構)和功能(例如,Instagram上的濾鏡)。通過在結構中引入邏輯順序,可以使用戶更輕松快捷地找到他們想要的東西(在開始UI工作之前,進行Tree testing以了解用戶的心理模型至關重要,它能幫助你根據用戶需求搭建內容)。


          技巧4:減少視覺上的混亂

          UI設計里的一個常見誤區,為了使對象更容易被發現,它應該一直可見。假設按剛剛說的去設計,把所有可用對象都堆在頁面里,反而更混亂。


          視覺混亂通常是出現了不必要的功能和裝飾元素,它們阻止用戶與產品交互。這種混亂不僅放慢了使用速度,還讓基本功變得難易被發現。

          Microsoft Word中,太多可見選項造成視覺混亂 by Amansinghblog


          即使頁面/屏幕有非常良好的視覺層次結構,但人們的注意力跨度有限,人腦通過眼睛感知事物的能力也有限。因此,確定對象的優先級非常重要。刪除所有不必要的元素,為剩余元素增加視覺權重,才能讓真正重要的內容和功能脫穎而出。


          技巧5:減少選項總數

          希克定律指出,用戶做出的決定越多,決策過程所需的時間就越長,限制 or 提供大量選擇?設計師要掌握平衡??礈蕰r機提供選項,不僅簡化決策過程,還能為用戶提供發現、探索和嘗試所有可用選項的空間(和信心)。


          技巧6:提供視覺反饋

          視覺反饋是指用戶在執行任何交互時獲得的可見響應。例如,當我們將鼠標懸停在網站鏈接上時,我們會看到一個視覺響應——鏈接改變了顏色。這種微小的視覺變化非常重要,因為它可以增強用戶體驗,消除不確定性。用戶知道某些元素是可以交互的,以及下一步該怎么做,從而采取行動。


          技巧7:使用常見熟悉的圖標

          交互元素使用不常見的圖標是導致問題的“罪魁禍首”。當用戶看到未知圖標時,他們無法預測點擊該圖標會發生什么。這種猜測對產品團隊來說成本很高,因為在許多情況下,用戶會跳過該選項。


          怎么才能知道圖標是否令人困惑?測試一下,向實際或潛在用戶詢問涉及元素的作用,如果他們給不出明確答案,那就用一個更常見的圖標替換。


          技巧8:使用動畫吸引用戶的注意力

          人眼會自然地聚焦在移動的物體上,微妙的動畫可以引導用戶轉向某些特定的內容或功能,動畫還可以解釋如何與對象交互。


          技巧9:注意手勢交互

          手勢是隱藏的交互控件,它們可能導致很多可發現性問題。除非用戶知道某些手勢,否則他們不會嘗試。產品中使用普遍接受的手勢交互,別試圖加入太新奇的交互形式。考慮到手勢對于許多用戶來說仍然是一個相對較新的概念,因此在新設備上很有必要進行入門介紹。

          非常規手勢(例如雙擊點贊)可能會對可發現性產生負面影響,用戶可能注意不到這些手勢在應用程序里是被支持的 by Dribbble


          技巧10:適當調整UI元素的大小

          設計師為什么要對標題和常規文本使用不同的視覺樣式,這是有原因的——想讓用戶更容易注意到文本內容。同樣的策略也適用于UI設計,通過對比不同大小的元素,將用戶注意力吸引到關鍵信息上。例如,著陸頁上的一個超大的號召性按鈕,清楚地告訴用戶當他們點擊該按鈕時,下一個動作應該是什么,以及會發生的是什么(大型UI元素在可用性方面也很有益,因為它們更容易在移動設備上使用)。

          號召性按鈕越大且越突出,你期望用戶執行的操作也越明顯 by Firefox


          技巧11:提供視覺可供性

          有時候即便用戶發現了一個對象,他們也可能不知道如何使用。可供性用來指導元素如何應用,沒有可供性的話,用戶只能靠猜測使用產品/對象(很可能不會使用)。在數字界面中,設計師應把形狀和產生的交互進行具象聯系,例如,當我們看到帶有“提交”標簽的矩形對象時,我們就知道這是一個按鈕。


          技巧12:提供視覺線索

          視覺線索是引導用戶轉向特定的內容或功能的UI元素,一個典型示例是滾動網站上的動畫箭頭,該箭頭會引導用戶朝特定的方向前進。

          注意到圖像系列最右端的箭頭嗎?該視覺線索提示訪問者,水平畫廊是可滾動的 by Netflix


          文章來源:UX辭典(站酷)

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          UI組件要點「狙擊」:按鈕設計的這些坑別再踩啦!

          純純

          按鈕設計


          為了設計正確的交互,我們需要回顧一下物理按鈕的歷史和起源。物理按鈕是UI組件的前身,當今的數字產品都還在大量使用它們。按鈕很棒,即使用戶不了解基本的機制或算法,只用手指觸摸就可以讓電器、汽車或系統運行/關閉。在《Power Button》中,作者Rachel Plotnick描述了當今按鈕文化的起源,并解釋了按鈕是如何成為數字命令方式的。


          “你按下按鈕,剩下的我們來做?!?——柯達相機的醒目標語吸引了潛在消費者。


          即使在今天,這也是吸引用戶的地方——通過簡單觸摸就能讓事情發生的即時滿足感。盡管有大量新的家用電器和設備都變成了觸摸屏,但物理按鈕并不會消失,因為它們讓人形成的行為習慣,會影響按鈕設計的直觀性和易用性,是一種永遠存在的實物參考。


          01 按鈕 vs 鏈接

          按鈕向用戶傳遞了操作的可執行性,在整個UI里很常見,例如:對話框、表單和工具欄等。按鈕和鏈接之間的區別,請注意:

          -鏈接是導航到另一個地方時應用的,例如:“查看全部”頁面、“ Roger Wright”個人簡介等;

          -按鈕是在執行動作時應用的,例如:“提交”、“合并”、“創建”、“上傳”等。



          02 讓用戶直觀感受按鈕狀態

          為按鈕創建正確的交互和樣式,是按鈕設計過程中重要的組成部分之一。在不改變組件或產生視覺干擾的前提下,每個按鈕的狀態都必須有明確定義,以使其與周圍布局區別開來。



          正常—表示該組件已啟用交互;

          突出提示—用戶使用鍵盤,進入編輯狀態;

          鼠標懸停—當用戶將鼠標置于交互式元素上方時;

          點擊—按下狀態表示用戶已輕點按鈕;

          進度/加載—用戶操作行為沒有立即執行,表示正在完成操作中;

          禁用—表示該組件當前處于非交互狀態,但將來可以啟用。


          03 按鈕的顏色、形狀和大小

          常見的是圓角矩形按鈕,這些按鈕即使在輸入框旁,用戶也能快速識別。按鈕樣式的選擇取決于用途、平臺和應用準則。以下是一些最受歡迎的樣式變化:



          04 建立按鈕樣式等級

          樣式主要用于區分重要和不重要的動作。創建動作層次結構,該層次結構將指導用戶進行多種選擇。通常,可以有一個突出的按鈕(該樣式通常稱為“首要”按鈕),剩下的按鈕則依據重要程度建立不同的樣式等級。



          05 《Don’t Make Me Think》

          這是可用性工程師Steve Krug撰寫的書籍標題,其中講到了一點:對用戶而言,界面清晰明了非常重要,不要給用戶制造難題。人們周圍其實已經被電子產品包圍了,多年使用各種設備、軟件的經驗,一定程度上固化了人們對按鈕外觀和功能的認知。如果與常見的“標準”存在較大偏差,也會給用戶造成困惑。



          避免對交互式和非交互式元素使用相同的顏色,否則用戶不知道該點擊哪里。


          06 一致性的重要性

          “一致性是最強大的可用性原則之一:當事物始終表現相同時,用戶不必擔心會發生什么?!?—雅各布·尼爾森(Jakob Nielsen)


          一致性提升了速度性和準確性,有助于避免錯誤。創建可預測性,幫助用戶控制和實現產品中的目標。當創建主要、次要和第三種樣式時,試著找找一致元素,如顏色、形狀等。按鈕設計不僅要在設計系統內部保持一致,在整體平臺也要進行統一。



          07 使按鈕足夠大以實現可靠交互

          按下按鈕應該是一個簡單的操作任務,如果用戶無法正常進行,或在過程中錯誤地按到了相鄰元素,不但給用戶造成了負面體驗又浪費了時間。


          對于大多數平臺,請考慮被觸摸的目標至少為48x48dp。無論屏幕大小,這種尺寸的觸摸目標的物理尺寸應為9mm,觸摸屏元件的目標尺寸至少是7-10mm。



          對于圖標按鈕來說,請確保觸摸目標超出元素的可視范圍。這不僅適用于移動設備、平板電腦,同時也適用于網絡上的指示設備,比如鼠標。


          08 無障礙設計

          所有組件都應推行無障礙設計。目標區域的大小是影響可訪問性的因素之一,其他的則是字體大小、顏色和對比度,也有很多工具能檢查組件的設計性能。



          設計師應與開發團隊緊密合作,確保按鈕與屏幕閱讀器協同工作。添加role =“ button”將使一個元素作為按鈕控件出現在屏幕閱讀器上。


          09 手勢應用

          手勢應用,讓用戶可以通過觸摸與應用程序進行交互。使用觸摸來完成任務,不僅提供了觸覺控制還非常節約時間。某些手勢(比如滑動以觸發上下文動作、雙擊或長按來標記喜歡等)每天都被人們廣泛使用,但對于普通用戶而言,它們仍然不太明顯,建議把它們替換給高級用戶執行操作。



          10 按鈕標簽信息易于理解

          按鈕傳達的信息與其外觀一樣重要,錯誤的信息會讓用戶感到困惑,甚至是誤導用戶操作。正確的按鈕標簽會引導用戶完成操作,最好使用動詞,并在按鈕上標記其實際功能。


          就像按鈕在問用戶——“您要(添加到購物籃中)嗎?” 或“您要(確認訂單)嗎?”,避免使用Yes/No或過于通用的標簽,比如Submit。



          11 確定/取消,還是取消/確定?

          兩者都是正確選擇,但設計師可能會花幾個小時來討論哪個更合適。

          -確定按鈕在前,是自然流暢的閱讀順序。Windows把確定按鈕放在了前面;

          -確定按鈕在后,可以幫助改善流程。這種順序形式,幫助用戶再采取行動前,對所有選項評估,有效地幫助人們避免錯誤。蘋果則是把確定按鈕放在最后的;

          任何一種選擇其實都沒有錯,也不會造成什么可用性災難。



          12 避免使用禁用按鈕

          每個人都遇到過這種情況:在屏幕上停留了幾秒或幾分鐘,怎么操作都沒反應,這才發現原來是禁用按鈕使我們無法進行下一步。禁用控件讓組件短暫處于非交互狀態,但如果使用不當,則非常容易讓用戶產生負面情緒。



          我建議盡量避免禁用按鈕,最好始終啟用它,如果用戶未提供某些必需信息,則只需突出顯示空白字段或顯示通知可。


          文章來源:UX辭典(站酷)

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日歷

          鏈接

          個人資料

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

          存檔

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