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

          首頁

          2022年你需要抓住的 8 個UI/UX設計趨勢

          純純

          2022 年的 UI/UX 設計趨勢是什么呢?在本文中,我們將發現:

          1. 3D 視覺設計師的內卷將會越來越嚴重
          2. 數據可視化的工作將變得越來越重要
          3. 服務的移動化還需要做出更多努力
          4. scrollytelling 技術會越來越流行

          滾動已死,滾動敘事興起

          舊的滾動是無聊的。如果你想吸引注意力,你就需要實現滾動敘事(scrollytelling)。(彩云注:這個技術的核心在于邊滾動頁面邊講故事)

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          《紐約時報》是第一批在他們的文章《雪花飄落》中使用滾動敘事手法的機構之一。

          它是一種敘事形式,可以在網頁和 APP 上呈現。想象一下,在一個網站中每個插圖、文本和其他元素都開始變得生動起來。自然地,你會想看到這個故事的結局。它就像一個游戲,帶你穿越迷宮。雖然你不能影響它的進程,但卻讓你感覺自己能參與其中。

          2022 年,Scrollytelling 將會出現在你看到的每一個流行網站上。

          另一方面,scrolllytelling 讓用戶真正去閱讀內容。你可以用動態文本讓他們產生興趣,比如谷歌的網站。他們的團隊知道如何讓信息看起來更好:

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Scrollytelling 在用戶向下滾動時被激活,因此得名。沒有點擊,沒有選擇的麻煩,沒有彈出窗口。你似乎停留在一個地方,但通過滾動,把屏幕上的故事慢慢展開。這不僅要求設計師創造出酷炫的視覺效果,還需要認真思考一個你想要講述的故事情節。

          所以,最好的網站不可能在 2 天內建成,需要更多的時間去打磨。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          IAmBinadam 令人驚艷的敘述設計

          滾動敘事的項目通常需要大量的時間和精力。不過,這樣做的結果是值得的。頁面變成“活的”,每一秒都有新的事情發生,所以在閱讀時很難感到無聊。

          那么移動端 APP 呢? Pure 是一款約會應用(彩云注,這個應用在 app store 可以搜到,推薦大家安裝一個體驗一下,非廣告),它創造了一種我稱之為“tappytelling”的故事(當你第一次點擊并打開應用時,它就會被激活):

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Scrollytelling 是為用戶而創建的,用戶很喜歡它,不需要到其他頁面去閱讀整個故事。相反,網頁設計的整個故事都是事先考慮好的,并盡可能以最有趣的方式設計出來。

          用戶喜歡看數據,數據可視化越來越被重視

          如何在 2022 年做出一個還不錯的企業網站?你不會想告訴用戶你是“XX 領域公認的領導者,該領域最好的之一”。這種標準的廣告表達并不傳達任何有價值的信息。

          最好不要用形容詞,而是用事實來說明:你有多少分支機構,在哪些城市,誰是你的客戶,以及你是如何幫助他們的。抽象信息是不可靠的。但如果你有很多想要分享的數據,你需要讓它不僅簡單,而且有趣。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          數據可視化有助于以一種吸引人的方式傳達正確的信息。它也可以與滾動敘事(Scrollytelling)緊密結合。以下是 IAmBinadam 展示數據的方式:

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          通過去除數據集的復雜性,使信息更容易讓讀者感知。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          不同級別的數據具有不同的大小,這樣用戶知道應該先從哪里查看

          讀者可以很快注意到作者試圖通過圖片引出的結論。考慮到如今人們消費的數據量巨大,那些干凈整潔的數字帶來的正面影響更大。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          有些圖表乍一看甚至不像圖表,這使得它們更加能被注意到

          還有一種現象叫做“新冠后遺癥”。這是 Covid 對公司及其員工的長期影響。根據英國國家統計局的數據,2018 年,壓力和焦慮的平均得分約為 2.7/10。自新冠疫情發生以來,得分已升至 4.0/10,很少低于這一水平。同樣因為大流行,在過去兩年里工作量增加了 4 個小時。

          人們壓力太大,卷的太辛苦,以至于不愿去看復雜的數據。

          設計師做好數據可視化,以保持人們的注意力。記住,復雜的信息通常被忽略,因為讀者試圖節省他們的時間,更有可能使用滾動按鈕。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Illustration by Mona Chalabi

          以下是我們推薦的一些表示數據的方式

          1. 圖表和曲線圖
          2. 插圖
          3. 靜態信息圖
          4. 互動信息圖

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Illustration by Ink Factory

          如何讓信息圖表看起來更好?

          一個好的圖表,或者任何其他形式的數據可視化,都應該具有在 Edward Tufte 的“定量信息的可視化顯示”中描述的特征。在他的書中,Tufte 通過圖表解釋了好圖表的 3 個原則:

          1)展示數據的圖形元素與數值總數的比值應趨向于 1。簡單地說,應該刪除一切不必要的元素,保持整潔。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Graph by Hootsuite

          2)充分利用好畫面空間。也就是說,需要將數據編排的更緊密。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Graph by Hootsuite

          3)客觀地描述數據。不要使用夸張的圖表,可視化數據可以看起來很酷,但真實永遠是更重要的。

          2022 年還有必要做 APP 嗎?

          根據 We Are Social 的數據,2021 年有 52.2 億人使用手機,約占世界人口的 66%。自 2020 年 1 月以來,手機用戶數量增長了 1.8%(9300 萬),而手機聯網總數量增長了 7200 萬(0.9%),到 2021 年初達到 80.2 億。

          過去一年,社交媒體用戶的數量增長了 13%以上。到 2021 年初,社交網絡上已有近 5 億新用戶注冊。根據 App Annie 的數據,Android 用戶每天花在手機上的時間超過 4 小時。2020 年,安卓用戶上網時長超過 3.5 萬億小時。

          令人印象深刻的數字,是嗎?似乎到 2022 年,為產品做一個 APP 將成為必須擁有的東西。如何知道你的公司是否真的需要一款應用?有以下幾點可供評估:

          1)用戶主要通過移動設備訪問你的網站

          這是你應該了解的重要數據??蛻艉湍阍谝黄鸬臅r間越長,你就有越多的機會去吸引他們,了解他們的習慣,并給他們想要的東西。(彩云注:這就是為什么各大廠之間都在拼命搶占用戶的在線時長。)

          2)幫助內部業務流程更加有效

          如果你想要提高員工的工作效率、改進工作流程或增加利潤,那么就制作一個可以幫助管理業務流程的移動應用。

          如今,像這樣的手機應用使企業能夠執行越來越復雜和多樣化的任務,加快日常重復操作和文檔管理。

          3)實現一些網站上沒有的新功能

          如果你認為 APP 能為用戶打開新的觸點,并讓用戶體驗更加友好,那么它就值得考慮開發。問問自己的 APP 能提供什么新的商業機會?例如,隨著疫情的蔓延,許多人開始用上健身 APP 在家里鍛煉。

          4)競爭對手的情況

          要了解競爭對手在做什么,他們是否有 APP,能做什么,以及他們是否真的對用戶有用。

          查看 App Store 和谷歌 Play 的統計數據。下載和評論的數量可以告訴你用戶是如何使用競爭對手的應用的。如果他們的服務真的很方便而且很有必要,那么你就容易被甩在后面。

          5)復購率

          一個應用可以幫助你留住那些習慣從你那里購買的人。如果想為老客戶開展促銷活動了,給他們發送一個通知就能完成,成本更低。

          在正確的時間提供的報價越有吸引力,人們購買的可能性就越大。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          出租車服務公司有回頭客,他們肯定需要一個應用

          6)促銷工具

          有了應用,你就不需要花錢設計和制作實體卡,客戶也不需要隨身帶卡。將促銷計劃整合到 APP,并分享有用的促銷信息。

          做原生 APP 還是移動端網站?

          開發手機網站比開發手機應用需要更少的工作量,這反過來可以降低整體推廣成本。

          這部分是由于響應式設計的出現,它允許你根據打開網站的設備屏幕來調整網站。至于 APP,它們必須為許多移動平臺單獨編寫:Android、iOS、Windows 等。

          一些設計師認為“前端驅動的網絡體驗”會是 2022 年的一個好機會,我非常同意!
          (彩云注:在國內,現在開發小程序的肯定越來越多了。)

          3D 設計具備更強競爭力

          我們一開始并沒有將其放在首位,因為這并不是一個新的趨勢,在很久以前設計師們就已經設計了很多 3D 圖像和動畫了。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Cardi B rhymes with 3D

          3D 技術已經在過去流行了很多年,但它不會很快消失。此外,我們預測 3D 圖形將變得更加多樣化和包容。

          在過去的幾年里,3D 藝術和動畫已經出現在各種 UI 設計趨勢評論中。這意味著越來越多的設計師將它們整合到頁面中。

          3D 當然應該成為 2022 年最熱門的趨勢和預測之一,因為與經典動畫相比,逼真的 3D 形狀結合動畫總是引人注目的。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          “從技術上講,通過 3D 更容易傳達更多內容,因為它比平面圖片更接近我們的感知。3D 插圖更有深度,信息量更大,也更具互動性。”

          許多設計師將 3D 對象無縫地“安置”在 2D 空間中。它允許創建更有趣的組合,也作為一個優秀的工作方法蘊藏著巨大的潛力。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          烏克蘭政府網站用 3D 手模擬了黑客帝國

          注意一點:在整合 3D 圖形等重量級內容之前,確保你的應用性能是 OK 的,能夠快速加載所有元素。

          元宇宙風潮

          Meta 的 logo 既不是 2D 也不是 3D?;蛘邇烧呒娑兄??這就是即將到來的 2022 年的莫比烏斯帶和薛定諤的貓。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          Meta logo 的變化

          (彩云注:這個概念在去年簡直不要太火,未來幾年肯定還會是一個大的趨勢,設計師也需要保持關注。跟著趨勢走,易于放大自身價值。)

          混合動畫

          越來越多的公司在網站和移動應用中使用動畫,以提高用戶的沉浸感和體驗,使內容更有趣。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          動畫是 2022 年重要的網頁設計趨勢。2022 年,如果沒有它,你的產品很可能會看起來就像個半成品?;旌巷L格的動畫越來越受歡迎:定格動畫和 3D 動畫的結合,2D 動畫和 3D 動畫的結合。設計師這樣做是為了獲得不同尋常的風格解決方案,以及提高最終產品的質量。

          2022 年,動畫設計將是品牌市場定位的重要組成部分,想想一個公司新的視覺形象——動畫形象。隨著這個領域的專業設計師數量的增長,實現新想法的機會也在增加。

          2022 年如何使用網頁動畫?

          1)講故事

          動畫可以通過在界面和用戶之間建立情感聯系來傳達信息。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          加載動畫 Yoichi Kobayashi

          2)更有趣的加載

          用戶不愿意等待,除非載入畫面很有趣。帶有百分比的動畫不僅可以分散用戶的注意力,還可以告知他們加載頁面需要多少時間。使用進度條或者任何你能想到的可以顯示時間流逝的東西。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          3)光標效果

          用戶可以精確地觀察光標所在的位置。通過添加智能互動動畫,對這個光標作出反應來探索網站。這種效果在 21 世紀初非常流行。如你所知,流行趨勢往往每 20 年就會重演一次。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          4)動態排版

          你有沒有想過讓字母跳舞?

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          添加角色的動畫插圖

          據 Statista 統計,2020 年全球動畫市場達到了 2700 億美元。趨勢是視頻,而不是靜態信息。全球品牌在社交網絡上使用動畫制作廣告。毫無疑問,動畫插圖的優勢是它們非常靈活和多樣化。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          寶馬歷史動畫

          這樣的作品通常用于兩種情況:

          1)用于解釋視頻

          2)電商廣告

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          動畫解說的趨勢出現在幾年前,解說視頻清楚地顯示點擊的位置或公司的項目是關于什么的。

          在招聘或商業視頻中,用戶更喜歡看畫出來的人物,而不是抽象的形狀或物品。畫出來的人物可以喚起情感共鳴,就像活著的人一樣。

          微交互,大影響

          微交互是幫助用戶瀏覽網站或應用的小界面變化。通常這些是作為提示用戶的視覺或聲音效果:它們顯示發生了什么,將導致什么操作,下一步需要做什么。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          圖片來源 awwards

          動畫交互將為你的設計注入活力,并有助于保持用戶粘性。關注每一個細節是設計師工作的關鍵,因為設計中的所有元素都可以帶來積極的用戶體驗。

          重要的是要達到元素的和諧,而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色,它們為界面元素增強價值。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          CTA animated

          微交互有助于頁面導航,解釋它們的功能。最重要的方面之一是加快和簡化以前冗長的功能,以實現特定的行為。

          動態 logo,加深品牌印記

          2022 年,在線品牌面臨著新的挑戰,需尋求新的解決方案,其中之一就是動畫 logo 設計。

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          圖片來源 Toridori

          動畫 logo 主要有以下幾點營銷優勢:

          1. 吸引注意力。這意味著它們有助于提高品牌知名度。
          2. 有助于提高 SEO。谷歌更傾向于動態內容,帶有動態圖形的頁面更容易吸引用戶。
          3. 在移動端看起來更好。絲滑的動畫看起來比靜態的 logo 更有趣。
          4. 最重要的是展示了歷史。靜態 logo 背后的想法正在動畫中發展。由于這一點,在幾秒鐘內,你可以展示品牌的使命,甚至它的價值!

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          一家洗衣機[公司]的標志

          現在有很多設計模板,可以很容易地用字體制作一個動畫 logo:

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          國外專業機構出品!2022年你需要抓住的 8 個UI/UX設計趨勢

          來源 Shabello, Bobby Voeten

          最后的話

          設計趨勢總是在變化的,但是設計的意義不會變。如果你不能深刻理解這一點,那么任何設計趨勢的文章不能幫你做好設計。

          文章來源:優設   作者:彩云Sky

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


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

          藍藍設計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.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量?。∪绻鸵曨l播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




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


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


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



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



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




          3.顏色


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


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


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


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


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





          4.聲音

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


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


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


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



          5.動效

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



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


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


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


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


          1.降低用戶認知成本

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


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




          2.引導/提示/強化

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


          3.氛圍、強化視覺

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



          4.表示狀態

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





          5.更多意符

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


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



          小結


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


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

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

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

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

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



          日期與時間的一點點設計細節

          ui設計分享達人

          絕對時間與相對時間


          絕對時間

          絕對時間包含:年月日、時刻

          絕對時間適用于對時間精確度要求較高的時候,比如說訂單創建時間、某項活動開始/結束時間、特定節假日簡稱等。絕對時間在信息表達上更加精準、正式,給人確定感和安全感;但是內容顯示過長,占用的空間較大。


          相對時間

          相對時間的展示形式:剛剛、XX分鐘前/后、XX小時前/后、X天前、昨天、明天、今天等

          相對時間適用于對時間精確度要求不高的時候,比如說消息、通知類功能、Feed流。采用相對時間對用戶來說理解成本低,不用去往前推算出發布的具體時間點;但是不夠精確、并很難衡量兩個時間點的臨近性。



          日期與標點符號


          目前主流App上,年月日的常見的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ~ 2022-12-30”,那這些日期格式是否都正確呢,日期的連接應該使用什么標點符號?


          《中華人民共和國國家標準GB/T15834-2011標點符號用法》中對于連接號、點號、分隔號的使用場景有明確規定。

          連接號(短橫線“-”、一字線“—”、波浪號“~”):標示某些相關聯成分之間的連接;

          點號(.):作用是點斷,主要表示停頓和語氣;

          分隔號(/):標號的一種,標示詩行、節拍及某些相關文字的分隔。


          表示具體日期

          基于國標對于連接號、點號、分割號的使用場景說明,用阿拉伯數字表示年月日時應采用短橫線“-”。在比較正式的文件、公告中,日期一般不用分隔符連接,而是直接采用中文的年月日連接。


          表示日期范圍

          Antdesign規定日期范圍需要在日期或時間范圍之間顯示波浪號 (前后需要空格),這種方式是不符合標點符號的使用規范的。



          在標示時間的起止時,應該使用一字線“”,而非波浪號“~”,波浪號主要用于標示數值范圍而非日期的起止。日期帶有分隔號橫短線“-”時,可以采用“至”作為連接符;日期不帶有分隔號橫短線“-”時,可以采用一字線“—”作為連接符。注意日期與連接符之間用「空格」隔開。



          時間

          時間計時方法包含十二小時制、二十四小時制。在設計過程中注意區分十二小時制,上/下午和A/PM的位置區別。


          日期與時間組合使用

          當日期和時間連在一起時,兩者之間用「空格」隔開,如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。


          涉及到周的時,可以將周放在日期與時刻之間,用「空格」隔開,如:“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。


          涉及到日期和時間范圍時,可在表示日期范圍的基礎上添加時間,如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。



          專有名詞


          以月、日為標志的事件或節日,用漢字數字表示時,只在一、十一和十二月后用間隔號;當直接用阿拉伯數字表示時,月、日之間均用間隔號。



          文章來源:站酷      作者:吳大只

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

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

          藍藍設計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”等部分或許會使你發現更多新的機會),也適合學生。
           
          希望你能在書中找到自己需要的、或自己感興趣的內容。
           
          以上就是我的分享,接下來把時間交給《用戶體驗四維度》。
           
           
          結語
           
          好的,謝謝作者李瀟的分享,讓我意識到我的出生似乎是個意外;也謝謝李瀟把我夸得這么好,但我還是要補充一句,他的夸獎僅供參考,一切以自己的切身感受為準。
           
          用戶即人,談用戶體驗,自然離不開對人的關注。人作為高級動物,自然有其強大和理智的一面;人作為動物本身——置身于高速發展的現代社會,置身于“亂花業已迷人眼”的智能化信息社會,置身于既相互溫暖也相互競爭甚至還相互“傷害”的同類中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


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


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


          - -  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 提供大量選擇?設計師要掌握平衡。看準時機提供選項,不僅簡化決策過程,還能為用戶提供發現、探索和嘗試所有可用選項的空間(和信心)。


          技巧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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

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

          存檔

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