首頁

超長篇干貨!如何從交互維度量化用戶體驗?

周周

這篇文章,和大家分享一些在產(chǎn)品和交互設(shè)計中的一些自己的方法。

怎樣才算一個好的交互設(shè)計方案?做好這5個維度就夠了!

周周

經(jīng)過一些項目經(jīng)驗,結(jié)合幾個方法論,我整理出了一個評估交互方案完整性的方法,也可以作為前期考慮方案的分析方式。下面就來介紹一下,希望能給大家?guī)椭蛦l(fā)。

幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

純純

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

你可能想有創(chuàng)意的交互能為網(wǎng)頁帶來什么?

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

好了,說多了,就是希望為更多設(shè)計師提供設(shè)計思路或執(zhí)行概念,幫助大家找到更多的創(chuàng)意靈感。

首先了解 Web 端交互支持

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

1. 鼠標允許的交互

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

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

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

2. 鍵盤交互支持

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

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

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

常見的交互動作組合

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

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

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

交互影響的元素

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

1. 常見變化形式

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

網(wǎng)頁交互的概念

web 端的交互概念即觸發(fā)到呈現(xiàn)的過程。用戶可以使用交互設(shè)備進行事件觸發(fā)或變量,頁面則將內(nèi)容進行對應的呈現(xiàn)。其中交互過程主要影響的事件由“可交互的元素“、“功能交互“、“轉(zhuǎn)場切換“構(gòu)成。

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

Web 端內(nèi)容呈現(xiàn)結(jié)構(gòu)

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

14 種視覺層創(chuàng)意形式

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

1. 幾何色塊搭配文案

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

2. 精美大圖背景搭配內(nèi)容

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

3. 關(guān)聯(lián)插畫或圖標搭配文案

采用小范圍的插畫或圖標來表達服務(wù)或產(chǎn)品優(yōu)勢,搭配文案說明,風格統(tǒng)一精致耐看。常見于服務(wù)描述或產(chǎn)品說明模塊應用

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

4. 留白大圖搭配文案

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

5. 動態(tài)的背景或微動效裝飾

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

9. 充滿個性的視覺裝扮

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

10. 引用 3D 視覺裝飾

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

11. 產(chǎn)品元素或其他元素來填充背景

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

12. 矩形陳列或卡片陳列

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

13. 極致的簡約

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

14. 魔幻或神秘感界面呈現(xiàn)

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

24 種交互層創(chuàng)意形式

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

1. 光標跟隨動畫

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

2. 鼠標懸浮動畫

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


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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

3. 鼠標點擊特效

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

4. 鼠標長按特效

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

通過長按持續(xù)增加細菌圓點

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

5. 鼠標拖拽特效

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

示例內(nèi)容:阿里內(nèi)測的 Real 3D

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

6. 鼠標滾輪巧妙的聯(lián)動效果

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


國內(nèi)官網(wǎng)

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

7. 鼠標選中自動展開

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

8. 按鍵與鼠標配合觸發(fā)

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

9. 模塊或分頁加載動效

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

10. 趣味轉(zhuǎn)場或加載等候

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

11. 大圖或多圖輪播應用

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

12. 內(nèi)容穿插滾動

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

13. 內(nèi)容自動生成

輸入關(guān)鍵內(nèi)容后,頁面自動生成結(jié)果進行呈現(xiàn),整個過程可以是緩慢有序的,適用于降壓或畫面創(chuàng)意生成的產(chǎn)品,可以讓用戶感受整個過程與細節(jié)變化


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

14. 游戲互動模式

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

15. 三維或全景空間

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

16. 一鏡到底的視角呈現(xiàn)

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

17. 按鍵交互效果

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

18. 個性的模塊展現(xiàn)方式

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

19. 可交互的顏色或圖形

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

20. 音視頻媒體控制

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

21. 內(nèi)容或窗口抖動

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

22. 打造儀式感

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

23. 有聲交互

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


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

24. 鏡頭交互

通過攝像頭授權(quán)獲取鏡頭畫面進行交互,通常是一些鏡頭濾鏡效果或者增強現(xiàn)實技術(shù)結(jié)合做交互創(chuàng)意,網(wǎng)頁上少見新穎。


萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

網(wǎng)頁創(chuàng)新設(shè)計的方法

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

1. 開發(fā)者的痛點與解決方案

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

那么如何解決呢?

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

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

傳統(tǒng)改版:

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

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

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

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

2. 構(gòu)建原型框架,評審優(yōu)化

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

3. 明確產(chǎn)品定位,建立設(shè)計語言

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

4. 高保真評審,挖掘交互創(chuàng)新點

對網(wǎng)頁高保真進行評審,確認頁面信息框架或界面設(shè)計可行。然后對交互創(chuàng)新方案探討,結(jié)合網(wǎng)頁的板式設(shè)計,提出交互創(chuàng)新的細節(jié),與開發(fā)者同步,確保實現(xiàn)的可行性與項目工時可控,同時披露交互細節(jié)幫助開發(fā)者進行調(diào)研或準備

5. 交互創(chuàng)新對齊開發(fā),進入研發(fā)階段

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

6. 測試驗收,預發(fā)上線

最后進行成果驗收,確?;镜膬?nèi)容是否符合標準,再根據(jù)工時情況或上線計劃等,考慮交互創(chuàng)新部分的細節(jié)還原調(diào)試,適公司實際情況可以考慮再迭代一版。之后根據(jù)產(chǎn)品情況自行考慮是否 A/B 測試、灰度上線等,上線后就是線上數(shù)據(jù)跟進或用戶調(diào)研了,希望你的新版本收獲一片叫好 哈哈

敏捷開發(fā):

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

1. Understand 理解

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

2. Define 定義

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

3. Diverge 發(fā)散

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

4. Decide 決策

方案決策環(huán)節(jié),產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)小哥等將各自的方案進行展示說明,這個過程中不要急著評價對方,只要投票選出最佳方案即可,這是一個方案的根基,之后再進行優(yōu)化和細節(jié)完善

5. Prototype 原型

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

  • 了解框架結(jié)構(gòu),采取合適的布局方式(參考上文)
  • 明確產(chǎn)品定位,挖掘符合產(chǎn)品氣質(zhì)的設(shè)計方案(制定初步的視覺規(guī)范)
  • 根據(jù)產(chǎn)品屬性,頁面內(nèi)容類型選取合適的視覺創(chuàng)意形式(可參考上文)
  • 靜態(tài)頁面基本確認的情況,添加交互創(chuàng)意畫龍點睛(網(wǎng)頁內(nèi)容呈現(xiàn)是核心,所以交互創(chuàng)意放在后面考慮,確保項目最小可行性優(yōu)先)

6.Validate 驗證

首先通過內(nèi)部自測優(yōu)化,再根據(jù)產(chǎn)品類型考慮是否找利益相關(guān)者進行可用性測試驗證,或者找專家做顧問。之后再進行下一步的優(yōu)化完善即可

網(wǎng)頁框架如何搭配創(chuàng)意形式

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

1. 明確產(chǎn)品定位

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

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

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

信息框架設(shè)計學習:《Web 信息框架》

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

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

文の處理:

通常一個純文本的界面是很難設(shè)計的,因為過于單調(diào),對此可采用

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

圖の處理:

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

圖文の處理:

少量圖文配套是比較好處理的,手法也比較多,根據(jù)配套數(shù)量情況還可以調(diào)換位置形成錯位區(qū)分模塊

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

視頻の處理:

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

圖文視頻の混合:

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

三維の處理:

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

按鈕の處理:

按鈕是網(wǎng)頁中最常見的交互控件,是頁面扭轉(zhuǎn)或功能啟用的基礎(chǔ)

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

控件の處理:

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

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

萬字長文!幫你掌握網(wǎng)頁端交互創(chuàng)意 99% 的玩法!

3. 交互創(chuàng)意如何下手

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

基本交互發(fā)力點

鼠標經(jīng)過反饋:常見且重要的交互方式,通過鼠標經(jīng)過時反饋選中狀態(tài)或提示相關(guān)信息

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

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

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

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

多內(nèi)容輪播應用:對 Banner 或其他多個內(nèi)容展現(xiàn),進行輪播交互完善和時間細節(jié)控制

錦上添花交互發(fā)力點

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

鼠標跟蹤動畫:可以適當?shù)淖鲆恍┦髽烁櫴录屢恍┍尘盎蚪缑嬖馗S鼠標律動起來,增強互動

特殊滾輪聯(lián)動效果:通過鼠標滾動聯(lián)動其他元素進行交互變化,來呈現(xiàn)更有創(chuàng)意的場景切換或內(nèi)容展示

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

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

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

趣味轉(zhuǎn)場或頁面加載:對頁面轉(zhuǎn)場或加載深度優(yōu)化。采取更有創(chuàng)意的方式或動畫來過渡,讓視覺體驗提升億點點

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

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

結(jié)合產(chǎn)品的場景創(chuàng)意

打造個性的模塊呈現(xiàn)方式:結(jié)合產(chǎn)品的應用場景打造有個性的呈現(xiàn)方式

打造游戲互動的呈現(xiàn):將有劇情有故事的產(chǎn)品或內(nèi)容游戲化,可以讓用戶趣味互動更加深刻

打造一鏡到底的轉(zhuǎn)場:結(jié)合鼠標滾輪聯(lián)動做鏡頭創(chuàng)意,突出產(chǎn)品細節(jié)或內(nèi)容呈現(xiàn)

打造三維或全景場景:根據(jù)產(chǎn)品屬性考慮用三維的場景來增強互動與突出產(chǎn)品

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

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

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

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

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



文章來源:優(yōu)設(shè)   作者:泡泡bing

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


免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


探討交互設(shè)計

周周

本文主要探討交互設(shè)計

交互設(shè)計之探索GUI和VUI

周周

本文主要探討GUI和VUI的交互設(shè)計 。

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

ui設(shè)計分享達人

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


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

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




1.示能


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


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


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



1.1示能


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



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


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


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



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


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



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



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



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



1.2.反示能


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


例如我們經(jīng)常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設(shè)計師通過設(shè)計他的形狀、大小、材質(zhì),幫助我們?nèi)ナ⒎乓恍┬∥锛玷€匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


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



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


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



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


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



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


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


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



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



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



1.4.相同示能的不同表現(xiàn)方式與含義


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



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



再例如一個父子集共生的內(nèi)容卡片



同構(gòu)異形在設(shè)計樣式上會有很多種,例如列表,例如上文說到的單控開關(guān),雖然樣式很多,但原理上單控開關(guān)都是一樣的。


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


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



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


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


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


小結(jié)

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



2.意符


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


我是傳送門


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


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


2.1意符的類型與表現(xiàn)形式


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


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



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


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


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


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



意符的類型


1.文字


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


案例1:開關(guān)


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



這里的文字就是意符,用來解釋開關(guān)的作用。


開關(guān)本身具備的含義中是有這樣兩條原則:

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

2.開關(guān)所屬文本必須簡單清晰無歧義


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



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



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


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


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


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


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


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


開關(guān)文字意符的描述方式還有幾種不同的方式:


1.內(nèi)容標題+開關(guān)切換后狀態(tài)與內(nèi)容變化的描述

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


2.功能直接描述

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


3.批量整體描述

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



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



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



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



2.圖形/圖標


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


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



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


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


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


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


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



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


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

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


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



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


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


兩個原因:


1.因為視頻的打開和關(guān)閉只有兩個狀態(tài),但是聲音不同,聲音在打開的時候還可以調(diào)節(jié)音量?。∪绻鸵曨l播放一樣,在播放的狀態(tài)下顯示的是靜音的圖標,那么音量調(diào)節(jié)就會變成這樣:




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


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


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



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



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




3.顏色


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


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


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


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


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





4.聲音

聲音意符就更有意思了,人們通過聽聲音來辨別發(fā)生方位、響度、發(fā)聲物體以及聲音的音色、質(zhì)感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家?guī)Щ氐酵辍?


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


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


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



5.動效

動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們?nèi)粘I钪幸灿玫降姆浅6唷?



例如我們看到理發(fā)店門口正在旋轉(zhuǎn)的彩色燈。


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


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


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


1.降低用戶認知成本

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


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




2.引導/提示/強化

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


3.氛圍、強化視覺

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



4.表示狀態(tài)

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





5.更多意符

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


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



小結(jié)


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


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

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

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

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



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

ui設(shè)計分享達人

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


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

 

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

HC X:Human Content Experience,人與內(nèi)容的交互體驗;

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

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



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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

一,書稿的邏輯與結(jié)構(gòu)更加嚴謹、合理,內(nèi)容和語言也比網(wǎng)文精簡;

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

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

四,書稿在產(chǎn)品案例和生活案例方面也進行了一定程度的調(diào)優(yōu)。

 

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

 

 

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

 

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



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

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

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

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


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


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


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


- -  The End - -


實拍圖:

undefined

文章來源:站酷      作者:SonwDesign

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

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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



設(shè)計師眼中的用戶體驗

ui設(shè)計分享達人

用戶體驗

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

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

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


名詞解釋

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

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

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

  • UED——User Experience Design,本意為“?戶體驗設(shè)計”,現(xiàn)在常常表示用戶體驗設(shè)計團隊,基本上大一點的互聯(lián)網(wǎng)公司都有自己的UED團隊,甚至大的部門都有自己的UED團隊


UED工作領(lǐng)域

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

  • 用戶研究

  • 產(chǎn)品分析

  • 交互設(shè)計

  • 產(chǎn)品設(shè)計

  • 視覺設(shè)計

  • 品牌設(shè)計

  • 插畫設(shè)計

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


用戶體驗五要素

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

現(xiàn)在我們所談?wù)摰挠脩趔w驗的概念,其實最早出自一本叫《用戶體驗要素》的一本書

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


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


當設(shè)計師在設(shè)計或重構(gòu)產(chǎn)品,卻不知從何開始時,這時我們可以參考用戶體驗五要素


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

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


1.戰(zhàn)略層

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

  • 公司要做什么

  • 面向什么樣的用戶

  • 什么樣的解決方案

  • 公司的產(chǎn)品特色是什么

  • 競爭對手有什么

  • 將來的收益怎么樣

 

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

2.范圍層

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

3.結(jié)構(gòu)層

根據(jù)前兩層思考產(chǎn)品的信息架構(gòu),規(guī)劃任務(wù)流程,簡單來說這一層主要是產(chǎn)品PRD的輸出

4.框架層

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

5.表現(xiàn)層

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

模擬案例

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

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

-戰(zhàn)略層

  • 先了解這家公司的產(chǎn)品需求和用戶需求

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

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

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

-范圍層

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

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

-結(jié)構(gòu)層

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

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

-框架層

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

-表現(xiàn)層

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

  • 最終產(chǎn)品上市



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

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


交互規(guī)范制定指南

ui設(shè)計分享達人

一、如何「理解」交互規(guī)范


說起設(shè)計規(guī)范,大家應該都不陌生,一個成熟的設(shè)計規(guī)范對 產(chǎn)品設(shè)計、研發(fā)開發(fā)、用戶使用 都有著重要的指導作用:


產(chǎn)品設(shè)計:保障產(chǎn)品內(nèi)不同模塊的設(shè)計一致性,同時提高不同設(shè)計師間的設(shè)計、協(xié)作效率

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

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



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



從用戶體驗要素來看,視覺主要是在「表現(xiàn)層」「框架層」進行規(guī)范的統(tǒng)一,主要包括:形、色、字、構(gòu)、質(zhì)、動 六個層面。



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



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


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



二、不同階段應該定義

哪些交互規(guī)范?


產(chǎn)品有不同發(fā)展階段,設(shè)計規(guī)范同樣也有,不同階段下的產(chǎn)品目標和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多,保證投入產(chǎn)出比最大化;同時也要構(gòu)建一個合理的規(guī)范迭代思路。


產(chǎn)品探索初期


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


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


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


產(chǎn)品穩(wěn)定發(fā)展期


該階段的產(chǎn)品基本形態(tài)已穩(wěn)定,也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上,進行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程,但探索期產(chǎn)品的自由生長,會導致不少設(shè)計細節(jié)不一致,從而影響了產(chǎn)品整體的體驗和效率。


搭建目的:通過回溯整理過往設(shè)計,沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗,進一步優(yōu)化流程和效率, 讓整個產(chǎn)品體驗達到相對穩(wěn)定的狀態(tài)。

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



三、如何「定義」交互規(guī)范


3.1 定義交互規(guī)范的原則


與行業(yè)通用的設(shè)計規(guī)范(如TDesign、AntDesign,文末領(lǐng)取騰訊設(shè)計系統(tǒng)源文件)“大而全”“通用”的特質(zhì)不同,一般團隊內(nèi)構(gòu)建的設(shè)計規(guī)范都是源于某一個產(chǎn)品或業(yè)務(wù),主要的特點是“專精”。專注于「業(yè)務(wù)」本身,主要是「團隊內(nèi)成員使用」,追求的是投入產(chǎn)出比最大化。


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


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


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


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



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


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



3.2 第一步:定義規(guī)范分類


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


通用的做法有兩種:


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

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



方式二:參考行業(yè)通用規(guī)范的定義,先羅列完整,再根據(jù)產(chǎn)品實際業(yè)務(wù)需要進行增刪改。

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



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



3.3 第二步:確定分工排期


有了具體內(nèi)容作為依據(jù),便可以根據(jù)此進行排期分工。


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

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


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

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

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



3.4 第三步:統(tǒng)一撰寫原則


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


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

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

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

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



3.5 第四步:定義具體規(guī)范 ★


前面鋪墊了許多流程性的內(nèi)容,就像我們?nèi)粘]敵鲈O(shè)計需求一樣,大家或多或少在工作中都有遇到過。接下來,將重點聊聊,我們具體的內(nèi)容應該如何定義。依然分成5個環(huán)節(jié)一一講解。


3.5.1 全局原則

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


而全局原則也分兩種,設(shè)計原則和業(yè)務(wù)原則兩種。


設(shè)計原則:每個完整的設(shè)計規(guī)范都需要包含的內(nèi)容,如:設(shè)計價值觀、設(shè)計準則??此葡鄬?wù)虛的東西,實則影響后續(xù)整個設(shè)計方向。這個部分需要和產(chǎn)品經(jīng)理、視覺同學結(jié)合產(chǎn)品的定位和發(fā)展共同提煉。具體定義方式可參考:

《你為什么需要設(shè)計原則?》

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


業(yè)務(wù)原則:源自實際業(yè)務(wù)本身產(chǎn)生的問題,行業(yè)內(nèi)沒有標準定義。需要具體問題具體分析,推導出具體目標,最后再統(tǒng)一制定規(guī)范解決業(yè)務(wù)問題。

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


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



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



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



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


3.5.2 頁面框架

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


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

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

第二步,框架布局:提取共性,搭建框架和布局,明確頁面大的區(qū)域劃分和結(jié)構(gòu)。(TDesign布局詳細指南,文末領(lǐng)取騰訊設(shè)計系統(tǒng)源文件)



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


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



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


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



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



3.5.3 通用流程

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


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


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



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



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

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


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


3.5.4 標準組件

目標:將產(chǎn)品內(nèi)使用過的組件整理成“標準組件”,統(tǒng)一定義規(guī)則,讓后續(xù)設(shè)計和研發(fā)時能直接調(diào)取組件,提高設(shè)計和研發(fā)效率。


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


方式一:調(diào)用行業(yè)通用組件


第一步,業(yè)務(wù)設(shè)計確定基本邏輯。

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

第三步,視覺根據(jù)全局視覺原則,設(shè)計新的樣式。

第四步,將交互規(guī)則、視覺樣式合并,統(tǒng)一成標準組件?;A(chǔ)規(guī)則直接引用行業(yè)組件已定義的內(nèi)容,場景規(guī)則按需補充。




方式二:業(yè)務(wù)定制組件


第一步,進行正常的業(yè)務(wù)設(shè)計。交互根據(jù)需求搭建原型,視覺設(shè)計具體樣式。

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

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


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

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

- 組件結(jié)構(gòu):介紹組件構(gòu)成、功能分區(qū)、分區(qū)定義,詳細展示不同分區(qū)內(nèi)具體信息和對應規(guī)則。 



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



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


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



3.5.5 文案規(guī)范

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


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


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


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


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



2.語氣:語氣是可以體現(xiàn)產(chǎn)品氣質(zhì)和風格,定義時要結(jié)合全局原則內(nèi)的設(shè)計價值觀,明確產(chǎn)品性格后才能更好的定義出符合產(chǎn)品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網(wǎng)絡(luò)異常時:


? 俏皮的文案可能是:網(wǎng)絡(luò)開小差,請稍等一下

? 而正經(jīng)的文案可能是:網(wǎng)絡(luò)異常,稍后重試。



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



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



最后再附上各個行業(yè)內(nèi)定義文案規(guī)范例子,供大家參考:

B端產(chǎn)品文案指南:

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

AntDesign 文案規(guī)范:

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

Clarity Design 文案規(guī)范:

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

國家標點符號用法:

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



四、如何「推進」交互規(guī)范


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


4.1 團隊評審,達成一致


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


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


4.2 善用工具,沉淀規(guī)范


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


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



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


而在實際設(shè)計使用過程中,可能又會發(fā)現(xiàn)規(guī)范無法滿足的地方,此時又可以展開新一輪的提煉和總結(jié),再反哺規(guī)范,形成正向循環(huán)促使設(shè)計和規(guī)范不斷完善。



五、寫在最后


在前言的時候就有提到「交互規(guī)范」只是整體規(guī)范中的一部分,最終是需要與視覺合并成一份統(tǒng)一的設(shè)計規(guī)范,指導后續(xù)具體的設(shè)計。具體的合并方式,在定義的章節(jié)內(nèi)已有提到,就不再贅述。


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

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

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

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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

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

ui設(shè)計分享達人

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


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

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




1.示能


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


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


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



1.1示能


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



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


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


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



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


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



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



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



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



1.2.反示能


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


例如我們經(jīng)常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設(shè)計師通過設(shè)計他的形狀、大小、材質(zhì),幫助我們?nèi)ナ⒎乓恍┬∥锛玷€匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


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



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


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



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


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



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


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


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



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



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



1.4.相同示能的不同表現(xiàn)方式與含義


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



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



再例如一個父子集共生的內(nèi)容卡片



同構(gòu)異形在設(shè)計樣式上會有很多種,例如列表,例如上文說到的單控開關(guān),雖然樣式很多,但原理上單控開關(guān)都是一樣的。


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


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



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


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


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


小結(jié)

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



2.意符


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


我是傳送門


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


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


2.1意符的類型與表現(xiàn)形式


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


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



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


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


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


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



意符的類型


1.文字


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


案例1:開關(guān)


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



這里的文字就是意符,用來解釋開關(guān)的作用。


開關(guān)本身具備的含義中是有這樣兩條原則:

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

2.開關(guān)所屬文本必須簡單清晰無歧義


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



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



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


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


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


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


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


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


開關(guān)文字意符的描述方式還有幾種不同的方式:


1.內(nèi)容標題+開關(guān)切換后狀態(tài)與內(nèi)容變化的描述

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


2.功能直接描述

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


3.批量整體描述

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



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



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



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



2.圖形/圖標


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


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



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


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


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


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


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



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


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

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


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



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


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


兩個原因:


1.因為視頻的打開和關(guān)閉只有兩個狀態(tài),但是聲音不同,聲音在打開的時候還可以調(diào)節(jié)音量?。∪绻鸵曨l播放一樣,在播放的狀態(tài)下顯示的是靜音的圖標,那么音量調(diào)節(jié)就會變成這樣:




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


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


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



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



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




3.顏色


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


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


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


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


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





4.聲音

聲音意符就更有意思了,人們通過聽聲音來辨別發(fā)生方位、響度、發(fā)聲物體以及聲音的音色、質(zhì)感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家?guī)Щ氐酵辍?


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


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


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



5.動效

動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們?nèi)粘I钪幸灿玫降姆浅6唷?



例如我們看到理發(fā)店門口正在旋轉(zhuǎn)的彩色燈。


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


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


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


1.降低用戶認知成本

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


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




2.引導/提示/強化

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


3.氛圍、強化視覺

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



4.表示狀態(tài)

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





5.更多意符

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


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



小結(jié)


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


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


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

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

免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://www.yvirxh.cn

存檔