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

編輯導(dǎo)讀：前段時(shí)間， iOS14 升級(jí)了。蘋果的每一次升級(jí)都會(huì)引起人們的廣泛關(guān)注，畢竟它代表著行業(yè)標(biāo)桿。本文作者在使用的過(guò)程中，對(duì)iOS14 中「時(shí)間控件」的設(shè)計(jì)產(chǎn)生了疑問(wèn)，并從三個(gè)方面展開(kāi)分析，提出自己的一點(diǎn)思考，與你分享。

前幾天升級(jí) iOS14 后在「日歷APP」中遇到個(gè)「時(shí)間控件」使用體驗(yàn)問(wèn)題，在朋友圈「吐了個(gè)槽」后收到很多類似反饋，后來(lái)在使用「提醒事項(xiàng)APP」中發(fā)現(xiàn)有個(gè)類似「時(shí)間控件」，體驗(yàn)下來(lái)感覺(jué)挺順溜，于是想做個(gè)對(duì)比分析看看區(qū)別。

防杠說(shuō)明1：接下來(lái)聊的體驗(yàn)純我的「主觀感受」，對(duì)比分析也是基于過(guò)往的經(jīng)驗(yàn)來(lái)聊，沒(méi)有數(shù)據(jù)也沒(méi)有其他支撐，交流為主，無(wú)他意求放過(guò)。

防杠說(shuō)明2：蘋果在「日歷APP」和「提醒事項(xiàng)APP」這 2 個(gè) APP 設(shè)計(jì)一定有考慮過(guò)，文章純粹從外部視角去聊體驗(yàn)感受，不聊 APP 的場(chǎng)景&戰(zhàn)略&定位。

一、iOS14 的「時(shí)間控件」長(zhǎng)什么樣

iOS14 「日歷APP」新建日程&點(diǎn)擊展開(kāi)「時(shí)間控件」后的狀態(tài)

先介紹下「時(shí)間控件」長(zhǎng)什么樣，上圖左邊是「日歷APP」中「新建日程」界面，點(diǎn)擊「開(kāi)始-時(shí)間」后就展開(kāi)了「時(shí)間控件」，控件中分別有這5個(gè)功能：時(shí)鐘控件（鍵盤+觸摸）、年月控件、快捷切換月份控件、日歷控件、時(shí)區(qū)功能，「提醒事項(xiàng)APP」的「時(shí)間控件」界面基本差不多，具體差異會(huì)在在對(duì)比中展示。

二、開(kāi)始做3個(gè)角度對(duì)比

對(duì)比1：日歷間距處理

整體來(lái)看「時(shí)間控件」中的「日歷」是問(wèn)題最大影響體驗(yàn)最大的地方，「日歷」中的日期和日期之間的距離是大過(guò)日期和左右屏幕的距離，這會(huì)導(dǎo)致日歷看起來(lái)比較散不是一個(gè)整體，見(jiàn)下圖中黃色標(biāo)記和藍(lán)色標(biāo)記。

這類型的問(wèn)題屬于「格式塔理論」中的「Law of Proximity接近法則」，間距沒(méi)有起到把相關(guān)元素粘起來(lái)的作用，相反把元素拆散，有種信息量很多密密麻麻的感受。

「日歷APP」中日期之間間距和屏幕間距對(duì)比

具體「Law of Proximity 接近法則」的意思是：相互接近的事物被認(rèn)為比相隔較遠(yuǎn)的事物更加相關(guān)。

格式塔理論中的接近法則示意圖

這里密密麻麻的感受還有另一個(gè)理論基礎(chǔ)「米勒定律」，因?yàn)槿送瑫r(shí)處理信息大約是「7±2」條信息，當(dāng)信息量超出這個(gè)數(shù)量后出現(xiàn)，本能上一定是先排斥的，大家回想下如果你要填寫一個(gè)復(fù)雜表單時(shí)候的場(chǎng)景，就是這樣的感覺(jué)。

米勒定律的示意圖

我們對(duì)比下「提醒事項(xiàng)APP」中的日歷選擇，間距處理保證了日期距離是比外面小的，日歷看起來(lái)就是一個(gè)整體可操作的控件狀態(tài)，如果拿「格式塔理論」和「米勒定律」來(lái)看的話都是在合理范圍內(nèi)，事實(shí)感受也是這樣

「日歷APP」和「提醒事項(xiàng)APP」日歷進(jìn)行對(duì)比

對(duì)比2：上下層級(jí)關(guān)系處理

「時(shí)間控件」是通過(guò)點(diǎn)擊展開(kāi)的，如果這個(gè)簡(jiǎn)單控件，僅展開(kāi)動(dòng)效足以讓用戶理解，只是這「時(shí)間控件」中包含5個(gè)功能占了 1/2 的屏幕，動(dòng)效解決不了，加上「對(duì)比1」的日歷間距問(wèn)題，信息量巨大且復(fù)雜?？丶锩娉藰?biāo)題做了「文字加粗」處理去表現(xiàn)層級(jí)，在「上下銜接 or 左右遞進(jìn) or 背景顏色」都沒(méi)做很多工作。

和上一級(jí)樣式是在太接近，沒(méi)有能明顯區(qū)分開(kāi)，和上一層級(jí)融合到一起后，界面看起來(lái)從一行行就變成點(diǎn)擊后一下子增加「爆發(fā)式」的信息出現(xiàn)，觀感復(fù)雜+信息量變大。如果處理合適「理想中的層級(jí)關(guān)系」應(yīng)該是圖片右邊這樣的，用戶一眼看到的是一塊塊而不是一個(gè)個(gè)。

日歷APP 時(shí)間控件展開(kāi)后感覺(jué)是「碎裂」，理想應(yīng)該右側(cè)這樣塊狀的層級(jí)結(jié)構(gòu)展開(kāi)。

再來(lái)對(duì)比「提醒事項(xiàng)APP」中的層級(jí)關(guān)系，整個(gè)「時(shí)間控件」左右都有縮進(jìn)，左上和上一級(jí)的銜接處分割線也做了處理，加上上一級(jí)日期標(biāo)題前有個(gè)「日歷ICON」，很自然在視覺(jué)上就出現(xiàn)了上下層級(jí)關(guān)系出現(xiàn)，內(nèi)容一樣看起來(lái)清晰簡(jiǎn)潔很多。

「提醒事項(xiàng)APP」中用縮進(jìn)和風(fēng)格線去表現(xiàn)層級(jí)關(guān)系

對(duì)比3：頁(yè)面布局上的對(duì)比

再把視角放到頁(yè)面布局中，「日歷APP」采用的是邊到邊布局（Edge to Edge）方式，「提醒事項(xiàng)APP」采用的是卡片式布局（Card）方式。

在 iOS 系統(tǒng)中「邊到邊布局」是從 iOS7 后蘋果開(kāi)始采用的方式，優(yōu)勢(shì)是把極大增加了屏幕空間利用率，可顯示內(nèi)容增加，當(dāng)時(shí)主打機(jī)型是 4 英寸屏 的iPhone5s，，屏幕空間有限。

iOS6 和 iOS7 設(shè)置界面的對(duì)比

從圖片中里面是不是感覺(jué) iOS6 也有點(diǎn)卡片式布局的意思，其實(shí)大家當(dāng)時(shí)對(duì) iOS6 印象還是「擬物化」，這里也就不展開(kāi)了。

「卡片式布局」是被 Google 推崇起來(lái)的，當(dāng)時(shí)有款產(chǎn)品叫「Google Now」（現(xiàn)在已經(jīng)下線），這個(gè)產(chǎn)品可以語(yǔ)音互動(dòng)&主動(dòng)提醒（飛機(jī)、路況、比賽比分、突發(fā)新聞等等）信息內(nèi)容給到你，包含的信息內(nèi)容多樣且復(fù)雜，用了卡片設(shè)計(jì)去解決了信息多而不亂的問(wèn)題，信息和信息之間互不受到影響。

GoogleNow 主界面，卡片設(shè)計(jì)為主

「Google Now」產(chǎn)品已經(jīng)下線，找了個(gè)介紹視頻（https://v.qq.com/x/page/f03052ojg4u.html），大家可以注意里面不同場(chǎng)景下的卡片的布局都是不同的，也方便未來(lái)的擴(kuò)展。

回到這兩個(gè)頁(yè)面布局對(duì)比中，不過(guò)不展開(kāi)「時(shí)間控件」這樣對(duì)比來(lái)看兩邊布局并沒(méi)有很大的問(wèn)題，具體看是要更多「包容」還是要「屏效」。

不過(guò)這里我們對(duì)比的是「時(shí)間控件」，這部分看來(lái)「卡片式布局」是更合適的，布局能包容不同復(fù)雜的信息，塊和塊&功能和功能之間是更加清楚，不會(huì)引起混亂。

現(xiàn)在很多產(chǎn)品也都在考慮「卡片式布局」，像「手機(jī)淘寶」這兩年基本上已經(jīng)完全改造成「卡片式布局」，我理解是因?yàn)槭痔孕畔⒘鲝?fù)雜&個(gè)性，照片和元素的出現(xiàn)都不是固定的，用卡片作為「容器」去包容「內(nèi)容」，讓界面有秩序。

但這里還是要提一嘴信息流不要「無(wú)腦」追「卡片式布局」是最好，比如媒體為場(chǎng)景的APP，顯然「邊到邊布局」顯然更合適，比如 Instagram ，要給照片以更多的展示空間，也比如電商中對(duì)商品品質(zhì)有信心的，那也適合「邊到邊布局」，比如 SNKRS，對(duì)球鞋品質(zhì)表現(xiàn)的更加到位。

先理解再去設(shè)計(jì)「適合自家產(chǎn)品」的風(fēng)格是個(gè)挺重要的事，畢竟一個(gè)產(chǎn)品風(fēng)格會(huì)用很久，改動(dòng)成本很高。

三、最后總結(jié)一下

真的是抱著「心驚膽戰(zhàn)」的心情去做的對(duì)比，蘋果設(shè)計(jì)一直都是行業(yè)標(biāo)桿，這次是想趁聊對(duì)比時(shí)「拋磚引玉」聊聊「界面細(xì)節(jié)是如何決定設(shè)計(jì)品質(zhì)」，這些東西非常小，合作上下游也不一定在意，覺(jué)得差不多就好?，F(xiàn)在產(chǎn)品迭代速度飛快，留給設(shè)計(jì)師的時(shí)間也不多，怎么樣能夠快速有效地把細(xì)節(jié)處理好，是一個(gè)值得長(zhǎng)期討論的話題。

最后抽取一些文章中的「關(guān)鍵詞」做個(gè)總結(jié)：

• 間距控制：有些設(shè)計(jì)師出稿或工程師開(kāi)發(fā)&驗(yàn)收時(shí)會(huì)忽略「間距」的價(jià)值，其實(shí)「間距」對(duì)設(shè)計(jì)品質(zhì)影響非常大，背后設(shè)計(jì)理論支撐是「格式塔理論」，如果對(duì)「間距」不敏感，那要多練習(xí)練習(xí)去找好的產(chǎn)品設(shè)計(jì)去觀察和感受。
• 米勒定律：很多人看界面覺(jué)得亂，為什么感覺(jué)亂背后可以通過(guò)「米勒定律」做設(shè)計(jì)理論支撐，人在同一時(shí)間處理信息程度是「7±2」個(gè)，數(shù)量越多越亂。
• 層級(jí)關(guān)系：表單或復(fù)雜頁(yè)面中的界面需要把層級(jí)關(guān)系表現(xiàn)到位，不然界面會(huì)亂七八糟，在 iOS11 時(shí)候蘋果已經(jīng)注意到這一點(diǎn)并且已經(jīng)提倡過(guò)，閱讀了解「iOS11 設(shè)計(jì)理念和 3 個(gè)設(shè)計(jì)方向」。
• 邊到邊布局：一種屏幕效率利用高的界面布局，在iOS7 開(kāi)始后被使用
• 卡片式布局：一種能夠把復(fù)雜信息有序融合在一起的布局，更多包容和擴(kuò)展

好了，今天和大家就嘮叨到這。

作者：icojump，微信公眾號(hào)：邊設(shè)計(jì)邊管理

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

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