亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

經(jīng)常看Dribbble和Behance的同學(xué)可能早就聽說過Tubik Studio 這個工作室，他們的UI設(shè)計案例和圖標(biāo)設(shè)計一直以簡約傳神而著稱，色彩搭配上也相當(dāng)?shù)挠幸惶住Ｗ鳛橐粋€在UI設(shè)計領(lǐng)域深耕的工作室，Tubik Studio 在圖標(biāo)設(shè)計上也非常的有經(jīng)驗。今天的文章內(nèi)容并不復(fù)雜，也許你看過之后就忘掉了，但是確實(shí)是經(jīng)驗之談，仔細(xì)思考，你會發(fā)現(xiàn)要做到也并不簡單。希望能這篇文章能給你一點(diǎn)啟發(fā)~

眼睛可以讓我們在短短的一瞬間獲得大量的信息，更重要的是，這種信息獲取方式并不費(fèi)勁——至少絕大多數(shù)的信息都是下意識獲得并吸收的。所以，在設(shè)計領(lǐng)域當(dāng)中，視覺感知其實(shí)起到了相當(dāng)重要的作用，不論是產(chǎn)品設(shè)計，還是解決用戶的問題。

今天的文章緣起于Quora 上的一個問題：“在UI界面中，人對于圖標(biāo)的感知是否比文字更快？”作為在UI領(lǐng)域深耕的 Tubik Studio 曾在Quora 中對此作出回答，而今天的文章則將之前的答案更系統(tǒng)的整理出來。關(guān)于圖標(biāo)設(shè)計、文字內(nèi)容以及人的視覺感知之間的關(guān)系，其實(shí)并不是一眼看上去那么簡單。

感知的速度

對于人而言，視覺感知的確是大腦獲得信息最快的途徑之一。視覺感知對于生活和工作各方面的影響是如此之多，以至于在進(jìn)行產(chǎn)品設(shè)計的時候完全無法忽視它的存在。這也是為什么現(xiàn)如今的界面設(shè)計中，圖標(biāo)設(shè)計占據(jù)了如此之大的比例。如果你回溯數(shù)字設(shè)計的歷史的話，會發(fā)現(xiàn)圖標(biāo)設(shè)計在過去很長的一段時間中，圖標(biāo)設(shè)計幾乎一直都是GUI領(lǐng)域的核心之一。

在對視覺感知進(jìn)行系統(tǒng)化的科學(xué)研究和理論分析之后，A. Santella 得出了這樣的結(jié)論：“通過大量的眼動追蹤研究之后，我們發(fā)現(xiàn)一些有趣的現(xiàn)象。這些現(xiàn)象表明，人們對于抽象概念甚至一些藝術(shù)化形象的理解并不差，它們并不是藝術(shù)家才有的神秘能力，而是幾乎每個人都有的視覺感知能力。雖然不并不是每個人都能畫出來，但是幾乎每個人都能在計算機(jī)的幫助下制作渲染出來。”絕大多數(shù)的人在視覺識別、感知、標(biāo)記、數(shù)據(jù)化甚至將圖片高度抽象化上都有不俗的能力，可以說，人們在視覺能力范圍上寬廣得難以置信。而這一重要的事實(shí)對于設(shè)計師而言就非常重要了，在此基礎(chǔ)上設(shè)計師可以提出更具有易用性和適配性的解決方案。

如果設(shè)計師只關(guān)注圖標(biāo)傳遞信息的速度的話，那么相比文字，圖標(biāo)確實(shí)可以更快的被用戶感知到。絕大多數(shù)的用戶都是被視覺感知所驅(qū)動的，所以成熟的視覺感知機(jī)制是更有效的信息傳遞途徑，并且應(yīng)當(dāng)作為設(shè)計中最值得重視的方面：

·人眼識別圖像的速度比閱讀文字快的多
·心理學(xué)家聲稱，人眼可以在十分之一秒內(nèi)遍歷、識別一個視覺場景或者元素，而這個時間段內(nèi)閱讀一段文字則明顯是吃力的
·圖像被傳遞到大腦的速度會更快，即使是通過文字傳遞的信息，傳遞到大腦也通常是以圖像的形式被處理
·背景與文字的可讀性息息相關(guān)，但是圖片的信息則很少受到周圍元素與背景的影響
·圖像更容易在長期記憶中保存，這也意味著交互界面本身比起數(shù)據(jù)更容易記憶和留存

除此之外，圖標(biāo)和界面中的其他視覺元素讓信息可以更容易被不同國家、不同語言和不同文化背景的用戶所接受，可以說，從某種程度上，圖標(biāo)提升了界面中信息的被理解性。對于有諸如閱讀障礙這樣的用戶而言，視覺化的界面也更容易理解。

圖標(biāo)在界面許多地方都有應(yīng)用，其中最普遍也是最典型的就是標(biāo)簽欄中的圖標(biāo)運(yùn)用。標(biāo)簽作為一種功能性的交互元素，所占據(jù)的空間是有限且固定的，這樣一來，簡明直觀的圖標(biāo)就成了一個非常高效的解決方案了。上圖的概念設(shè)計是由設(shè)計師 Sergey Valiukh 所設(shè)計，簡約的線性圖標(biāo)配合微交互讓這個底部菜單顯得直觀、清晰而又有趣。

接下來的這個天氣界面的設(shè)計案例則展示了圖標(biāo)是如何展示呈現(xiàn)不同的視覺信息的。符號化的圖標(biāo)設(shè)計清晰得傳遞出不同的天氣信息，在保持界面整潔、不占用太多空間的前提下，讓用戶輕松掌控一整周的天氣情況。

許多界面中，基礎(chǔ)的交互和內(nèi)容信息需要用戶花費(fèi)好幾秒來進(jìn)行吸收和獲取，而圖形化以及圖標(biāo)化的信息呈現(xiàn)能將這個過程縮短。但是，影響信息獲取的因素，并不只是文本和圖標(biāo)的配比。

圖標(biāo)的含義

在Tubik Studio 所設(shè)計和參與的諸多設(shè)計項目的經(jīng)驗基礎(chǔ)上，我們在創(chuàng)建界面的過程中，圖標(biāo)本身并不是傳遞信息速度的唯一影響因素。的確，圖標(biāo)以圖像的形式向用戶傳遞信息，但是如果信息傳遞的不夠準(zhǔn)確，出現(xiàn)的雙關(guān)或者歧義，傳遞速度再快，體驗也不好。圖標(biāo)傳遞出的信息被誤讀，這就沒法被定型為“識別”了，它只是很快被“關(guān)注”到而已。真正意義上的識別，不止是被快速看到，而且得被正確理解、正確操作才行。

諸如電話、電子郵件、搜索這類圖標(biāo)的設(shè)計，已經(jīng)為大家所熟知，如果在UI中使用這樣的圖標(biāo)設(shè)計，傳遞信息肯定比文案快速準(zhǔn)確得多。然而，如果你所使用的圖標(biāo)形象不夠清晰明確的情況下，那么你需要對它進(jìn)行充分的思考。如果和最終要傳達(dá)的信息不相符，那么最好替換掉，這個時候信息傳遞的速度并不重要。這就是為什么有的設(shè)計需要同時使用文字和圖標(biāo)來傳遞信息，這個時候可能圖標(biāo)對功能的“描述”不夠精準(zhǔn)，需要文字來作為輔助。

在這個概念設(shè)計中，圖標(biāo)和文案是相互搭配的。這個界面中，一個交互加入了多個高識別度的感知元素，通過動效、CTA元素以及文案讓用戶對與操作擁有更高更清晰的識別度。能夠快速識別圖標(biāo)的用戶通常不用再去閱讀文字，而對于文字有較高感知度的用戶而言，文字的存在讓他們不用去猜圖標(biāo)的含義（比如很少上網(wǎng)的老年人）。同時使用文字和圖標(biāo)的確會降低用戶曲解圖標(biāo)含義的機(jī)率。

另外一個常見的案例就側(cè)邊欄的設(shè)計，簡單的文本和簡單的線性圖標(biāo)的搭配就可以傳遞出足夠清晰的概念。

這個博客APP的概念設(shè)計展示了圖標(biāo)是如何作為一個多功能的視覺元素而存在的。首先，圖標(biāo)作為博客的分類目錄不同條目的視覺識別形象而存在，同時，圖標(biāo)中的圖案信息能夠傳遞出類別的相關(guān)信息，不同的色彩則成為了用戶分辨不同類別的重要視覺信號。所有的這一切讓用戶能夠更加清晰地識別信息，交互也更加明了，強(qiáng)化了整體的可用性和導(dǎo)航的有效度。

無論你最終決定使用圖標(biāo)、文字還是說兩者都用，主要是取決于你的受眾和你的目標(biāo)，通過分析需求和最終目的來進(jìn)行合理的選取。

使用圖標(biāo)的理由

綜上所述，我們可以總結(jié)出界面中使用圖標(biāo)的主要好處：

·提升用戶對信息和數(shù)據(jù)的感知速度
·通過視覺化的圖像來提升用戶對于各種元素的記憶性
·通過視覺引導(dǎo)提升導(dǎo)航的便捷度
·無需過長的文字說明，更加節(jié)省界面和屏幕空間
·支持文案和內(nèi)容，以視覺的方式傳遞信息
·強(qiáng)化設(shè)計感，與界面樣式保持協(xié)調(diào)

值得思考的因素

很顯然，圖標(biāo)不論如何設(shè)計，都是無法滿足所有用戶的需求，并且無法覆蓋到所有用戶的認(rèn)知，但是在視覺設(shè)計上依然有一些普適而基礎(chǔ)的因素值得我們注意和思考：

·目標(biāo)受眾（能力、年齡、文化背景、教育水平等）
·典型用戶的閱讀水平
·產(chǎn)品的使用環(huán)境
·產(chǎn)品在全球或者地區(qū)的推廣和普及程度
·所用圖標(biāo)和圖形本身的識別度
·所用圖標(biāo)和圖形讓人分心或者集中注意力的程度

上面所說的因素都和人們的認(rèn)知與視覺感知息息相關(guān)，影響著視覺表達(dá)的質(zhì)量和效率。對于設(shè)計師而言，讓用戶僅僅看到界面是不夠的，讓用戶能夠識別、理解界面才是核心，這樣他們才能真正與界面進(jìn)行有效的交互。文案和圖標(biāo)是相互扶持、互為支撐的，它們能夠協(xié)調(diào)一致地呈現(xiàn)信息才能給用戶帶來真正好的用戶體驗。