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

以上引文是從Josh Clark的書《Tapworthy》中摘錄的，這是一本iPhone UI設(shè)計的權(quán)威書籍。蘋果的移動HIG（人機(jī)界面指南）中建議將44 X 44像素作為讓可點(diǎn)擊UI元素用著舒服的最小尺寸。大多數(shù)應(yīng)用，包括幾乎所有原生應(yīng)用都遵循該44像素的節(jié)奏。大家都很高興，所以會有什么問題呢？

由于從去年開始就進(jìn)行iPhone應(yīng)用界面設(shè)計，我已經(jīng)深深感受到了原生應(yīng)用和非原生應(yīng)用的細(xì)微區(qū)別。作為一名擅長印刷品設(shè)計，且擁有敏銳排版感覺的設(shè)計師，我不禁注意到了44像素節(jié)奏的缺陷和不完善的地方。

基線網(wǎng)格（Baseline Grid）

首先讓我們更近一步地看看44像素節(jié)奏。例如，在一個由分組表格組成的界面上，這種節(jié)奏被進(jìn)一步細(xì)分為四個區(qū)間，每個區(qū)間11個像素。（這些區(qū)間）為每 個段落的頭部（11像素）和每個分組表格（22像素）提供了空白間距。因此我們可以說iPhone屏幕布局遵循最大44像素，最小11像素的節(jié)奏。這兩種 節(jié)奏組成了視覺構(gòu)圖的基礎(chǔ)。

基線網(wǎng)格（Baseline Grid）

iPhone的屏幕有效尺寸是豎排方向上寬320 X 高460像素（如果是視網(wǎng)膜屏就是點(diǎn)數(shù)），不包括狀態(tài)欄。如果你用460除以44，余數(shù)是20，除以11余數(shù)是9，460不能被11或44整除。（因此）垂直節(jié)奏就被打亂了。

44像素節(jié)奏

并不是只有我抱怨這事兒。除了一個結(jié)構(gòu)粗糙的基線網(wǎng)格，作為讓步，人們還到處使用許多其他任意布局值（譯者注：就是間隔像素不按11/44的倍數(shù)計算），來克服不穩(wěn)定的垂直節(jié)奏問題。
20像素狀態(tài)欄

狀態(tài)欄

iPhone和iPad的狀態(tài)欄都是20像素高，意味著它也不遵循“垂直節(jié)奏”。點(diǎn)擊狀態(tài)欄，屏幕會回滾到頂部。在IOS 5系統(tǒng)中向下拉動它會顯示通知中心。這是一個非常小的點(diǎn)擊區(qū)域。我認(rèn)為操作系統(tǒng)采用了一些聰明的算法來降低誤差幅度，讓其更易點(diǎn)擊。這太虛偽了，一方面蘋 果主張44像素作為最小點(diǎn)擊區(qū)域，但還告訴我們某個需要足夠復(fù)雜操作的元素僅20個像素就夠了。
29像素按鈕

29像素按鈕

導(dǎo)航條、工具條和表格單元格中的按鈕都是29像素高，所以太不符合垂直節(jié)奏了。盡管它們表面上有29個像素高，它們的有效點(diǎn)擊高度實(shí)際上超出了頂部和底 部邊緣，達(dá)到了大約44個像素（高）。像Safari工具條那樣的樸素風(fēng)格按鈕沒有邊框，所以它們不會說謊，我們可以察覺到它們更容易點(diǎn)擊。

49像素選項(xiàng)卡（Tab Bar）

選項(xiàng)卡

選項(xiàng)卡是由文字標(biāo)簽+上方圖標(biāo)組成的，需要額外高度放置它們。49個像素高加上黑顏色，和惡心的喇叭褲一樣。怪不得Tweetie在成為Twitter前已經(jīng)放棄了原生的選項(xiàng)卡。這也不符合44像素垂直節(jié)奏。

74像素帶有提示信息的導(dǎo)航條

帶有提示信息的導(dǎo)航條

如果打開了導(dǎo)航條上的提示信息，（導(dǎo)航條）就會變成74像素高，同樣，這不符合垂直節(jié)奏。
所以你看到，當(dāng)蘋果在增加越來越多的功能時，并沒有重新考慮布局（情況），伴隨著妥協(xié)和隨意性，它幾乎沒能把握住視覺上的整體感。（蘋果）正變得零散不 堪，且看起來接近于Android了。我認(rèn)為蘋果是時候該重新考慮IOS用戶界面的視覺比例了，并返回用戶需要的和諧的比例。

4像素節(jié)奏單元

我最近嘗試用另一種方法為iPhone版的Likables設(shè)計UI——采用4像素節(jié)奏單元。不多不少，就把4像素作為一個基本單元。首 先，iPhone和iPad的屏幕寬高均可被4整除。采用4作為一個基本單元，我們能以4、8、16和32像素的等分間隔構(gòu)造水平和垂直網(wǎng)格，這種方法高 度靈活。

4 X 4網(wǎng)格

更新：我現(xiàn)在叫它4像素節(jié)奏單元而不是節(jié)奏。就像樂譜中的四分音符一樣，它通常是更大節(jié)奏的一部分。因此我不把4像素叫做一個節(jié)奏，它更像是一個基本單元。

使用4像素單元的美妙之處在于，只需很小的修改就能把目前原生的（手機(jī)界面）元素融入到新 的比例尺中。狀態(tài)欄仍舊可以保持20像素高。按鈕高度可以從30凸起到32像素高。可以將選項(xiàng)卡高度減到48像素。帶有提示信息的導(dǎo)航條可把74替換成 72像素高。分組表格單元格高度可仍舊保持44像素高。段落頭部和表格組之間的距離可以是12的倍數(shù)。

隨著垂直和水平間距變得相同，我們可以很容易對方形元素進(jìn)行布局。例如屬性圖片和圖標(biāo)。并 且通常它們都以能夠被4整除的標(biāo)準(zhǔn)尺寸出現(xiàn)。像Facebook和Twitter這樣的社交網(wǎng)絡(luò)通常使用默認(rèn)48 X 48的頭像。像在Windows和OS X上的電腦圖標(biāo)都是16 X 16、24 X 24、32 X 32、48 X 48、256 X 256、512 X 512大小。它們都能被4整除。因此iOS上的圖標(biāo)能夠遵循標(biāo)準(zhǔn)大?。ㄔO(shè)計），并省去了開發(fā)人員重新設(shè)計奇數(shù)大小圖標(biāo)的時間和精力。

采用新比例尺（的界面）

垂直網(wǎng)格的特寫

和原來的相比，新的比例尺更穩(wěn)定。同時它的外觀和給人的感覺更好?，F(xiàn)在它給人感覺不像是任意設(shè)計的電子接口，更像是根據(jù)印刷排版原則巧妙排版的物理文件。它也更好地滿足了iPhone界面作為物理對象手勢操作的隱喻前提。但是我們可以走的更遠(yuǎn)。
當(dāng)單元格中包含更多信息時，使用4像素單元的優(yōu)勢很明顯，它們可以很好地適應(yīng)（4像素單元）。

iPod播放列表

iPod播放列表屏幕具有包含兩行文字的單元格。為了避免文字小、屏幕亂，單元格高度被提升至46像素。這樣就完全丟失了視覺節(jié)奏的整體性。如果我們用48像素單元格來替代44或46像素怎么樣呢？

iPod播放列表新舊比例尺對比

兩種播放列表的文字都和淺灰色的按鈕左對齊。增加的文字間距也提高了可讀性和可瀏覽性。淺灰色按鈕和導(dǎo)航條按鈕的高度都是32像素。結(jié)果呈現(xiàn)出視覺上更穩(wěn)定的布局。

你可能注意到了48像素節(jié)奏會把播放列表的最后一行灰色文字截掉。這并不是問題，因?yàn)橛脩艉苌?從頭到尾一直盯著一個靜止屏幕。（人們）更容易（將視線）固定于一小塊區(qū)域而不是整個屏幕，因此用戶通常的行為是滾動屏幕，并把信息從底部移到屏幕的上方 區(qū)域，這個區(qū)域上他們的視線位置是固定的。因此更重要是提升可瀏覽性，甚至是在信息密度不高的情況下。
更多例子

我已經(jīng)開始用4像素單元設(shè)計iPhone版的Likables。這里有一些用來顯示其多樣性的截圖。

Likables歡迎界面

Likables個人屬性界面

我想指出的是，我一點(diǎn)也沒說使用網(wǎng)格會立刻讓你的UI更好。因?yàn)樘O果在使用一些網(wǎng)格配合新功能的新元素時已經(jīng)變得不和諧了，我就提出了一種視覺上更穩(wěn)定的網(wǎng)格（系統(tǒng)）。設(shè)計師當(dāng)然還需要在設(shè)計真正好界面時考慮其他原則。

我也在為Anideo設(shè)計Denso的iPhone和iPad應(yīng)用程序用戶界面，并且正在整個APP中廣泛使用4像素節(jié)奏。由于它太好用了，我可能會在今后的設(shè)計中為所有的APP程序使用它。

我希望一旦Likables和Denso上線了，它們就會證明4像素節(jié)奏單元是有生產(chǎn)價值的。我也希望蘋果看到這一點(diǎn)，也許它會在未來的iOS版本中重新考慮UI的視覺比例。

來源：盒子UI