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

APP中分隔線的貫通和不貫通是產(chǎn)品和UID對(duì)產(chǎn)品信息架構(gòu)功能點(diǎn)梳理、分類之后形成的視覺(jué)排版產(chǎn)物，它造就了視覺(jué)上對(duì)于一款app頁(yè)面信息的整體和獨(dú)立感。

App UI設(shè)計(jì)中，分割線是一個(gè)很特別的視覺(jué)元素。

如下圖紅圈所示，包括微信在內(nèi)的現(xiàn)在很多app里，有些分隔線是全貫通的，有些分割線不是全貫通的，為什么？設(shè)計(jì)師這么做的用意在哪里？

引發(fā)了知乎網(wǎng)友強(qiáng)烈的討論，于是我嘗試解釋一下這個(gè)問(wèn)題，由于得到的贊還比較多，所以我把原文貼到此處，希望能對(duì)大家有幫助，大家共同進(jìn)步。

先說(shuō)好，在我研究的過(guò)程中，我忽略了比如“可能是程序員忘記設(shè)置縮進(jìn)了，可能是設(shè)計(jì)師腦子一抽就這么設(shè)計(jì)了，可能是老板就覺(jué)得不貫通的好，可能是別家app分割線都不貫通所以我們也不貫通好了”的這些笨蛋原因，我嘗試以為他們這么設(shè)計(jì)背后都是有深刻含義的，然后去探究這些深刻含義。有很多人說(shuō)一個(gè)分割線而已沒(méi)必要這么吹毛求疵，可是做設(shè)計(jì)，不吹毛求疵不行。

進(jìn)入正題：

我可能會(huì)展開(kāi)一點(diǎn)我的思路。

我不知道大家有沒(méi)有注意過(guò)，現(xiàn)在很多App UI設(shè)計(jì)中有“去分隔線”的設(shè)計(jì)傾向，比如大家去下一個(gè)手機(jī)版的Skype看一看，如下圖所示是微信和Skype的對(duì)比，Skype不管是聯(lián)系人和聊天都是沒(méi)有分隔線的：

雖然Skype沒(méi)有分割線，但是在我們使用skype的時(shí)候也并不會(huì)有串行和混亂的視覺(jué)體驗(yàn)，這是格式塔原理造成的，這個(gè)相信每位設(shè)計(jì)師都懂，上我們會(huì)人為的吧相似出現(xiàn)并按序排練的單位看做一個(gè)整體，也就是說(shuō)，我們會(huì)人為的吧下圖看做一個(gè)整體單元：

而把整個(gè)頁(yè)面看做這個(gè)單元的縱向排列。所以我們發(fā)現(xiàn)，Skype哪怕沒(méi)有分割線，看上去也是很清晰的，當(dāng)然Skype去分割線的設(shè)計(jì)是相當(dāng)“大膽”的一種做法。當(dāng)時(shí)我就在猜想，那么為什么微信不這么干呢？難道真的是沒(méi)有“勇氣”么？
于是乎，我嘗試了把微信首頁(yè)截圖的分割線全部去掉，得到了下面這張UI設(shè)計(jì)稿：

于是我感受到了濃濃的惡意，尤其是畫面明顯失重，畫面重心全部偏左。畫面重心偏左的核心原因有兩點(diǎn)，第一是在于提示的紅點(diǎn)數(shù)字全部在左邊，第二是每一個(gè)單行間距太小。

我們?cè)賮?lái)對(duì)比看Skype：

這個(gè)時(shí)候我發(fā)現(xiàn)了奧秘：

Skype因?yàn)槭菆A形頭像，所以天然造就了如紅框所示的視覺(jué)間距，而為了畫面平衡，Skype的提示數(shù)字是在右面的，兩個(gè)紅框部分達(dá)到了相對(duì)的視覺(jué)平衡。所以在我分析到這里的時(shí)候，不得不為Skype的UX團(tuán)隊(duì)點(diǎn)個(gè)贊。這就是我認(rèn)為分析和對(duì)比的核心。

好了，明白了沒(méi)有分割線的情況以后，我們來(lái)看有分隔線的app們，我上面鋪墊了這么多，大家應(yīng)該明白分割線這種東西出現(xiàn)之初的用意其實(shí)有兩點(diǎn)，其一是分隔信息單元讓視覺(jué)壓力變小，其二很重要的一點(diǎn)是提示用戶：用戶大爺們，分隔單元也許可以點(diǎn)擊噢~不信你試試看。

大家應(yīng)該還記得，早期的iOS是醬紫的：

上面一欄因?yàn)橛辛薕N/OFF開(kāi)關(guān)，所以地球人都知道他是可以點(diǎn)擊的，可是下面一行呢？你要知道當(dāng)年用戶們都是從塞班甚至黑白機(jī)過(guò)來(lái)的，都沒(méi)用過(guò)智能手機(jī)的，雖然我相信最終用戶行為一定會(huì)點(diǎn)擊一下試試看，但是我覺(jué)得當(dāng)年的人看到下面這個(gè)東東，一定是會(huì)蒙圈個(gè)一兩秒鐘的。

所以蘋果爸爸的解決辦法是如下所示：

這是一個(gè)驚艷的解決辦法！Exceptional！請(qǐng)及其熱烈而近似瘋狂的為iOS鼓掌！

就加了一個(gè)小iCON之后，幾乎所有用戶毫不猶豫的確定一定以及肯定了，這個(gè)Notifications一定是一個(gè)可以點(diǎn)擊的按鈕。所以后來(lái)，幾乎所有的app設(shè)計(jì)都沿用了這種右側(cè)箭頭表示Cell點(diǎn)擊可進(jìn)入的設(shè)計(jì)。

有個(gè)同學(xué)問(wèn)我，為什么分割線右邊一定要貫通，難道不能有一種模式是左邊開(kāi)口右邊實(shí)心么？答案是這種設(shè)計(jì)模式可以有，但是入過(guò)這個(gè)cell是一個(gè)可點(diǎn)擊的入口就一定不行。

我舉個(gè)例子，比如如你所說(shuō)，有一個(gè)item長(zhǎng)這樣，右側(cè)不貫通：

會(huì)給用戶帶來(lái)一種“右邊到底可不可點(diǎn)呢？”的疑問(wèn)。

我主要從視覺(jué)上說(shuō)說(shuō)吧，其實(shí)就是一個(gè)整體和割裂的關(guān)系，大家先看下面這張圖：

大家忽略所有內(nèi)容，也拋開(kāi)大家的設(shè)計(jì)經(jīng)驗(yàn)，就單憑大家用了這么多年手機(jī)的第一感覺(jué)去看左右兩張圖，左邊的分割線是沒(méi)有全貫通的，右邊一張的分割線是全貫通的，用心去體會(huì)有什么區(qū)別，盯著看，別說(shuō)話，把感覺(jué)記在心里，然后再看下面這張圖：

這張圖是在上圖的基礎(chǔ)上加了分隔條，并標(biāo)記了每一個(gè)Cell，大家感受到了什么？

• 第一，加了分隔條以后信息被主要分為了兩大塊信息區(qū)域：A區(qū)和B區(qū)，每個(gè)區(qū)域都有四條主要信息。
• 第二，因?yàn)榉指罹€的閉合與不閉合的原因，左圖中A區(qū)B區(qū)的四個(gè)信息顯得更加“相對(duì)具有聯(lián)系性”，而右圖中的四個(gè)信息顯得更加“相對(duì)獨(dú)立”。

  這時(shí)候我給你們舉出兩個(gè)實(shí)例，一個(gè)是喜馬拉雅FM的“我的”頁(yè)面，一個(gè)是脈脈的“我的頁(yè)面”：（截圖版本是16年7月）

先說(shuō)喜馬拉雅，我第一次看到這個(gè)頁(yè)面的時(shí)候，我的第一個(gè)問(wèn)題在于，為什么頂上的“主播管理中心”和“消息中心”要單獨(dú)成一個(gè)區(qū)域并用分隔條隔開(kāi)，這一定是產(chǎn)品信息架構(gòu)的時(shí)候要求這樣的，因?yàn)槊黠@作為UID來(lái)說(shuō)，把它們倆合并明顯好看一些~不說(shuō)信息架構(gòu)了不然就扯遠(yuǎn)了。

我們來(lái)看這兩個(gè)頁(yè)面，每個(gè)cell里展現(xiàn)形式幾乎完全一樣，唯一的區(qū)別在于，喜馬拉雅的分割線不是全閉合的，而脈脈的分割線是全閉合的。

下面的內(nèi)容注意看，來(lái)看我的分析，先看喜馬拉雅：

1.“我的訂閱+播放歷史+贊過(guò)的”出現(xiàn)在一個(gè)區(qū)域并且分割線不閉合，強(qiáng)調(diào)這三個(gè)是一個(gè)整體，內(nèi)在邏輯是“我執(zhí)行過(guò)動(dòng)作的”。

2.“已購(gòu)聲音+喜幣余額”出現(xiàn)在一個(gè)區(qū)域并且分割線不閉合，強(qiáng)調(diào)這兩個(gè)是一個(gè)整體，內(nèi)在邏輯我最初以為是“購(gòu)買行為產(chǎn)生的”，但是當(dāng)我看到下面喜馬拉雅商城和訂單的時(shí)候我就蒙圈了，其實(shí)這里有一個(gè)產(chǎn)品上面很重要的問(wèn)題，有的同學(xué)說(shuō)，講道理的話，應(yīng)該是“已購(gòu)聲音+喜幣余額+喜馬拉雅商城+商城訂單+優(yōu)惠券”放在一個(gè)區(qū)域才對(duì)對(duì)吧，我承認(rèn)講道理的話應(yīng)該是這樣，但是作為一個(gè)喜馬拉雅FM的重度用戶，你們也許不知道喜馬拉雅FM現(xiàn)在正在嘗試優(yōu)質(zhì)內(nèi)容付費(fèi)收聽(tīng)的新變現(xiàn)模式，每收聽(tīng)一個(gè)付費(fèi)內(nèi)容需要消耗0.3喜幣，所以這就能說(shuō)得通了，這個(gè)區(qū)域的內(nèi)在邏輯應(yīng)該是:”付費(fèi)內(nèi)容相關(guān)的”。

3.而下面的區(qū)域，喜馬拉雅的產(chǎn)品經(jīng)理把他歸納為，都是“其他”，也就是說(shuō)，在現(xiàn)在喜馬拉雅的產(chǎn)品體系中，商城和游戲中心的地位不如付費(fèi)內(nèi)容，不放在主要地位。

所以從這個(gè)頁(yè)面不難看出，喜馬拉雅當(dāng)下的運(yùn)營(yíng)重點(diǎn)在”付費(fèi)優(yōu)質(zhì)內(nèi)容相關(guān)的”這一塊，也就是新的模式探索，事實(shí)也是如此，在這個(gè)資本寒冬，喜馬拉雅目前在做車載硬件，做商城，做優(yōu)質(zhì)內(nèi)容付費(fèi)，喜馬拉雅團(tuán)隊(duì)最近一定是在苦苦尋求變現(xiàn)模式。這就是我經(jīng)常說(shuō)的從一個(gè)產(chǎn)品的UI其實(shí)是可以看得出這個(gè)產(chǎn)品團(tuán)隊(duì)甚至一個(gè)公司目前的狀態(tài)的。

再來(lái)看脈脈:

脈脈是一款更新量特別大的app，作為他的深度用戶我都震驚了，從15年年初到現(xiàn)在基本上是每個(gè)月一個(gè)大的功能模塊迭代。這樣大規(guī)模的迭代就必須要求產(chǎn)品做好信息架構(gòu)梳理。比如我們看頁(yè)面中，第一大塊的Cell是訪客+我的工作圈+錢包+收藏，我們可以理解為邏輯是“用戶行為模塊”。第二大塊是我的特權(quán)+成為認(rèn)證用戶，可以理解為是“用戶身份模塊”。

至于為什么脈脈要用全貫通的分割線，因?yàn)榭赡芪也旅}脈的產(chǎn)品和UID在設(shè)計(jì)之初就為了突出各個(gè)Cell的獨(dú)立感，大家看“訪客”、“我的工作圈”、“錢包”、“收藏”本身就是四大塊完全不相干的信息的聚合，所以脈脈的這種設(shè)計(jì)既突出了他們這四塊信息都是“我產(chǎn)生的行為記錄匯總”，有獨(dú)立開(kāi)了每一個(gè)行為模塊，我認(rèn)為這是使用全貫通線的原因。

說(shuō)了這么多，我們不妨再來(lái)看兩個(gè)UGC產(chǎn)出頁(yè)的對(duì)比，一個(gè)是微信的朋友圈，一個(gè)是網(wǎng)易云音樂(lè)的朋友模塊：
我們會(huì)發(fā)現(xiàn)，他們倆都一致的使用了全貫通的分割線，難道這只是命運(yùn)的巧合么？
其實(shí)不是吧，因?yàn)橛脩鬠GC內(nèi)容不可控，有可能是文字，有可能是圖片加文字，有可能是文字加鏈接，千奇百怪五花八門。這個(gè)時(shí)候用戶其實(shí)看這種頁(yè)面的時(shí)候視覺(jué)壓力是比較大的，所以每個(gè)模塊之間的大間隔加上全貫通的分割線把每一個(gè)內(nèi)容隔開(kāi)就顯得尤為重要。

總結(jié)一下

APP中分隔線的貫通和不貫通是產(chǎn)品和UID對(duì)產(chǎn)品信息架構(gòu)功能點(diǎn)梳理、分類之后形成的視覺(jué)排版產(chǎn)物，它造就了視覺(jué)上對(duì)于一款app頁(yè)面信息的整體和獨(dú)立感。

這是我自己的理解，還是那句話，切勿偏聽(tīng)偏信。

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