国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

界面設(shè)計(jì)是一個(gè)很龐大的體系，具有很多原則，比如輕量、容錯(cuò)、清晰等等，其中包含了交互層面以及視覺(jué)層面等，今天我想單獨(dú)把視覺(jué)剝離出來(lái)，來(lái)講一講我對(duì)界面設(shè)計(jì)“視覺(jué)層面”的理解與認(rèn)知。

在我看來(lái)，界面設(shè)計(jì)的視覺(jué)層面主要可以分為三個(gè)維度來(lái)解析：信息傳遞、視覺(jué)美化、創(chuàng)意創(chuàng)新。

1. 信息傳遞是讓用戶看的明白，快速清晰的獲取信息；
2. 視覺(jué)美化是讓用戶看的舒服，讓界面足夠美觀；
3. 創(chuàng)新創(chuàng)意是讓用戶看的驚喜，看到一些不一樣的創(chuàng)意點(diǎn)。

如下圖:

三個(gè)維度的目標(biāo)如何實(shí)現(xiàn)呢？我提取了以下三個(gè)關(guān)鍵詞：

清晰、和諧、獨(dú)特是我們要達(dá)成的目標(biāo)，達(dá)成目標(biāo)一定會(huì)有一些原理所在，而有了原理就會(huì)有具體的執(zhí)行方法，所以后面的每一個(gè)知識(shí)點(diǎn)，我都會(huì)按照“設(shè)計(jì)目標(biāo)-執(zhí)行原理-執(zhí)行方法”的邏輯給大家講解，大綱如下：

1.清晰?

1.1 清晰-降噪-容器整合

1.2 清晰-聚焦-局部放大

2. 和諧

2.1 和諧-呼應(yīng)-顏色呼應(yīng)

2.2 和諧-節(jié)奏-變化對(duì)比

2.3 和諧-飽滿-負(fù)形縮減

3. 獨(dú)特

3.1 獨(dú)特-品牌延展-IP形象結(jié)合

3.2 獨(dú)特-事物本意-事物圖形化

1. 清晰

1.1 清晰-降噪-容器整合

設(shè)計(jì)目標(biāo)：清晰

執(zhí)行原理：信息降噪

執(zhí)行方法：容器整合

當(dāng)界面信息過(guò)于分散時(shí)，會(huì)對(duì)用戶造成不必要的干擾，導(dǎo)致用戶產(chǎn)生疑惑甚至直接離開(kāi)界面。

作為設(shè)計(jì)師，要做的就是對(duì)信息進(jìn)行整合，我們可以稱之為信息減噪，目的就是讓頁(yè)面更加清晰，減少干擾。

這里我經(jīng)常使用“容器整合法”來(lái)讓內(nèi)容更加清晰、聚焦。當(dāng)分散的內(nèi)容裝進(jìn)一個(gè)“容器后”，就可以使內(nèi)容聚焦在容器當(dāng)中，讓信息更加規(guī)整，而卡片就是一個(gè)很好的“容器”。

實(shí)際案例：

在改版騰訊動(dòng)漫個(gè)人中心的時(shí)候，頭部就存在信息分散不聚焦的問(wèn)題，四個(gè)視覺(jué)觸點(diǎn)（綠色圈處）分散在四個(gè)角落，形成極大干擾。

這里我就采用了”卡片容器“的方法，將信息裝進(jìn)容器中，減少分散信息的干擾，使界面更加清晰、工整，效果如下：

現(xiàn)在很多產(chǎn)品都在使用卡片化的布局，尤其是在信息數(shù)量、層級(jí)較多的時(shí)候，更加需要有容器將其規(guī)整起來(lái)，這樣才會(huì)讓界面保持不亂！

1.2 清晰-聚焦-局部放大

設(shè)計(jì)目標(biāo)：清晰

執(zhí)行原理：聚焦

執(zhí)行方法：局部放大

我們?cè)谄綍r(shí)做需求的時(shí)候，經(jīng)常會(huì)遇到信息特別多，特別亂的時(shí)候，如果此時(shí)我們選擇什么都想突出，最后的結(jié)果一定適得其反，什么都突出不了，這時(shí)候就需要我們選擇一些內(nèi)容來(lái)進(jìn)行局部放大，反而可以讓整體信息更加聚焦、清晰。

這種方法經(jīng)常用在有數(shù)字展示的頁(yè)面當(dāng)中，比如下面這種頁(yè)面：

再比如，下面這個(gè)模塊信息，如果“3”沒(méi)有放大，整體的信息會(huì)亂到你眼花繚亂，我們看下對(duì)比：

所以，大家在遇到有數(shù)字，且信息雜亂的時(shí)候，就可以采用局部放大的方式來(lái)使整體更加聚焦、清晰。

2. 和諧

2.1 和諧-呼應(yīng)-顏色呼應(yīng)

設(shè)計(jì)目標(biāo)：和諧

執(zhí)行原理：呼應(yīng)

執(zhí)行方法：以顏色呼應(yīng)為例

很多時(shí)候我們會(huì)覺(jué)得自己做的東西很不和諧，其中一個(gè)很重要的原因就是因?yàn)轫?yè)面中沒(méi)有貫穿的元素，也就是沒(méi)有呼應(yīng)，很常用的一個(gè)呼應(yīng)的方法就是顏色呼應(yīng)。

例如這個(gè)畫(huà)面總看起來(lái)不夠和諧，你會(huì)覺(jué)得綠色很突兀，就是因?yàn)轭伾蠜](méi)有呼應(yīng)：

而一旦你想辦法，讓綠色“事出有因”，比如取自眼鏡的顏色：

那么，突兀的問(wèn)題解決了，和諧的目標(biāo)也就實(shí)現(xiàn)了。

而剛才那個(gè)人中心的界面：

我們會(huì)發(fā)現(xiàn)，圖標(biāo)的顏色也是取自背景色，所以整體看起來(lái)才會(huì)如此和諧。

除了顏色呼應(yīng)，還有很多呼應(yīng)的方式，比如圖形、圖標(biāo)風(fēng)格等等，這里就不再舉例了。

2.2 和諧-節(jié)奏感-對(duì)比變化

設(shè)計(jì)目標(biāo)：和諧

執(zhí)行原理：節(jié)奏感

執(zhí)行方法：對(duì)比變化

對(duì)于音樂(lè)，節(jié)奏感是非常重要的，如果一段音樂(lè)一直是一個(gè)頻率，那可能也算不上音樂(lè)了。

界面也是一樣的，節(jié)奏感是讓頁(yè)面變得“和諧”很重要的因素之一，如何做到呢？我們?cè)谡故疚淖至斜淼臅r(shí)候，你覺(jué)得下面兩種哪個(gè)更舒服些呢？

我猜你會(huì)覺(jué)得第二個(gè)舒服一些，因?yàn)樗凶兓?，有?jié)奏感，所以它和諧、舒適。

我們會(huì)發(fā)現(xiàn)很多產(chǎn)品首頁(yè)帶有封面圖的列表都有很多種排法，例如1帶多，1×2，2×2，2×3等等。

就是為了防止每個(gè)模塊過(guò)于重復(fù)，如果每個(gè)模塊都是每排兩張封面，一直下來(lái)：

看起來(lái)會(huì)非常乏味。

2.3 ?和諧-飽滿-負(fù)形縮減

設(shè)計(jì)目標(biāo)：和諧

執(zhí)行原理：飽滿

執(zhí)行方法：負(fù)形縮減

在做圖標(biāo)或者字體的時(shí)候，經(jīng)常要講一個(gè)原則就是“飽滿”，界面上每個(gè)“不能拆分的元素”都需要盡量做到飽滿，比如圖標(biāo)，再比如下面這個(gè)信息組件：

正文就屬于不能拆分的單一原子，大家可能會(huì)問(wèn)，這種信息不就是方方正正的一個(gè)信息塊嗎，怎么會(huì)不飽滿呢，比如行間距過(guò)大：

再比如，我在優(yōu)化騰訊動(dòng)漫信息流的時(shí)候，發(fā)現(xiàn)正文出現(xiàn)的表情遠(yuǎn)遠(yuǎn)大于文字，如下圖：

表情一旦出現(xiàn)，就會(huì)造成大量空隙（負(fù)形過(guò)大），導(dǎo)致整體不夠飽滿、和諧。

我們可以看下其他產(chǎn)品，表情和文字幾乎都是一樣的大小，他們都會(huì)盡量縮小負(fù)形空間（也就是空隙小大）。

在這樣的原則之下，優(yōu)化后的效果如下：

以上是關(guān)于和諧的幾點(diǎn)方法。

3. 獨(dú)特

如果你的界面做到了清晰、和諧，在視覺(jué)層面就已經(jīng)算是及格了，如果還能加上一點(diǎn)小創(chuàng)意，就可以讓人眼前一亮。

如何能夠做到獨(dú)特？可以從兩方面出發(fā)：

1. 是品牌；
2. 是內(nèi)容本身含義。

3.1 獨(dú)特-品牌延展-吉祥物結(jié)合

設(shè)計(jì)目標(biāo)：獨(dú)特

執(zhí)行原理：品牌延展

執(zhí)行方法：IP形象結(jié)合

從品牌出發(fā)，可以有很多方向，比如logo，圖形，品牌吉祥物等，下面以品牌吉祥物為例：

在做小說(shuō)閱讀器的時(shí)候，有一個(gè)設(shè)置選項(xiàng)是選擇文字的背景顏色，選擇控件是圓形，而品牌形象也偏圓形，此時(shí)就可以將圓形控件與形象相互結(jié)合。

但是選擇控件有兩種狀態(tài)，為了更加生動(dòng)，就讓給形象正面面對(duì)你的時(shí)候作為選擇狀態(tài)，而轉(zhuǎn)過(guò)身作為非選擇狀態(tài)，大概效果如下：

此創(chuàng)意已在騰訊動(dòng)漫小說(shuō)落地實(shí)現(xiàn)。

3.2 獨(dú)特-事物本意延展-事物圖形化

設(shè)計(jì)目標(biāo)：獨(dú)特

執(zhí)行原理：事物本意延展

執(zhí)行方法：事物圖形化

除了品牌，還可以根據(jù)事物本身的意思來(lái)延展圖形，比如日間夜間模式的切換按鈕，男女性別的切換按鈕，都可以利用事物本身的含義來(lái)延展圖形設(shè)計(jì)。

此創(chuàng)意已在騰訊動(dòng)漫個(gè)人中心模塊落地。

再比如，彈幕的展示方式，就可以聯(lián)想到電視機(jī)，再把電視機(jī)圖形化，如下圖：

此創(chuàng)意已經(jīng)在騰訊動(dòng)漫小說(shuō)頻道頁(yè)實(shí)現(xiàn)。

這里需要注意下，有時(shí)候如果圖形過(guò)于普通，可以配合動(dòng)效來(lái)增加獨(dú)特性，但一定要注意開(kāi)發(fā)成本。

總結(jié)

界面設(shè)計(jì)是一個(gè)非常復(fù)雜的系統(tǒng)，今天單獨(dú)拿出視覺(jué)層面和大家分享了一些具有普適性的原則和方法，全當(dāng)拋磚引玉，希望能夠啟發(fā)出你的更多靈感，加油！

下期見(jiàn)！

#專欄作家#

菜心，微信公眾號(hào)：菜心設(shè)計(jì)鋪，人人都是產(chǎn)品經(jīng)理專欄作家，騰訊高級(jí)視覺(jué)設(shè)計(jì)師，5年工作經(jīng)驗(yàn)，負(fù)責(zé)騰訊動(dòng)漫移動(dòng)端相關(guān)設(shè)計(jì)。歡迎大家互相交流關(guān)注。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議