首頁

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

純純

2022 年的 UI/UX 設計趨勢是什么呢?在本文中,我們將發(fā)現(xiàn):

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

滾動已死,滾動敘事興起

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

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

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

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

2022 年,Scrollytelling 將會出現(xiàn)在你看到的每一個流行網(wǎng)站上。

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

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

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

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

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

IAmBinadam 令人驚艷的敘述設計

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

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

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

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

用戶喜歡看數(shù)據(jù),數(shù)據(jù)可視化越來越被重視

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Illustration by Mona Chalabi

以下是我們推薦的一些表示數(shù)據(jù)的方式

  1. 圖表和曲線圖
  2. 插圖
  3. 靜態(tài)信息圖
  4. 互動信息圖

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

Illustration by Ink Factory

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

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

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

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

Graph by Hootsuite

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

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

Graph by Hootsuite

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

2022 年還有必要做 APP 嗎?

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

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

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

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

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

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

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

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

3)實現(xiàn)一些網(wǎng)站上沒有的新功能

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

4)競爭對手的情況

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

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

5)復購率

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

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

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

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

6)促銷工具

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

做原生 APP 還是移動端網(wǎng)站?

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

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

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

3D 設計具備更強競爭力

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

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

Cardi B rhymes with 3D

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

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

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

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

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

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

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

烏克蘭政府網(wǎng)站用 3D 手模擬了黑客帝國

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

元宇宙風潮

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

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

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

Meta logo 的變化

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

混合動畫

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

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

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

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

2022 年如何使用網(wǎng)頁動畫?

1)講故事

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

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

加載動畫 Yoichi Kobayashi

2)更有趣的加載

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

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

3)光標效果

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

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

4)動態(tài)排版

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

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

添加角色的動畫插圖

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

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

寶馬歷史動畫

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

1)用于解釋視頻

2)電商廣告

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

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

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

微交互,大影響

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

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

圖片來源 awwards

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

重要的是要達到元素的和諧,而不是把注意力分散到界面的各個方面。微交互作用的一個重要部分是顏色,它們?yōu)榻缑嬖卦鰪妰r值。

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

CTA animated

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

動態(tài) logo,加深品牌印記

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

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

圖片來源 Toridori

動畫 logo 主要有以下幾點營銷優(yōu)勢:

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

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

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

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

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

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

來源 Shabello, Bobby Voeten

最后的話

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

文章來源:優(yōu)設   作者:彩云Sky

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


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

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


UX可發(fā)現(xiàn)性咋提升?這12條技巧

純純

用戶找不到=不存在 


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


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


為什么為設計可發(fā)現(xiàn)性這么困難?

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


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


12個提升UX可發(fā)現(xiàn)性的技巧

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


技巧1:設計熟悉的界面

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


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


技巧2:優(yōu)先安排有價值的內容和功能

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


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


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

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


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

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


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

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


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


技巧5:減少選項總數(shù)

??硕芍赋觯脩糇龀龅臎Q定越多,決策過程所需的時間就越長,限制 or 提供大量選擇?設計師要掌握平衡??礈蕰r機提供選項,不僅簡化決策過程,還能為用戶提供發(fā)現(xiàn)、探索和嘗試所有可用選項的空間(和信心)。


技巧6:提供視覺反饋

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


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

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


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


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

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


技巧9:注意手勢交互

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

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


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

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

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


技巧11:提供視覺可供性

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


技巧12:提供視覺線索

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

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


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

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

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

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

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

純純

按鈕設計


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


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


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


01 按鈕 vs 鏈接

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

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

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



02 讓用戶直觀感受按鈕狀態(tài)

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



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

突出提示—用戶使用鍵盤,進入編輯狀態(tài);

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

點擊—按下狀態(tài)表示用戶已輕點按鈕;

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

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


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

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



04 建立按鈕樣式等級

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



05 《Don’t Make Me Think》

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



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


06 一致性的重要性

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


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



07 使按鈕足夠大以實現(xiàn)可靠交互

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


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



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


08 無障礙設計

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



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


09 手勢應用

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



10 按鈕標簽信息易于理解

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


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



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

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

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

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

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



12 避免使用禁用按鈕

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



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


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

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

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

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



交互設計的輸出文檔撰寫方法

純純

交互輸出文檔的作用

文檔這個東西,我們又愛又恨,愛的是它能夠記錄并且在工作中讓大家高效的協(xié)調合作,恨的就是很多人對文檔嗤之以鼻非常敷衍,以至于文檔不但沒有起到它應有的作用,反而成為了一個不負責任的借口。所以一份合格或者優(yōu)秀的交互輸出文檔對于一個項目的流轉以及團隊的配合來說是至關重要的。交互文檔的主要利益相關者通常是以下幾個角色:交互、產品、開發(fā)、UI


交互

首先優(yōu)秀的交互文檔必須在交互組內部進行過審核,包括一致的撰寫標準和模式的使用,一個比較規(guī)范的交互設計組對于交互的撰寫標準也是有嚴格的規(guī)范的,以及在什么情況使用什么交互模式還有組件庫的調用都會有詳細的說明,那么你的交互輸出文檔就必須滿足團隊設定的規(guī)范。


其次對于其他交互設計師來說,你的設計方案中是否會出現(xiàn)其他人負責的模塊,那么在評審的時候需要同步,雖然交互輸出文檔對于其他交互來說不是直接受益人,但是在團隊同步過程中也是非常重要的。


產品

每個公司對于文檔的要求和規(guī)則不一樣。小公司可能沒有交互設計這個崗位,那么可能產品連prd文檔也沒有,僅僅只是一個簡易的需求說明文檔,就更不用說針對交互規(guī)則的說明文檔了。


很多有完善規(guī)模和流程的團隊不僅會有詳細的需求說明文檔也有很完善的交互說明文檔。我們首先要明確的一點是那么多文檔最后是給誰看的,一共在項目中會有多少文檔產生。


通常產品經(jīng)理會在項目初期做一份prd文檔(Product-RequirementDocument,需求說明文檔),這個prd文檔主要是給業(yè)務方、交互和開發(fā)看的,在這個文檔中需要包含一些業(yè)務規(guī)則以及交互規(guī)則,所以交互的輸出文檔是需要和產品的prd文檔合并的。


當然如果你是一位很有自驅力的人,那么你可以自己推進需求并落地,一個人就可以完成prd文檔的撰寫和需求的落地了。


開發(fā)

特別想給各位提個醒,在開發(fā)需求評審的過程中,請一定記住你們評審的目的,開發(fā)同學也要注意,請把重點放在需求是否能實現(xiàn)以及開發(fā)相關的地方即可,請不要考慮為什么要這樣做,或者你覺得應該怎么設計,一旦進入了開發(fā)對需求和設計的評頭論足那么這個會議效率就相當?shù)拖隆?/strong>專業(yè)的事情就交給專業(yè)的人去做吧,可以私下討論但不要在評審會上各抒己見。


交互輸出文檔對于開發(fā)的作用就是,開發(fā)可以更好的還原該功能中交互的跳轉以及邏輯,所以我們盡量把交互規(guī)則寫明白寫詳細,比如按鈕在press和default時候是否樣式會有變化,或者頁面轉場的方向,這都是一些細節(jié),減少不必要的低效溝通。你會發(fā)現(xiàn)有些時候為什么開發(fā)總是來問一些規(guī)則,就是因為文檔中沒有描述準確,所以開發(fā)和交互都需要花時間去同步這個細節(jié)。



所以這個也非??简灲换ピO計師對需求文檔撰寫的功底,并不是圖片文字隨意擺放就可以的。和開發(fā)合作時也是一項內部的體驗設計,你把文檔寫好了,開發(fā)看起來也舒服,滿意度也高。如果是一堆文案,連基本的對齊都沒做到的話,誰來看都會看不下去。


UI

交互輸出文檔對于UI來說,作用就非常簡單了,但是這里也會碰到問題,那就是交互同學只需要把信息的層次表示出來即可,千萬不要畫到連視覺同學都沒有發(fā)揮余地的程度。所以為什么現(xiàn)在UXD體驗設計那么火,就是因為交互和UI其實重合度是很高的,只要有智能化組件庫和工具做支撐,那么在交互和UI的設計流程中,時間就會大大降低。


交互輸出文檔的內容

在這里,我們就將整個prd文檔的內容給大家分享一下,不僅僅是交互需要輸出的部分。因為一個高階的交互是需要能夠獨自產出prd文檔的。然后不同的公司對與文檔的要求也是不同,大家做參考即可。


一份基礎的prd文檔主要由這幾部分組成(其實就是這個需求的來源以及推導過程和如何落地的說明):



1.項目概要

a.需求背景

這個是一個項目最重要的部分,可以說背景沒有搞清楚,后面都可以不用做。這個指的就是我們做這個需求的價值和原因。比如我們app中業(yè)務方(運營)需要做一個掃一掃功能,那么這個功能首先我們就從業(yè)務價值和用戶價值兩個方面去評估,根據(jù)對業(yè)務方的溝通之后我們發(fā)現(xiàn)掃一掃功能將會在周年慶的時候通過物流包裹上的二維碼,讓用戶進行掃碼參與活動這樣的玩法。



所以這個需求對于業(yè)務方來說是一個轉化手段,通過掃碼參與活動-領券-消費,確實是一個不錯的玩法,但是大家如果只盯著眼前的問題或許就不夠了,比如當周年慶結束之后這個功能還有什么用,他在以后的規(guī)劃中的存在是怎樣的。在所有的包裹中印上活動的二維碼這個時間周期和成本有多大。


其次,對于用戶來說,掃一掃并不是幫助他們解決了某個問題,而是我做了一個東西,同時搭配著這個功能讓你們去使用,對用戶來說是一個很可有可無的功能,如果線下包裹上的二維碼破損了也是非常影響體驗并且是不可控的。那么綜上所述,既然要做一個臨時的活動用其他的方式會不會更好?


所以在這個文檔中的第一步,首先就是要確定需求的背景、價值,也就是說,你這個需求是怎么來的,比如再來講我們一個店鋪的優(yōu)化項目,在這個項目中,首先我們必須在評審的時候說清楚我們?yōu)槭裁匆獙ζ溥M行優(yōu)化和改版,一定是出現(xiàn)了或者我們定義到了某個比較嚴重的問題,這邊大家對我們app業(yè)務可能不是很了解我就簡單說了,就是個人中心和店鋪營銷場景重合過多,并且賣家的同時可以買和賣兩個場景存在,所以店鋪頁通過我們的數(shù)據(jù)分析和用戶的訪談我們發(fā)現(xiàn)了一些機會點,以及我們必須突出一個核心場景讓用戶有明確的分辨。


另外就是背景的描述也可以帶上你的調研結果和分析,比如之前我們做首頁優(yōu)化,我們觀察了近5個月的數(shù)據(jù),都呈現(xiàn)下降的趨勢,所以之后有進行了一系列的訪談和用戶體驗地圖分析才有了這個需求的背景產生。



b.需求目標

目標很好理解,就是我們希望通過這次需求迭代達到一個什么成果,比如我們之前做過一次整體的體驗優(yōu)化改版,那么我們的目標就是減少用戶的流程跳失、提升整體體驗滿意度、提高用戶的任務轉化率,其中我們做了一個商品關注的功能,由于是限時特價商品所以是限量的,在規(guī)定時間進行搶購,為了讓用戶的使用場景統(tǒng)一我們打算在應用內做一個商品關注功能,所以在這個需求的初期,我們對這個功能的目標和預期是提升xx百分比的轉化,提高x%比的gmv,提高用戶對關注商品下單的效率和滿意度,之前很多用戶想要購買商品需要自己在手機端設置鬧鐘,不方便。所以這個功能的一個目標就是解決用戶場景遷移的問題。設定目標之后,就是為了在上線后對其進行復盤和數(shù)據(jù)跟蹤還有用戶跟蹤。

可以用一句話來描述:針對什么用戶在什么場景下解決用戶的什么問題,達到什么目的?



c.需求范圍

需求范圍也相當于范圍層,指的就是在該需求中我們需要做哪些相關功能以及功能涉及面。舉個例子,之前說的掃一掃功能,不同的產品定位對于掃一掃功能的要求也是不同的,比如說微信在掃一掃功能中承載了:掃一掃、相冊、封面、街景、翻譯、手電筒等諸多功能,再比如淘寶,有掃一掃(ar、拍立淘)、相冊、歷史、幫助、手電,這說明了不同產品對掃一掃功能有不一樣的要求,所以在需求范圍內我們需要把本次需要做的功能進行描述,并且該功能是否影響其他功能的使用和對整個產品的影響范圍。并且我們也會講所需要的功能進行拆解和優(yōu)先級拆分,在表格中編輯。



d.調研分析

調研分析其實就是為我們第一步背景和價值做準備,由于匯報方案和評審,或者在項目推進時,我們需要有相應的論據(jù)來支撐我們方案的客觀性,所以在這一板塊中輸出的結論就非常重要,比如之前的首頁改版,經(jīng)過用戶研究小組的訪談和數(shù)據(jù)分析得出相關的結論,通過埋點找到相應板塊的點擊數(shù)據(jù)和異常點,然后再進行一系列的問卷和訪談研究,找到結果,都是為了輔助項目的背景以及在評審中大家對需求價值的靈魂拷問。由于數(shù)據(jù)和調研結果比較敏感就不過多放了。


e.版本日志

日志是一個非常重要的組成部分,做過開發(fā)的同學都知道log 的重要性,當我們跑不通的時候我們都會去檢查log,然后多測試幾遍可能就找到問題所在了,其實我們的版本日志的作用也是這樣,但是一個是對自己來說可以記錄自己的工作過程,還有思路的變化,第二就是對外,包括和需求方的討論,會議的紀要等。


要注意的是會議紀要在備注中需要詳細說明,以做證據(jù)。同時也要郵件通知相關人員和負責人。可能有些公司還會放一些評審記錄,比如各部門負責人對方案和需求的建議,業(yè)務方和技術負責人的一些建議也會放在項目概要中,而這個prd文檔也可通過內部服務器進行實時更新和保存,如svn。方便大家對需求的進度和迭代有一個直觀的追蹤。

f.項目成員

這個就不用多說了,產品、運營、交互、視覺、開發(fā)各司其職,照相館人員即可,就不至于當項目開始進行了人員分配還沒到位就尷尬了。


2.需求方案設計

a.業(yè)務、任務、界面流程圖

有些同學不是特別明白業(yè)務流程圖和任務流程圖的區(qū)別,這邊給大家簡單介紹一下


業(yè)務流程圖:

意思就是在這個需求系統(tǒng)中,相關利益者的業(yè)務關系,任務信息的流向的一個圖標。比如這個簡單的例子,用戶在點外賣這個場景中,相關的利益者有用戶、店家、外賣員三者,那么當用戶開始觸發(fā)流程后,這3者在這個流程中就會各司其職,而業(yè)務流程圖也很明顯的告訴大家所有聯(lián)動者的指責和流程走向。


任務流程圖:

用戶在具體執(zhí)行某一個任務時候的工作流程,以及其核心任務的操作步驟,比如在登錄注冊這個任務中,用戶需要進行一系列的操作,在這個流程中用戶的操作引發(fā)的系統(tǒng)判斷需要詳細說明。



界面流程圖:

界面之間的跳轉關系和路徑,在這個流程圖中,我們不需要吧詳細的說明寫上,只需要將需求中涉及到的頁面跳轉進行敘述即可。

b.相關說明和規(guī)則

接下來就要開始我們交互文檔最為關鍵的部分了,如何書寫交互說明,以及交互說明應該包含的內容。


1.全局思考

在做交互方案也就是我們畫原型的時候會思考一些問題:

a.整體思考

1.信息架構是否容易理解,信息分類是否合理,比如我們的信息架構是否采用了用戶容易理解的,市面上常用的信息架構。


2.信息層級和路徑是否合理,不一定要最簡,但是要高效,信息的優(yōu)先級是否放置準確,信息組織是否具有相關性、邏輯性。


3.主題是否清晰,3秒內告訴“我”在哪里,并且可以做什么


4.方案的延展和后續(xù)功能規(guī)劃的可擴展性


b.用戶權限

根據(jù)不同用戶的權限對該需求進行檢查,比如普通用戶、vip用戶、內外網(wǎng)用戶、游客用戶,在登錄未登錄時候對需求內功能的使用是否有影響


c.登錄方式

用戶登錄和注冊、終端的兼容,不同方式注冊的用戶是否需要補填相關信息等等


d.流程

1.該需求中的功能流程是否和其他類似或者相同功能流程保持一致性;

2.逆向流程和非正常流程的思考有沒有完全;

3.流程的閉環(huán)有沒有做好;頁面跳轉的方式是否合理;

4.中斷后的恢復狀態(tài)如何呈現(xiàn);

5是否保留原信息等等


2.內容、狀態(tài)和顯示

a.內容的獲取來源

例如下方的圖片為例,banner的圖片來源和發(fā)現(xiàn)feed流的圖片來源肯定是不同的,那么就要寫清楚,圖片或者數(shù)據(jù)的來源是來自于用戶的上傳還是系統(tǒng)后臺的配置獲??;并且獲取的方式是如何的,是需要手動下啦刷新還是切換頁面自動刷新,還是設定時間自動刷新。


字段、圖標是從接口獲取還是前端寫死,以及氣泡展示的規(guī)則等等。另外一張圖片可能用在多個地方,而可能呈現(xiàn)的尺寸不同,所以在涉及到相關圖片使用時要注意剪裁規(guī)則和圖片的來源。

b.緩存機制

圖片以及一些資源通常我們需要對其進行緩存,有些同學不清楚什么是緩存,緩存是在計算機上的一個原始數(shù)據(jù)的復制集,一般來說需要緩存的內容是通過瀏覽產生的,包括圖片以及cookie等,瀏覽過的視頻和廣告也會被緩存。同時在不同的網(wǎng)絡環(huán)境下緩存的時間標準也不同,無網(wǎng)絡那肯定只能讀取緩存文件,wifi環(huán)境下緩存時間可設置的短一些,而流量環(huán)境下時間就可以設置的偏長。


c.狀態(tài)

狀態(tài)大家都應該都會寫,主要包含的就是初始狀態(tài)(冷啟動無緩存第一次進入)、空狀態(tài)(無任何內容比如空的購物車)、常規(guī)狀態(tài)、異常狀態(tài)(網(wǎng)絡中斷、接口報錯)還有過期狀態(tài)等


d.顯示

數(shù)據(jù)和內容的極限值,最大和最小,比如粉絲和關注的數(shù)量,小于1萬人則顯示完整的數(shù)量,大于等于1萬小于11000則顯示1萬,大于11000小于12000則顯示1.1萬,這樣的方式。另外包括標題極限為一行顯示,超過部分的顯示規(guī)則。敏感信息、錯誤提示以及超時的信息提示。金額的格式使用¥xxx還是xxx元,小數(shù)點保留的規(guī)則。日期的顯示格式是xxxx年xx月xx日還是xxxx-xx-xx還是xxxx/xx/xx等等



3.反饋、提示、手勢

反饋和提示的樣式有很多種,一般反饋指的是用戶對某一個控件進行觸發(fā)后獲得的反饋,比如按鈕按下的反饋,以及之后收到的反饋,是進行跳轉還是給用戶提示,采用的是模態(tài)還是非模態(tài)的提示。比如點擊關注某個人的按鈕后會提示關注成功,比如退出某個圖文編輯會二次確認是否退出,再比如抖音長按后出現(xiàn)的3個操作反饋,還有支付成功后的動效提示、惡意多次操作后的提示等等


如果有手勢交互也需要說明,比如滑動后內容置頂、拖拽、左右輕掃的tab滑動、重按的3dtouch等等



4.加載

使用模態(tài)還是非模態(tài),如果是模態(tài)加載請盡量使用情感化設計來減少用戶焦慮。如果是非模態(tài),根據(jù)信息呈現(xiàn)和體驗采用分步加載還是預加載還是智能加載。如果是分布加載就選擇先加載資源較小的內容,再加載圖片,可以先將圖片模糊化粗渲染給用戶呈現(xiàn),包括在瀏覽信息流的時候的分頁加載也是可以的。如果更智能化一些也可以預判用戶的行為進行內容加載,例如當用戶在某個圖文前停留時間達到某個值后就預先給用戶加載里面的內容。


加載的全局方式在方案中需要考慮,頁面加載、下啦刷新等等,需要統(tǒng)一。



5.環(huán)境、設備與場景

a.不同設備、廠商的不同版本


都會影響到方案的落地和用戶體驗這個要非常注意。比如一些交互控件我們在6、iphonex和大屏幕尺寸上使用起來效果很好,但是小屏幕的時候這個交互控件顯得就很難受,所以需要仔細斟酌用戶的使用情況。另外還有橫豎憑情況的交互方案是否兼容、是否需要與其他硬件進行兼容。


b.白天和晚上是否需要做不同的風格設計,以及在是否需要給用戶遮擋隱私的功能。



6.文案

文案這點很多設計師都忽略了,你們有沒有聽說過一個叫文案設計師的崗位。其實文案在我們產品設計中是非常重要的。首先一個產品的文案對應的語氣和產品調性也是相關的,就好比我們說產品有它自己的性格一樣,另外文案的使用直接就影響用戶對該信息的理解,比如一個對話框的文案是:確定退出嗎?下面會有兩種不同的選擇,一個確定,一個是退出,大家覺得哪個比較好?還有就是不加“嗎”,就變成了:確定退出?這樣描述出來的語言給人感覺很冰冷,甚至有一些威脅。


所以首先我們的文案是否有溫度,和產品的個性是否相匹配。其次文案的表述是否準確和通俗易懂,比如你告訴程序員一句話,幫我去菜市場買西瓜,如果有西紅柿,幫我買兩個,你會帶什么東西回家?程序員版:if(看到西紅柿)西瓜等于2;else 西瓜=1。buy 西瓜。條件:看見西紅柿 執(zhí)行命令:買兩個西瓜一語道破版:其實吧,看到西紅柿呢是賣兩個西瓜的觸發(fā)條件…沒看到就買一個西瓜,看到就買兩個西瓜。所以這里出現(xiàn)的不僅僅是程序員的思維和我們的差異化,也說明了一句話沒有表述清楚所帶來的問題是很大的。


另外就是文案用語的一致性,在整個產品同樣的場景中,我們需要統(tǒng)一文案用語。


7.常見控件

具體見下方列表



8.撰寫方式

作為一個設計師,不管是否在做視覺,我們都需要對文檔有一個美化意識,如果你的文檔非常凌亂,那么在別人眼里就會覺得你是一個比較粗心大意,不夠負責任的人,所以我們盡量在做交互輸出文檔的時候也畫的美觀一些。


目錄

首先在目錄的撰寫時候要進行分類,通常我做的時候會對該需求以頁面父子集關系進行創(chuàng)建,父集為核心頁面,子集為其下的相關子頁面,這樣頁面的流轉和歸屬關系就不會搞錯。


說明

在撰寫規(guī)則與說明時可以通過標簽法進行標簽說明的撰寫方式,同樣在視覺上保持美觀,對比與對齊的運用,具體該寫什么東西上面已經(jīng)說明就不贅述了。除了交互規(guī)則以外,高階的交互設計或者產品經(jīng)理還需要補充業(yè)務規(guī)則,比如排序、商品抓去規(guī)則、權重、算法、活動規(guī)則等等這里就不展開說了。


總結

文檔的形式有非常多種,針對不同的公司和產品也需要作出相應的調整,能夠滿足需求和方便協(xié)作,目的就達到了,我們并不希望過多的時間花在文檔的撰寫上,而是希望大家在做設計時多思考業(yè)務,本次分享就到這里啦~

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

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



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



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


談談那些被誤用的交互設計模式

純純

習慣性的去應用一些所謂的最好的設計模式,可能會讓你覺得Google,F(xiàn)acebook,Instagram或者說其他的一些你最喜歡的APP總是做的非常棒,你會覺得,他們的設計目標和你自己的設計目標并沒啥差別,但是,人家成功了,而你的作品卻失敗了。所以,這里推薦一些被公認為是(至少曾經(jīng)被公認為)最好的設計模式,可能在你第一次看來,這些設計模式也就那樣。


1、隱藏導航


關于漢堡圖標,已經(jīng)有不下于50萬的文章來爭論它了。如果你一篇都未曾讀過,試著去讀一兩篇吧。其實,簡單說來,這些文章討論的主題更主要的是這個圖標里所隱含的那些導航,而不是這個圖標自身。



上面圖片這樣的設計對于設計師來說其實是很有吸引力的,而且簡直太方便了。根本不用擔心屏幕大小的限制,只需要這樣一個圖標,然后,把所有的導航全部塞進這個可以上下滾動的東西里,然后,讓他默認隱藏。就這樣,就這么簡單。


但是,實驗證明,與完全隱藏導航相比,適當?shù)恼故境鲆恍Ш侥軌蚋嗟脑黾佑脩舻囊蕾嚩群蜐M意程度,甚至為你帶來更多的收入。所以說,現(xiàn)在的好多大公司的播放器都拋棄了以前的漢堡圖標,將最常用的一些導航一直顯示給了用戶。




如果說你的導航比較復雜,那么,請在考慮優(yōu)先級的基礎上適當?shù)仉[藏導航。


2、圖標,隨處可見的圖標


由于移動端的屏幕大小限制,許多無腦的設計師為了節(jié)省空間,在任何只要能夠使用圖標替換的文本域,都使用了圖標。大家都這樣想,象形文字或者圖標占的空間又少,不需要額外的轉換,而且,人們都很熟悉這些圖標,難道不是這樣嗎?所以,每一個APP都這樣做了。


設計師們將上面的那種假設放在腦海里,于是,有的時候,他們將實用性的功能蘊含在了圖標里面,但事實上,那個圖標是難以識別的。比如,你能猜到在下圖的Instagram里的這個圖標點擊之后能夠發(fā)送什么信息嗎?



或者說,假如你從來沒用過谷歌翻譯,那么,你會期待下圖的這個圖標實現(xiàn)什么樣的功能呢?



你總是假設你的用戶們非常熟悉那些抽象的圖標,或者說,你總以為用戶們會花大量的時間去研究和學習你的這個圖標的含義。這是一個很普遍性的錯誤,很多設計師都會犯這個錯誤。


Bloom.fm上讓人覺得迷糊的標簽欄


如果說你曾經(jīng)設計過一個需要一個彈出框來解釋從而提高可用性的圖標,那么,即使你的用戶們會不管怎么樣都能了解它,你的這個做法也是錯誤的。




當然,并不是說你在設計中就一點都不使用圖標。你的用戶們熟悉大量的圖標,這些圖標中,有很大一部分都是能夠代表普通的功能的,比如搜索,播放視頻,郵件,設置等等。(但是,用戶們可能不會很確定當他們點擊一個心形圖標的時候,會發(fā)生什么。)


一些能夠被大多數(shù)用戶所識別的圖標并且被認為是通用的


對于復雜的和抽象的圖標,在顯示的時候,應該總是在旁邊加上一個文本來進行說明。這樣,你的圖標才是真正有用的。同時,還能夠提高菜單的可發(fā)現(xiàn)性,也能夠為你的APP添加漂亮的觸感和個性。


Pixelmator的導航


對于基本的功能,可以使用圖標來展現(xiàn);但是,對于復雜的功能,就需要使用文本來說明了。(如果你要使用圖標的話,要時常性的做可用性測試)


3、基于手勢的導航操作


當蘋果公司在2007年發(fā)布了iPhone的時候,多指觸控技術就成為了人們關注的主流技術,用戶們發(fā)現(xiàn)他們不僅可以在屏幕上進行點擊,還可以進行放大,縮小和左右輕掃。


手勢在設計們的圈子中流行了起來,許多的APP都圍繞著手勢操作來進行設計。


Clear里的手勢操作


就像隱藏的導航欄和使用圖標代替文本一樣,手勢看起來似乎能夠為設計師節(jié)約一些屏幕空間。(“屏幕上不應該有刪除按鈕的存在,人們只需要向左或者向右輕掃就可以進行刪除了。我們會決定怎么操作的。”)


關于手勢,你首先需要知道的是,手勢是不可見的。人們需要記住它們,就像漢堡菜單的例子一樣。如果你隱藏了一個選項,那么,用到那個選項的人就會越少。


另外,手勢存在著與圖標相同的問題:眾所周知的手勢有點擊,放大,上下滾動,同時,每個APP也有那些需要慢慢發(fā)現(xiàn)和學習的手勢。


不幸的是,觸屏界面的設計仍然是一個新的領域,在各個APP中,大多數(shù)手勢還不標準和統(tǒng)一。一個很簡單的手勢,比如左右輕掃,在各種各樣的郵件APP中可能都會大相徑庭。


在Apple的Mail APP中,向右輕掃,顯示出了“標記為未讀”的選項


同樣的手勢,在Mail Box中,就表示將郵件存檔


或者說,想一想,搖晃你的手機,在兩個APP中,也會有兩種不同的含義。在iOS中表示撤銷,在Google Maps中表示發(fā)送反饋信息。


永遠都要記住,手勢是隱藏的操作,人們不得不去記住它們。對于你的用戶,這需要大量的努力。如果你是一個發(fā)起人,也許你可以讓全世界的向右輕掃的含義都一樣——但是,只有當它是你APP的概念設計里必不可少的一個部分的時候。


4、新手引導


新手引導,最近很火的一個話題,適用于用戶第一次與APP打交道的時候。在很多情況下,這個簡單的方式能夠在一個透明的覆蓋層上為用戶展示一些標記來解釋界面元素。


dcovery APP里的新手引導


為什么說這是一個很爛的解決方案呢?因為許多用戶都會跳過你的介紹,他們想做的就是趕緊使用這個APP。即使他們注意到了你的這些標記,當他們把這個關掉的時候,這些所謂的教程也被他們忘得一干二凈了(尤其是當屏幕上擠滿了信息的時候)。最后說一句重要的,在你的屏幕上添加這些引導的標記,并不會提高APP的易用性,記住下面這句話:


原圖翻譯:用戶界面就和講笑話一樣,如果這個笑話還需要解釋才能明白的話,那么,這也不是一個好笑話。


對于你的用戶來說,新手引導也許可以使用其他的方式來設計的更加有用。比如Slack這個APP,使用第一屏來創(chuàng)建一個用戶場景。簡單的介紹一下他們自己,著重于利益而不是屏幕上的功能。


留住你的第一批用戶的一個更有效的方法就是逐步的引導。比如Duolingo,他沒有向用戶們解釋這個APP是如何工作的,而是促使人們做一個指定語言的快速測試(甚至不需要登錄),因為用戶們可以在做測試的過程中了解到這個APP是如何使用的。同時,這也是展示這個APP的價值的一個更有影響力的方法。



記得住左右輕掃的手勢在Apple的Mail APP里和在MailBox里的不同嗎?看看他們的逐步引導是如何做的:用戶們在開始使用APP之前,必須在APP所提供的一個練習場景里嘗試使用這個APP里的每一個手勢。



在你準備在一個半透明的覆蓋層上設計你的引導標記的時候,停下來好好想想第一次使用你的APP的用戶會有寫什么樣的經(jīng)歷。關注一下使用環(huán)境,通常情況下,有更好的方法來歡迎你的用戶們。


5、充滿了創(chuàng)造力,但是并不直觀的空白狀態(tài)


很多沒有經(jīng)驗的設計師很容易忽略APP的空白狀態(tài)。但是,從一個APP的整體用戶體驗上來說,這是一個很重要的方面。


有的時候,設計師們把錯誤信息和空白狀態(tài)的界面當作一塊展示他們創(chuàng)造力的畫布。


比如下面這張Google Photo的空白狀態(tài)界面:



第一眼看去,簡直太棒了不是嗎?一個漂亮的矢量圖加上完全符合設計規(guī)范的布局。


但是,再看一下,就會覺得有寫奇怪的東西了:


?這塊屏幕里什么收藏也沒有,但為什么這里會有一個那么顯眼的搜索按鈕呢?難道是想讓用戶在什么都沒有的界面里搜索什么?


?第二個很顯眼的元素就是這個矢量圖,很明顯不可以點擊(雖說會有很多人去嘗試點擊)。


?屏幕上的提示說,我應該找到在頂部的那個超級不起眼的“+”標志。為什么這個提示自己不包含一個添加按鈕呢?就像是在說“點擊繼續(xù)按鈕來繼續(xù)”


總而言之,上面這個空白屏幕沒有能夠幫助用戶理解用戶所在的這個環(huán)境:


?什么是收藏?他們?yōu)槭裁从杏媚兀?


?為什么我什么都沒有呢?


?我可以做些什么嗎?(我應該做什么?)


當需要創(chuàng)造力時,越少有時會越有用。下面這個空白狀態(tài)屏在可用性上就做的十分完美。(先讓我們忽略那個“現(xiàn)在就點擊下面這歌按鈕吧”的引導提示)


在Lootsy里的空白狀態(tài)屏


記住,空白狀態(tài)(類似于網(wǎng)頁里的404頁面)并不只是美感和品牌特色。在可用性上,他們更為重要。要讓空白狀態(tài)更為直觀。


多問多想


不要說我是錯的:設計模式和最佳的實踐仍然是你的好伙伴。但是要知道,APP和用戶是不一樣的:在一個APP里能夠適用的方案,在你自己的APP里,也許就一點不適用。這不是一個通用方案就能解決的事情。另外,你永遠不可能知道為什么一個APP會以某種方式來設計。


自己要多想想,多設計,多研究。

文章來源:站酷   作者:鄭小小壯

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

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

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

交互深耕-B端設計師要懂的信息架構

純純

網(wǎng)上關于信息架構的知識內容參差不齊,在學習與探究的過程中查閱了很多資料,反復修改多次,盡量用直白的語言結合實例來闡述信息架構。目錄如下:





1.1 前言

這篇文章的起源,來源于最近看到的話題“B端設計師會被組件庫取代嗎?”。從表面上看,在組件庫越來越完善的時代,很多頁面設計依靠組件庫就能夠快速搭建。


那么在這種情況下,B端設計師存在的意義和價值到底體現(xiàn)在哪里呢?其實B端設計的重點并不在頁面的視覺上,視覺只是作為設計師最終輸出成果的一小部分。個人認為B端設計師工作重心體現(xiàn)在做「正確的設計」,比如以下幾個方面:

1.這個設計能否完成對應的商業(yè)目標和產品目標;

2.我們的信息呈現(xiàn)是否合理以及能否解決當前需求;

3.用戶能否在頁面上快速找到想要的信息;

而想要弄清楚并解決上述這些問題,在眾多的話題闡述之下,我發(fā)現(xiàn)其論述本質上都逃離不了「信息架構」這個概念。因此我認為設計師都需要對這個概念有充分的認知,這能夠幫助我們做出正確且出色的設計。


1.2信息架構概念

關于信息架構的概念,在百科上面的定義大部分都比較晦澀難懂,比如維基百科和百度百科的解釋:

相信大部分人都很難明白其中描述的意思。在這里換種思路,將信息架構拆分為信息與架構去理解。

信息指的是內容的載體,常見的文字、圖像等都是信息;架構的含義則形容對應的組織和結構。那么信息架構就是將信息通過一定的形式組織起來,然后呈現(xiàn)出來。其本質就是研究信息的表達與傳遞。

通俗點講,信息架構就是讓用戶可以更容易的理解我們的產品,讓用戶在使用我們的產品時可以更順利、更自然。因此信息架構沒有一個具體的呈現(xiàn)形式,它更多的是體現(xiàn)在產品設計的各方面。具體主要表現(xiàn)為組織系統(tǒng)、標簽系統(tǒng)、導航系統(tǒng)和搜索系統(tǒng)。





為什么需要信息架構?我們都知道B端產品設計的核心是「降本提效」,在設計這一側的可以將其理解為降低認知成本,提升使用效率。

降低認知成本需要我們更好的表達信息,讓用戶能看明白我們的產品能夠做什么,如何用;提升使用效率需要提升信息的傳遞效率,讓用戶能夠很容易的找到需要的功能;


而信息架構從本質上來講也正是研究信息的表達和傳遞。因此我們需要通過它來幫助我們更好的完成B端產品設計。如果沒有信息架構來作底層支撐,那么我們在頁面上看到的可能就只有功能的堆疊,讓產品陷入難以上手或者不知道怎么用的尷尬境地。

一個強大信息架構是產品質量的保證,是作為設計支撐點的骨架,它會減少可用性問題,提升整體導航行,創(chuàng)造對用戶友好的體驗。比如舉一個工具層面的例子:

PS的工具欄堆疊在界面各個部分,而Figma的工具欄則集中在右側且只出現(xiàn)當前需要的功能。很明顯Figma在信息架構中的信息組織部分做得更為友好,PS則會顯得遜色一些。這也是我們在學習PS的時候會顯得比較吃力的原因之一。


可以說良好的信息架構是高效用戶體驗的基礎。視覺元素,功能,交互和導航都是在信息架構的基礎上構建的。因此想要做出體驗好且合理的頁面設計,我們就需要參與到信息架構這個過程中來,和產品一起完成對應架構的梳理。而不是只完成從原型到頁面這個部分。


如果想要搭建一個好的建筑,我們需要知道其建造的目的,是按照什么樣的結構搭建,內部有哪些系統(tǒng),以及最后呈現(xiàn)的模樣。


那么信息架構也同理,我們首先需要知道信息是為了什么目標服務,然后我們通過怎樣的結構來組織這些信息,以及過程中會用到的信息元素,最后如何呈現(xiàn)它們。這都是我們在搭建信息架構中需要進行的必要步驟。如果某些環(huán)節(jié)沒有做好或者沒有了解透徹,那么在輸出信息架構時往往會出現(xiàn)方向或者策略上的問題。接下來我們看看這些步驟是如何具體呈現(xiàn)的。


3.1 信息獲?。合壤斫鈽I(yè)務,再談架構

B端行業(yè)對于業(yè)務理解的要求是比較高的,只有在理解業(yè)務的基礎上,將業(yè)務需求轉化為對應的設計目標,我們才能夠輸出合理的信息架構方案。

個人認為理解業(yè)務的基礎,就是能夠用一句話講清楚當前設計的產品。這句話可以描述為:誰在什么地方想要完成什么目標。比如「用戶想要不出門就能夠吃到東西」,這就是外賣軟件提供的產品服務。


雖然看上去這句話很簡單,但其中包括了三個要素:用戶、場景和目標。因此我們在分析和梳理業(yè)務的過程中首先要弄清楚的就是這三個要素。


3.1.1用戶:分清購買者與使用者

用戶永遠是排在第一位的,也是我們首先需要弄清楚的。在B端設計中,本質上可以分為兩類角色:客戶和用戶。比如我們常用的釘釘或企業(yè)微信,購買客戶是企業(yè),實際用戶是員工。

對于企業(yè):「我想要有一款軟件可以更好的管理員工」

對于員工:「我想要這款軟件能夠更好地提高工作效率」

客戶決定了我們產品的購買(部分情況下也兼顧使用),而用戶則決定了后續(xù)產品的復購率。因此在業(yè)務理解中,我們需要弄清楚當前產品所處的服務階段,比如初期為了打開市場肯定更傾向于客戶,而中后期為了提高產品的使用體驗又會偏向于用戶。


因此我們首先需要弄清楚的就是當前產品是為哪些「目標用戶」服務,這也就決定了我們在設計信息架構時對應的不同側重點。


3.1.2場景:需求源于場景

場景是指需求產生的某種條件,這個條件包括但不限于環(huán)境、時間、地點、空間等,只有上述條件滿足,這個需求才能成立。這里可以把場景理解為產生該問題的原因

比如當用戶提出「她需要一件衣服」,那么我們就需要弄清楚用戶為什么需要添加衣服,是她感冒了自身覺得冷還是因為外界環(huán)境冷。這兩種場景涉及到的解決方案是完全不一樣的。


在平日的工作中我們可以通過以下兩種方式來更好的了解業(yè)務場景:

1.通過業(yè)務方文檔進行業(yè)務背景的初步理解。業(yè)務文檔中一般都會包括需求背景,我們可以通過文檔進行初步了解。

2.通過業(yè)務溝通進一步加深業(yè)務背景的理解。由于很多B端業(yè)務離設計師本身的生活比較遠。因此對于需求背景中不理解或者比較模糊的部分,我們可以通過與業(yè)務方或產品多次溝通來挖掘最底層的背景。

畢竟需求背景是理解業(yè)務的重要步驟,我們只有知道需求產生的原因,才能夠針對性的給出解決方案。


3.1.3目標:業(yè)務目標和設計目標

目標決定了我們的產品最終的方向。我們首先接觸到的一般都是業(yè)務目標,而我們要做的就是將業(yè)務目標轉化為我們此次的設計目標。


A.業(yè)務目標

業(yè)務目標就是此次業(yè)務想要解決的實際問題,它通常是一個宏觀上的描述。比如打車軟件的業(yè)務目標簡單概括來講就是讓用戶能夠更快速地打到車,減少等待焦慮。我們一般通過文檔或者溝通來了解該目標。


B.設計目標

設計目標是我們基于業(yè)務目標而給出的設計策略,是一種更具體的實現(xiàn)方式。比如我們要讓用戶快速的打到車,那么這個時候我們的設計目標就是通過將用戶位置和司機位置進行快速匹配,并通過超時補貼紅包的方案來降低用戶焦慮。從而實現(xiàn)業(yè)務目標。而這一過程涉及到的信息點就有:司機位置、乘客位置、等車時間、補貼金額等元素,并需要思考它們之間的關系和呈現(xiàn)方式。


可以發(fā)現(xiàn)從業(yè)務目標轉化到設計目標這個過程,實際上就是在確定功能和信息點的過程。這樣才能讓我們更好地設計信息架構。


3.2信息架構核心:信息組織

從前文可以看出我們會在整體設計過程中出現(xiàn)很多的信息元素。如果不經(jīng)過對應的組織和處理,直接堆疊在一起,那么信息含義會比較亂且難以調用。比如下方:

而右側圖片信息的組織過程可以理解為通過將零散的數(shù)據(jù)信息進行分類,再以某種結構化的形式將它們重新組合排布的過程,直白一點就是先分類,再結構化呈現(xiàn)。我用一張圖來表明這個過程:

那么這個過程中「信息組織」和「結構呈現(xiàn)」到底應該怎么做,也就是接下來要講的組織方式和結構類型。


3.2.1組織方式:模糊分類和精確分類

組織方式可以分為精確分類和模糊分類。精確分類就是我們會利用物體本身物理屬性來進行分類,比如位置、字母表、時間、類別、層級等方式進行組織。一些工具類應用例如滴答清單內容信息都是按照時間來進行組織的:

而模糊分類則是按照更為主觀的邏輯對信息進行分類, 如主題、任務、用戶、隱喻等來進行歸類,比如我們常用的APP商城是按照不同的主題類別來進行區(qū)分的。

但在很多時候,產品傾向于將兩種組織方式結合起來形成復合型組織方式,從而能夠使我們的整體組織形式更符合用戶的使用習慣。比如藍湖的信息組織,其中既包含了模糊分類(按使用類型等分類),也包含了精確分類(按上傳文件時間等)。

其實在大部分B端產品中,大都按照模糊分類來進行處理,比如按照任務、流程等方式。而精確分類更多用于在頁面內的局部信息模塊,比如創(chuàng)建時間和文件大小等。


歸根結底,我們分類方式的選擇需要結合我們前面提到的用戶、場景和目標,這樣才能讓我們的分類更具說服力。


3.2.2組織結構:選擇合適的結構類型

當信息按照分類維度組織后,我們接下來就是把整體信息進行結構化,這樣才可以將信息整體連接起來并呈現(xiàn)出來。一般分為以下四種組織方式:


A.層級結構(最重要的結構)

這是信息架構中最為常見的結構,也是比較符合用戶認知的結構。有時也稱為「樹狀結構」。以子父節(jié)點的形式一層一層延展。

層級結構的優(yōu)勢就在于可以承載復雜的多層級內容,通過層級遞進的方式將復雜的多層級拆解得更簡潔。


但我們需要把控好內容的廣度和深度,廣度指的是在層級結構中每一層的數(shù)目,最好控制在7個以內。如果廣度太寬意味著每個頁面會給用戶展示太多的信息,增加尋找內容的負擔。深度為縱向結構,建議一般3層,最多不超過5層。過深的層級會讓用戶點擊很多次,且不容易被用戶發(fā)現(xiàn)。比如飛書的基本信息架構也是主要以層級結構來進行的。


B.矩陣結構(多維度結構)

矩陣結構是各個節(jié)點都相互連接的一種信息架構方式,通俗來講就是用戶既可以通過多個維度去觸達同一信息,也可以從單個維度連接多種信息。

這種結構其實就更類似于我們在做相關功能時:比如當你進入電影全屏時想要退出時,既可以通過點擊按鈕退出,還可以通過鍵盤的Esc返回到,通過多點觸達同一操作。


又比如我們的聯(lián)系人功能,我們既可以通過輸入數(shù)字撥打電話,也可以查找聯(lián)系人進行撥打,還可以查詢電話記錄進行回撥。

矩陣結構最重要的意義在于給用戶提供多種路徑,使用戶能夠在不同路徑中尋找各自想要的東西。


C.自然結構(隨機性)

自然結構不遵循任何一致的模式,節(jié)點都是被逐一連接起來的。

自然結構一般都具有隨機性和不確定性。這種更傾向于泛娛樂化的C端應用。比如我們常見視頻網(wǎng)站的在推薦流都是應用的自然結構。比如打開B站等視頻平臺,你很難猜到剛進入看到的是什么。

但一般自然結構不會單獨存在,比如B站在自然結構中也綁定了層級結構來進行層級上的劃分。


D.線性結構(單一性)

線性結構是非常單一的一個結構,整體是一層一層向下遞進。比較強調先后順序的一種結構。


這種結構通常用于我們常見的軟件安裝程序等,也可以用于部分功能結構,比如網(wǎng)站的視頻發(fā)布,一般都是經(jīng)過上傳-編輯-發(fā)布這三個步驟來依次進行。

大家可以發(fā)現(xiàn)在進行信息架構時,我們在很多情況下可能會運用多種組織結構方式,我們需要根據(jù)對應的用戶決策場景來考慮讓最適合的幾種方式相結合。但最終目的都是為了讓用戶能夠更快速的獲取信息。


3.2.3注意事項:關注用戶心智模型

在信息的組織過程中,我們需要注意用戶的心智模型。比如當我們看到紅點就知道有新信息通知,看到下拉箭頭就知道可以展開。這是互聯(lián)網(wǎng)產品在無形中給用戶建立的底層習慣認知。用戶目前對于普遍產品的一些基礎布局、功能名稱和交互邏輯都形成了一定的習慣,這都屬于用戶的心智模型的內容。


因此我們在組織信息時盡可能不要去打破用戶常見的心智模型,否則必然會導致用戶的不習慣。我們常見的「掃一掃」功能,微信、支付寶和QQ會隱藏在「+」號里面。而微博和抖音卻分別放置在了「我的」和「搜索」里面。

這樣會導致用戶難以發(fā)現(xiàn)該功能。因為用戶接觸新的信息時,會以最初接觸的局部信息為依據(jù)展開并形成初步認知,用戶認知中的信息組織邏輯和實際信息的吻合度越高, 他在進一步查看或尋找信息的過程中體驗會更順暢, 反之, 若一開始形成的認知與實際信息的差異過大, 在后期的信息搜尋過程中則容易遇到困難。而這個吻合程度其實就是用戶心智模型。


雖然建議在一定程度上遵循用戶心智,但并不是說絕對遵循。對于用戶不熟知的場景或者某些專業(yè)術語,我們需要通過靈活有效的提示(比如標記注釋等)來引導用戶就可以了。比如我們剛才提出的抖音掃一掃,它的應用場景其實是用于抖音官網(wǎng)后臺登錄,且在后臺登錄時已經(jīng)給出了對應提示,那么這樣的設計也是合理的。


3.3信息架構支撐:標簽、導航和搜索

當經(jīng)過上面的信息組織,其實我們已經(jīng)能夠歸納出一個大體的信息架構框架。但在信息組織之外,我們還需要關注以下三點:標簽、導航和搜索。這對于信息架構的完整性也有非常重要的意義。


3.3.1 標簽系統(tǒng):讓信息識別更通用

標簽系統(tǒng),通俗來講就是要我們對當前整個系統(tǒng)信息節(jié)點的命名,從而讓信息的呈現(xiàn)更容易識別。拿個最簡單的例子來進行說明:

可以看到左側和右側關于衛(wèi)生間的信息標示,可能左邊你能一眼區(qū)分,右邊可能就需要反應半天才能猜出到底代表什么含義了。


這其實就是關于我們的信息命名是否能夠被大多數(shù)用戶所接受的場景,也就是我們標簽作用所起的作用。標簽可以分為圖片和文字標簽,都需要考慮用戶對該信息命名的認知程度,也就是前面提到的心智模型。那么如何能夠更好的去定義標簽名稱呢,這里需要注意2個方面:


A.優(yōu)先選用被行業(yè)廣泛接受的詞或圖標

在進行標簽定義的時候,盡量選擇已經(jīng)被用戶所熟知的詞語,比如「工作臺」「通訊錄」等已經(jīng)被運用得非常熟練,對于類似功能就直接以該形式命名,比如我們的設計軟件中,很多圖標和功能名稱都是通用的:

這樣做能夠很大程度減少用戶的學習成本。因此在B端設計中我們也需要注意到我們所在的行業(yè),哪些名詞已經(jīng)達成了共識,就無需再造新名詞。


B.不確定的詞語可以參考競品或調研來決策

當某類功能或場景的標簽難以確定時,我們就可以嘗試去找一下競品是否有類似功能,或者找該行業(yè)的領頭羊(比如聊天工具的巨頭微信),那么在進行標簽定義的時候,可以參考它的命名體系。因為它已經(jīng)替我們教育了一部分用戶,會間接降低學習成本。


如果某些標簽在上述過程中還是無法確定,那么我們結合自己經(jīng)驗或者與咨詢業(yè)務相關人員來進行討論,在必要時候可以在標簽旁邊添加注釋來進一步說明。


3.3.2 導航系統(tǒng):讓用戶不迷路

導航系統(tǒng)其實應該是大家比較熟知的一個系統(tǒng)了。就像使用導航系統(tǒng)來規(guī)劃行程一樣,導航系統(tǒng)都會存在于每個網(wǎng)站中。比如我們常見的側邊導航、頂部導航等。

因為網(wǎng)上關于導航系統(tǒng)已經(jīng)有很多資料的講解了,在這里闡述下四類導航的含義:

1.全局導航:位于頁面最上層的導航,用戶幾乎在頁面的每個地方都可以看見,是最高層級的導航系統(tǒng);

2.局部導航:位于最高導航的下級子類導航,子類導航并不是必須的導航,根據(jù)場景進行取舍;

3.情景式導航:通過點擊文字鏈接進行跳轉的導航,比如在個人資料里面植入其它網(wǎng)站的鏈接地址;

4.輔助導航:這里包括網(wǎng)站地圖,網(wǎng)站索引,網(wǎng)站指南等輔助類型的導航。


輔助導航的網(wǎng)站指南包括新手引導和演示教程等。現(xiàn)階段更巧妙的功能引導,是當用戶在進行某些功能的操作時及時進行提示,這樣不僅達到了為用戶引導的效果,還減少了一連串的新手引導對于用戶的打擾。比如figma在進行組件更新后,只有當你調用組件功能時,才會及時進行提醒。


3.3.3 搜索系統(tǒng):讓用戶輕松找信息

搜索,是我們平日最常用的查找信息的功能,它能夠幫助我們快速進行信息的檢索。雖然搜索功能非常重要,但并不是每個系統(tǒng)每個頁面都需要搜索。我們決策是否添加搜索時需要考慮下列三點:

1:內容復雜度:當前頁面承載的內容復雜度如果較少,對于簡單內容頁面往往不需要搜索;

2:內容性質:當前頁面的性質是偏向于用戶瀏覽還是查找,根據(jù)用戶行為來決定是否需要搜索;

3.搜索場景:如果搜索場景很簡單,考慮是否只用篩選或分類就能夠解決問題;反之如果搜索內容很復雜,我們還可以搜索結合篩選來更好的查找信息;


上述3點決定了我們是否需要考慮搜索功能。而關于搜索的其他細節(jié)點,比如搜索規(guī)則和搜索結果等,在這里不做進一步的闡述。在這篇文章中更重要的是弄清楚我們何時需要搜索功能。


3.4信息架構表達:視覺化你的架構

我們通過上述方法已經(jīng)知道如何梳理信息架構了,那么我們應該如何呈現(xiàn)它呢。這部分其實也是很多資料中比較模糊的點。

在學習的過程中,發(fā)現(xiàn)部分資料認為信息架構就是單純的指思維導圖,但實際上信息架構并不能單純只用思維導圖就能夠完全表示。

因為信息架構包含了很多部分的內容。只能說思維導圖可以是信息架構的一種表現(xiàn)形式,其可以幫助我們在思考階段梳理整體產品的信息構成。


這里拋出一個很有意思的觀點,那就是「功能結構圖」和「信息架構圖」到底什么關系,這里用兩張圖示例:

可以看到,功能結構圖更多體現(xiàn)的形式是功能闡述,一般形式為名詞+動詞,比如頭像設置;而信息架構圖重點呈現(xiàn)的應該都為信息元素,一般為名詞,比如頭像圖片。

但在大多數(shù)時候我們看到的產品架構圖,其實更偏向于功能結構圖和信息架構圖的結合。因為在很多時候闡述信息構成時需要依賴功能進行輔助說明。


因此這篇文章講述的信息架構更偏向于基于產品的整體架構。其實信息架構對于呈現(xiàn)形式并沒有特別的限制,只要能夠幫助你清晰表達產品整體結構就行。《信息架構:超越web設計》第4版中其實也并沒有對表現(xiàn)形式這一塊進行嚴苛的定義,其用「顯示信息元素間的關系——站點地圖」的說法概括了信息架構的呈現(xiàn)形式,其表達如下:

可以看到其表達形式包括思維導圖和流程圖等形式:思維導圖的優(yōu)勢是能夠總覽全局信息,查看信息的深度和廣度,而流程圖的優(yōu)勢則更能夠表達整體的邏輯關系。


因此信息架構的呈現(xiàn)需要根據(jù)你的產品場景選擇合適的視覺框架表達。不必讓形式限制了我們的發(fā)揮,而是應該形式追隨于我們的架構表達。其只是一個信息梳理結構的說明結果(類似于中間態(tài)),我們需要借助它來更好的闡述思路與溝通想法。


3.5信息架構之后:讓信息具像化

在輸出信息架構之后,其實這里想聊一聊頁面的呈現(xiàn)。因為當梳理好大的框架后,剩余的頁面細節(jié)其實都需要通過原型圖來進行體現(xiàn)。這個過程是從框架到頁面的階段,其實對于設計師來說也是很重要的部分。在這里根據(jù)自己的理解列出了以下幾方面的注意點:

A.頁面能夠讓用戶看懂

這其實就是涉及到我們的信息組織和標簽系統(tǒng)。如果當我們的某個頁面不能讓用戶第一時間獲取到該頁面表達的信息,反思一下是在哪個方面做得不好。是標簽系統(tǒng)含義模糊呢,還是信息的組織分類方式不對。從頁面呈現(xiàn)倒推信息架構。

綜合來說就是設計時的排列要考慮用戶的心智模型(比如網(wǎng)頁的常規(guī)排版和通用名詞定義等),對于某些難以理解的地方給予用戶幫助和解釋。雖然B端產品想要完全避免學習成本是不可能的,但我們可以盡量減少其學習成本。


B.考慮用戶的視覺動線

當我們在進行信息排列時,這時需要思考的就是用戶的視覺動線,也就是我們常說的視覺瀏覽「F模型」和「Z模型」。對于不同的信息流來說,采用不同的動線模型能夠讓用戶更好地查找信息。

F模型和Z模型的使用區(qū)分其實就是在使用場景上,對于內容頁面來說F模型會更為合適(比如文章或者搜索結果),適合文本類的內容。但對于非文本的頁面,則更適合用Z模型,Z型模式的設計跟蹤了人眼掃描頁面時的路線——從左到右,從上到下,能夠更好引導用戶的視線。


C.掌控好適度的信息層級

B端由于在視覺的發(fā)揮空間不多,那么相對來說保持良好的信息層級能夠讓整體的體驗變得更為良好。

不管是原型圖還是視覺,整體的視覺層級要體現(xiàn)得更為清晰。按理說最好的視覺層級控制在三級左右。如果發(fā)現(xiàn)視覺層級過多,需要考慮是不是因為信息架構設計時縱向層級過深,通過調整架構的形式來更好的呈現(xiàn)信息。以及對同頁面的信息進行重要程度分級。


當我們做完或者聽別人闡述對應的信息架構時,該如何評判呢,到底怎樣的信息架構才算優(yōu)秀呢。個人認為可以從3方面去進行判斷:

業(yè)務層:

1.設計目標合理:能平衡商業(yè)目標和用戶的目標,保證客戶和用戶都有較為良好的體驗;

2.核心任務目標:能夠讓用戶順利完成產品的核心任務,需要通過用戶測試來進行驗證

結構層:

1.平衡廣度和深度:在進行功能使用時不會隱藏的太深而找不到,是否有冗余步驟

2.保證拓展性:當前信息架構在面對未來新增或者刪減信息時能夠穩(wěn)定拓展

體驗層:

1.保證易讀性:用戶不經(jīng)過介紹,通過頁面信息呈現(xiàn)能夠看懂該產品是用來做什么的

2.保證易查找性:用戶在需要某個功能時能否快捷的找到,是否有多種查找方法(比如搜索或篩選)


合理的信息架構需要具備以上條件,我們需要在做設計呈現(xiàn)時也盡量保證以上條件。但在很多情況下其實并不能完全滿足,這個時候我們需要根據(jù)業(yè)務目標的重要性來選擇某些點進行滿足。


梳理一下整體文章的架構,其實是按照「是什么-為什么-怎么做」的形式來進行拆分的:

這篇文章想要表達的觀點,不是讓設計師獨立去梳理整體信息架構,而是讓設計師擁有信息架構意識,了解其是如何進行并產生的。這樣你在看到整體架構時,有足夠的理論支撐去判斷它的好壞,并通過自己的理論認知去理解和改進不好的地方。


當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出「正確的設計」,避免成為無情的作圖機器。信息架構作為產品交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。


注:文章中不可避免會存在不足之處,如果對文章中內容有更好建議,歡迎隨時交流。


  參考資料:

《web信息架構》第四版

《信息焦慮》

《用戶體驗要素》

《信息架構設計》

「從設計前/設計中階段,了解信息架構知識點」

「互聯(lián)網(wǎng)產品如何搭建信息架構」

文章來源:進擊的M(站酷)
作者:進擊的M

轉載請注明:交互深耕-B端設計師要懂的信息架構

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

B端引導設計指南

純純

B端產品中很常見但是很少提及以及忽略的一個領域——引導設計



文章來源:一九互七(站酷)
作者:一九互七

轉載請注明:B端引導設計指南

藍藍設計建立了UI設計分享群,每天會分享國內外的一些優(yōu)秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯(lián)系,我們立即更正或刪除。

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

UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


插畫設計中常見的九種構圖技巧,都在這里了!

純純

畫插畫可以用哪些構圖方式?他們的優(yōu)缺點是什么?本文總結了9種常見的構圖方式。


框式構圖



對角線構圖



向心式構圖


對分式構圖



三角構圖



垂直線構圖


緊湊式構圖


S型構圖


三分式構圖


(原文章來源于:https://www.uisdc.com/illustration-composition

Banner設計指南

純純

近一年多接觸到了插畫 Banner 設計,算是自己邊做邊摸索,還在學習探索期,目前總結了一些做稿的思路,分享的目的是為了梳理完善自己的方法論,讓自己繼續(xù)向前進一步。

本篇文章分享內容:插畫 Banner 的三個層次。

插畫 Banner 的三個層次:文案層、畫面元素、背景層。

文案層

  • 文案樣式:左對齊、居中對齊、右對齊。
  • 文案組合設計形式:上下組合、上中下組合、一體組合。

畫面元素層

  • 主體元素
  • 相關聯(lián)元素
  • 點綴元素

相關聯(lián)元素和點綴元素可以二選一,也可以同時使用,具體根據(jù)設計畫面而定。


背景層

以下內容是我目前總結的背景層類型。選擇背景時的注意事項:背景一定要和元素風格一致。我經(jīng)常會出現(xiàn)這樣的問題,主體物和背景不融合,導致設計看起來主體元素是貼上去的。

注:以上所用到的圖片素材均來自于懶設計、稿定設計

Banner 設計畫面千千萬,套路來回就幾樣。希望大家能在框架的基礎上進行思維發(fā)散,創(chuàng)作出好的作品。

定量的設計套路(不變)+百變的設計風格(變)=屬于你的千變萬化的 Banner 作品

(原文章地址:https://www.uisdc.com/banner-design-guide


Lottie 動效設計

純純

動效設計,是 UI 設計當中不可或缺的一環(huán)。大家對動效的認知也從最初認為動效只是為了美觀酷炫,到逐漸理解了動效對于提升用戶體驗和產品需求的重要作用。而導致這種認知的轉變,相當一部分原因是因為硬件性能的發(fā)展和動效輸出方式的優(yōu)化。

因為動效實現(xiàn)的過程就是設計師和開發(fā)之間互相博弈的過程。設計師可能通過 AE 或者其他工具做出炫酷的效果,和開發(fā)對接就懵了。要么無法實現(xiàn),要么極其復雜。畢竟開發(fā)工程師要通過代碼把動效實現(xiàn)出來,設計師得用開發(fā)所能理解的語言來描述。就如同你能完美地解出一道數(shù)學題一樣,讓你把解題思路教給別人,你可能就沒那么順暢了。一方面取決于你的表述能力,而更重要的是對方的理解能力。過去所廣泛采用的通過動效標注輸出給開發(fā)的方式,都存在還原度的問題。很多時候還原度達到 80% 可能都算比較好的了。

而今天要說到的 Lottie 不僅可以 100% 還原動效,而且無需動效標注。直接通過 AE 輸出動效文件給開發(fā)。開發(fā)人員直接調用,然后完美還原。

Lottie是什么?

Lottie 是 Airbnb 開源的一個動畫渲染庫,同時支持 Android、iOS、React Native 平臺。Lottie 支持渲染播放 AE 動畫。通過 AE 插件 bodymovie 導出 json 文件作為動畫數(shù)據(jù)。


Lottie有什么用?

Lottie 可以應用在 UI 設計的很多場景中。以下舉出幾個常用例子。

1. 動態(tài)啟動頁


2. 動態(tài)圖標/按鈕

3. 空頁面




以上僅列舉了部分常用案例,其實 Lottie 的應用場景遠不止這些。在 APP 的多個模塊中都可以運用,那么我們要如何將 Lottie 運用在自己的工作項目中呢?那就要了解 Lottie 的原理了。


Lottie的原理是什么?

前面已經(jīng)提過 Lottie 是 Airbnb 開源的一個動畫渲染庫。我們可以理解為它是一個多功能的視頻播放器,開發(fā)人員需要將這個播放器部署到相應的環(huán)境中。然后設計人員提供視頻(動效文件)給開發(fā)人員,讓開發(fā)人員按照要求播放視頻文件,即可完成動效的應用。


假設該按鈕動效一共10幀,整個按鈕切換分為兩部分,第一部分:從菜單切換到關閉(1-10幀);第二部分:從關閉切換到菜單(10-1)。我們可以讓開發(fā)通過以下控制方式,完成我們想要的效果。

按鈕動效默認顯示第1幀(菜單狀態(tài)),點擊按鈕以后開始播放動效,動效播放到第10幀的時候停止,并停在第10幀(關閉狀態(tài))。當按鈕為關閉狀態(tài)(第10幀)時,點擊按鈕以后動效從第10幀倒放到第1幀(關閉狀態(tài)),并停在第1幀(菜單狀態(tài))。

通過以上方式就完成了對一個動效按鈕的控制。而日常工作中我們可以靈活地運用多種控制方式。

首先動效的觸發(fā),可以是一次交互事件,比如點擊、滑動;也可以是監(jiān)聽到了廣播,比如網(wǎng)絡異常等。而觸發(fā)以后的動效控制也多種多樣,可以從開始播放到結束,也可以進行倒放;可以循環(huán)播放某一段動效;也可以從某一幀播放到另一幀,或者某一個時間點播放到另一個時間點;更多的控制方式需要大家在工作中慢慢挖掘。

Lottie支持的AE屬性

Lottie雖然能夠滿足多種場景需要,但是并非支持所有的 AE 效果。設計制作時,需要考慮該效果是否支持。否則,會導致出錯或者所用效果無法生效。



上圖為 Lottie 支持的主要 AE 屬性,此處有刪減掉部分不常用的屬性??梢源蜷_以下鏈接查看完整版http://airbnb.io/lottie/#/supported-features

需要注意的是文檔中雖然說支持漸變,但是會出錯,所以大家在使用矢量圖形時,請勿使用漸變效果。關于漸變效果的修復后續(xù)文章會提到,官網(wǎng)以后也會修復相關問題,但是沒有確切時間。

通過上圖我們可以了解到,Lottie 支持的 AE 屬性基本包含以下幾類:

  • 基礎的形狀比如圓形、矩形、星形等,也可以支持鋼筆工具繪制的矢量形狀和從 AI 中導入的矢量圖形。
  • 支持位移、大小縮放、透明度、旋轉、修剪路徑、蒙版、遮罩這些基礎動畫屬性。
  • 支持圖層間建立父子級關系(只支持圖層與圖層之間建立,當圖層的屬性之間建立父子關系會失效,比如 A 圖層可以和 B 圖層建立父子關系,但是 A 圖層的位移屬性和 B 圖層的位移屬性單獨建立父子關系則不生效)。
  • 支持速度貝塞爾插值,可以搭配 Flow 插件生成各種緩動效果。
  • 支持導入圖片。
  • 支持時間拉伸和時間重映射來通知時間和速度。

(原文章來源于:https://www.uisdc.com/lottie-dynamic-design-guide





日歷

鏈接

個人資料

藍藍設計的小編 http://sillybuy.com

存檔