中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

好的設(shè)計(jì)是在恰如其分的情況下，為用戶呈現(xiàn)信息，而不讓信息絕不喧賓奪主。

首先，我希望大家能夠思考以下問(wèn)題：

• 為什么做交互設(shè)計(jì)的時(shí)候出現(xiàn)信息結(jié)構(gòu)不一致呢 ？
• 為什么有人說(shuō)你畫(huà)的頁(yè)面不夠干凈呢？
• 為什么細(xì)節(jié)總是出錯(cuò)？

大家都在通過(guò)基本圖形繪制原型頁(yè)面，為什么有的人畫(huà)得好，有的人畫(huà)得差？同樣是點(diǎn)線面到底有何神奇之處？

——答案就是：每個(gè)人對(duì)信息的理解層次不同，原型的根本是用戶交互界面的表達(dá)，想要表達(dá)更加清晰，更加細(xì)膩，就需要對(duì)信息架構(gòu)有更深的理解。那么，應(yīng)該如何提升你的信息設(shè)計(jì)能力呢？

什么是信息？

信息，指：音訊、消息、通訊系統(tǒng)傳輸和處理的對(duì)象，泛指人類(lèi)社會(huì)傳播的一切內(nèi)容。

看起來(lái)不是很好理解，縮小定義范圍，在互聯(lián)網(wǎng)中界面中，信息載體一般是PC和移動(dòng)設(shè)備。

界面信息有圖文、語(yǔ)音、視頻，我們常作的原型都是以圖文為結(jié)構(gòu)，輔助動(dòng)效設(shè)計(jì)。

那么，產(chǎn)品原型的構(gòu)成是什么？

我們從真實(shí)產(chǎn)品界面進(jìn)行逆推，選了兩個(gè)非常常用的產(chǎn)品，頁(yè)面結(jié)構(gòu)都很復(fù)雜，但是表現(xiàn)差別很大。

淘寶App首頁(yè)

淘寶的首頁(yè)相對(duì)復(fù)雜，界面元素非常多，當(dāng)你看到一個(gè)頁(yè)面的時(shí)候，先看頁(yè)面整體結(jié)構(gòu)。把頁(yè)面拆分成模塊，好的產(chǎn)品，模塊劃分都是非常清晰的，顯然這個(gè)頁(yè)面也是非常清晰地呈現(xiàn)了非常多內(nèi)容。

再看具體每個(gè)模塊的基本構(gòu)成，小圖標(biāo)、色塊、線條、文字，這是最基本構(gòu)成。

仔細(xì)觀察你會(huì)發(fā)現(xiàn)，對(duì)信息的呈現(xiàn)根據(jù)需要的不同，強(qiáng)弱表現(xiàn)不同。

頂部的小圖標(biāo)配文字說(shuō)明，圖表都是線條構(gòu)成，這里沒(méi)有用色塊填充圖標(biāo)，因?yàn)樾枰玫娜谌氡尘吧珘K，保證識(shí)別度的情況下，降低干擾，信息提現(xiàn)的非常輕。

再看搜索白塊的內(nèi)容，整個(gè)白塊占的面積最大，也是頭部中最醒目的部分，中間有一個(gè)搜索圖標(biāo)，一個(gè)拍照?qǐng)D標(biāo)，同樣是采用的線，并且有一個(gè)小細(xì)節(jié)， 圖標(biāo)的線都沒(méi)有把圖標(biāo)連滿，讓圖標(biāo)更輕了。中間還有灰色的文字，顯示了最近搜索過(guò)內(nèi)容，并且會(huì)變化。

再看熱搜，采用了輕微的色塊，中間輸入文字，而不是用邊緣線。

因?yàn)檩p微的色塊與整體更契合，在不降低識(shí)別度的情況下，干擾更低，如果是線，線的距離太小，會(huì)強(qiáng)過(guò)中間的字。

同樣的分析方法，可以細(xì)致到最小單位進(jìn)行觀察。

微信首頁(yè)

微信的內(nèi)容非常豐富，模塊簡(jiǎn)單，頁(yè)面色彩簡(jiǎn)單。微信的信息結(jié)構(gòu)是完全一致的，不論是聊天、群聊、訂閱號(hào)、服務(wù)號(hào)、通知。這樣微信的信息排列和閱讀習(xí)慣都一致，最大程度的提高了信息體驗(yàn)。

有一個(gè)小細(xì)節(jié)：為什么一個(gè)聊天信息和另一個(gè)聊天信息的中間有一根細(xì)灰線，但是線沒(méi)有穿過(guò)整個(gè)屏幕呢？

因?yàn)檫@根線穿過(guò)整個(gè)屏幕之后，一個(gè)聊天信息和另一個(gè)聊天信息被一定程度的阻斷了。同時(shí)，當(dāng)用戶從上至下尋找信息的時(shí)候是優(yōu)先通過(guò)左邊的圖標(biāo)來(lái)識(shí)別的，降低了視覺(jué)流的阻斷。

為什么會(huì)有這根線呢？

因?yàn)樾枰欢ǔ潭壬蠀^(qū)分信息，一條信息是獨(dú)立存在的。

為什么紅點(diǎn)沒(méi)有數(shù)字？

當(dāng)設(shè)置為消息免打擾之后，只顯示有新消息，但是不顯示數(shù)字，進(jìn)一步降低打擾。

整體設(shè)計(jì)有一個(gè)相同點(diǎn)，那就是使用盡可能地使用更少的元素，更低干擾的元素，清晰表達(dá)信息，數(shù)據(jù)結(jié)構(gòu)清晰。特別是微信，作為一款社交產(chǎn)品在這個(gè)頁(yè)面已經(jīng)做到了極簡(jiǎn)。

信息的美，用最基本的文字、圖標(biāo)、色塊構(gòu)成的頁(yè)面，依然可以做到簡(jiǎn)單又復(fù)雜的設(shè)計(jì)。

從灰度頁(yè)面看信息強(qiáng)弱

可以看到灰度之下，模塊依然是非常清晰。

作為頭部最強(qiáng)的信息——搜索，仍然是最強(qiáng)的，頭部的色塊能夠從視覺(jué)上感知到這部分的信息層級(jí)是比較高的，看起來(lái)就像是頭部所在的海拔比下方內(nèi)容位置要高?？梢钥吹缴珘K的信息強(qiáng)度會(huì)比文字高很多。

這里有一個(gè)小細(xì)節(jié)，banner下方有一個(gè)小的弧形向內(nèi)凹。

為什么要向內(nèi)有一個(gè)弧形被切掉呢？

假如不切掉，這個(gè)信息塊與下方“我的頻道”信息塊的間距，我們看到是比較近的，那么就要提供更高的間距。

切掉后，整體頁(yè)面會(huì)突然多了一種空間感，沒(méi)有那么擠壓了。同時(shí)，也會(huì)多了一種向上感，整個(gè)頁(yè)面內(nèi)容是向上的。

影響就是：banner的信息塊被切掉了，非常小的一部分，我認(rèn)為這是設(shè)計(jì)的取舍，選擇這種方案來(lái)解決整個(gè)頁(yè)面空間的問(wèn)題。

淘寶App首頁(yè)

假如不切掉，可以看一下頁(yè)面的情況是這樣的：

微信首頁(yè)

置頂?shù)谋憩F(xiàn)，清晰，但是不是非常強(qiáng)，在沒(méi)有增加文字和色彩的情況下，用了和頂部一樣的灰色作為標(biāo)識(shí)?？梢哉f(shuō)頁(yè)面的每一個(gè)信息都是不可減少的，微信是一個(gè)10億人使用的產(chǎn)品，非常值得交互設(shè)計(jì)師像素級(jí)別的研究。

微信整個(gè)界面都是平的，信息的海拔關(guān)系非常的薄弱。利用了色塊關(guān)系，強(qiáng)調(diào)了不同模塊之間區(qū)別。

專(zhuān)業(yè)信息結(jié)構(gòu)

想要更進(jìn)一步，需要理解專(zhuān)業(yè)信息結(jié)構(gòu)。

信息是有層級(jí)結(jié)構(gòu)的，層級(jí)越多，用戶操作所需要時(shí)間和精力越多。

例如這個(gè)圖，展現(xiàn)出來(lái)的就是三層。

導(dǎo)航結(jié)構(gòu)是可以將信息進(jìn)行歸類(lèi)的一個(gè)設(shè)計(jì)方式。

比如：現(xiàn)在通用底部TAB結(jié)構(gòu)，就是比較符合移動(dòng)操作的導(dǎo)航結(jié)構(gòu)，像我們剛才分析的微信和淘寶App都是這個(gè)結(jié)構(gòu)。

還有抽屜式的導(dǎo)航，這種結(jié)構(gòu)是通過(guò)在側(cè)邊展開(kāi)一個(gè)導(dǎo)航結(jié)構(gòu)，進(jìn)行頁(yè)面切換。

優(yōu)點(diǎn)是：導(dǎo)航信息隱藏起來(lái)，可以放置很多內(nèi)容，讓界面更干凈，干擾更少。

缺點(diǎn)是：操作多一個(gè)步驟，也沒(méi)有那么直觀。

還有一種是頂部TAB，頂部導(dǎo)航在安卓系統(tǒng)更常用，這種TAB在PC也可以使用。

導(dǎo)航的結(jié)構(gòu)有很多，那么導(dǎo)航的本質(zhì)是什么？

信息是通過(guò)不同的層級(jí)進(jìn)行排列，分布在不同的頁(yè)面，導(dǎo)航就是用戶游走于不同頁(yè)面的通道，通道設(shè)計(jì)的復(fù)雜，就會(huì)像迷宮一樣，難以使用。

導(dǎo)航的類(lèi)型：

用一個(gè)音樂(lè)的產(chǎn)品舉例：

橫向?qū)Ш剑涸试S在同一層級(jí)之間的信息流動(dòng)。

用戶可以在音樂(lè)產(chǎn)品中，信息的頂級(jí)之間移動(dòng)，就像底部的TAB。

前向?qū)Ш剑涸谕粭l信息路徑中，向前進(jìn)入另一個(gè)頁(yè)面。

可以通過(guò)專(zhuān)輯進(jìn)入一首歌曲，也可以通過(guò)搜索進(jìn)入一首歌曲。

反向?qū)Ш剑喊磿r(shí)間順序，在一個(gè)應(yīng)用程序內(nèi)或跨不同的應(yīng)用程序或在分層中（在應(yīng)用程序內(nèi)）向后移動(dòng)屏幕。

從歌曲返回專(zhuān)輯；如果剛從搜索進(jìn)入歌曲，用戶可以從歌曲直接返回搜索，跨越了中間層級(jí)。

舉一反三

靈活實(shí)際運(yùn)用，離不開(kāi)舉一反三。

每一個(gè)信息的設(shè)計(jì)，都有多種多樣的設(shè)計(jì)方法，優(yōu)秀的交互設(shè)計(jì)師應(yīng)該能夠舉一反三，設(shè)計(jì)多種方案。

基本設(shè)計(jì)模型：

PC：

移動(dòng)：

那么，從這兩種設(shè)計(jì)模型就可以衍生出以下的設(shè)計(jì)：

PC：

移動(dòng)：

你可能會(huì)說(shuō)，怎么都不像平時(shí)看到的設(shè)計(jì)呢？

先看結(jié)構(gòu)，與前面說(shuō)的基本設(shè)計(jì)模型是一致的，跳不出這個(gè)基本結(jié)構(gòu)。

再看信息的設(shè)計(jì)：

復(fù)雜的頁(yè)面，如淘寶App的首頁(yè)，信息非常豐富。我的頻道部分其實(shí)是導(dǎo)航的入口，下方其實(shí)是信息的模塊，每一個(gè)信息都可以進(jìn)入更豐富的頁(yè)面。

頁(yè)面構(gòu)成都是由基本元素構(gòu)成，淘寶作為一個(gè)電商平臺(tái)，元數(shù)據(jù)就是一個(gè)一個(gè)的商品。因?yàn)樯唐酚蟹浅５亩啵?搜索就非常重要，比直接分類(lèi)效率要高。那么商品的分類(lèi)，其實(shí)是電商的一個(gè)核心功能，采用什么維度劃分，是需要根據(jù)策略和大數(shù)據(jù)來(lái)決定的，這里涉及到定價(jià)的問(wèn)題。

不要被頁(yè)面本身的排布迷惑了，而是要舉一反三，看穿信息構(gòu)成。

用戶場(chǎng)景

爐火純青，需要理解用戶場(chǎng)景。

信息是為了用戶而呈現(xiàn)，所以信息與用戶場(chǎng)景密不可分。好的交互設(shè)計(jì)師應(yīng)該具備快速變小白的同理心，理解用戶在使用這個(gè)功能的時(shí)候的情況。

騰訊有一個(gè)10-100-1000的方法。

每個(gè)月訪談10個(gè)用戶，調(diào)研100個(gè)用戶，查看1000個(gè)用戶的帖子。

有的人會(huì)說(shuō)：公司沒(méi)有給我那么多時(shí)間去做這些事情，公司定了要做什么的方向，一個(gè)星期就要出產(chǎn)品方案，那怎么辦？

快速?zèng)_刺，團(tuán)隊(duì)統(tǒng)一目標(biāo)，一周之內(nèi)要解決哪一個(gè)用戶場(chǎng)景？

目標(biāo)制定之后不要再更改，盡量把自己變成重度用戶，這樣你才能比用戶還要了解用戶。

那平時(shí)如何提高用戶的感知能力？

持續(xù)關(guān)注互聯(lián)網(wǎng)有效資訊，尋找優(yōu)質(zhì)讀物，這方面保持自己對(duì)行業(yè)的持續(xù)關(guān)注，平時(shí)關(guān)注優(yōu)秀的設(shè)計(jì)產(chǎn)品，反復(fù)揣摩：為什么這么設(shè)計(jì)？有哪些基本的設(shè)計(jì)邏輯？

我認(rèn)為：越基本的常識(shí)，才是越重要的東西。

前面也提到了，把自己變成重度用戶，反復(fù)把玩產(chǎn)品。樹(shù)立對(duì)用戶的正確心態(tài)，把用戶當(dāng)成朋友一樣對(duì)待。

那提高之后，如何驗(yàn)證自己的同理心呢？

嘗試能不能理解一些你原來(lái)不理解的設(shè)計(jì)，理解你原來(lái)不理解的人，他們?yōu)槭裁从羞@樣的行為？比如快手這個(gè)產(chǎn)品，他的底層邏輯是什么，為什么那么多人去快手直播。

快手的底層邏輯是記錄，快手的分發(fā)邏輯是每一個(gè)視頻和直播都是從0開(kāi)始導(dǎo)流，不論你是100萬(wàn)粉絲，還是100粉絲。

在回去看看以往自己的設(shè)計(jì)，有沒(méi)有一種想把這個(gè)設(shè)計(jì)撕掉的沖動(dòng)，如果有，說(shuō)明你已經(jīng)脫胎換骨了。

最后的話

產(chǎn)品設(shè)計(jì)的世界里，把自己逼瘋，讓用戶感知不到你，是給用戶提供的最好的設(shè)計(jì)。

好的產(chǎn)品是含蓄的，不是花樣繁多的，對(duì)信息的理解越深，才能做得更好。

灰度是看一個(gè)設(shè)計(jì)好壞的重要方法，一個(gè)好設(shè)計(jì)一定是在灰度之下仍然清晰明確的。

專(zhuān)業(yè)的設(shè)計(jì)結(jié)構(gòu)，Google、Apple這樣優(yōu)秀的偉大公司已經(jīng)給了我們非常好的指引，一定要站在巨人的肩膀上做設(shè)計(jì)。

靈活運(yùn)用信息設(shè)計(jì)，舉一反三，嘗試更多的表達(dá)方式，好的設(shè)計(jì)猶如鶯鶯細(xì)語(yǔ)，用戶耳聽(tīng)愉悅。

信息是在場(chǎng)景中呈現(xiàn)，好的設(shè)計(jì)是在恰如其分的情況下，為用戶呈現(xiàn)，絕不喧賓奪主。

好的設(shè)計(jì)師不僅努力而且有愛(ài)，會(huì)讓用戶感受到你的用心，如果能做到這一點(diǎn)，我相信你一定會(huì)成為一個(gè)好的設(shè)計(jì)師，并且擁有一個(gè)美好的人生。

作者：非凡，公眾號(hào)：集創(chuàng)堂

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

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