? ? ? 在一次檢查電子郵件的行為的簡(jiǎn)單的變成了我苦差事，谷歌實(shí)施的Gmail iOS應(yīng)用了最新的設(shè)計(jì)到Gmail的Web應(yīng)用程序。它看起來相當(dāng)?shù)木嚯x，但是當(dāng)你真正開始使用它，你會(huì)發(fā)現(xiàn)，除了一些小的延誤已經(jīng)得到了一個(gè)基本問題 - 內(nèi)容無法讀取。

該設(shè)計(jì)是不能說是最好的。我想利用這個(gè)機(jī)會(huì)來傳達(dá)一些設(shè)計(jì)經(jīng)驗(yàn)，并完成一個(gè)小小的重構(gòu)設(shè)計(jì)，采用了這些設(shè)計(jì)經(jīng)驗(yàn)技巧和設(shè)計(jì)干貨分享給大家。

第1課：提供足夠的對(duì)比度

對(duì)于一個(gè)應(yīng)用程序，其主要目的是為了讓用戶讀取和寫入的對(duì)比是首要的設(shè)計(jì)原則應(yīng)遵循。但是，這正是Gmail中無法做到。賈森·康威爾，首席設(shè)計(jì)師的Gmail，告訴，

“我們花了很多時(shí)間與排版，使其手感輕盈，干凈，而不是像一個(gè)負(fù)擔(dān)?！?/span>

真的，他們把它太輕了，干凈，這感覺就像一個(gè)負(fù)擔(dān)。雖然有讀和未讀郵件之間充分對(duì)比沒有因?yàn)镠elvetica Neue字體的更輕的重量和灰色它們?cè)O(shè)置英寸因此打火機(jī)色調(diào)的已讀郵件和背景之間的對(duì)比度不夠，他們太輕薄是可讀的。你可以嘗試一下：在一個(gè)舒適的水平設(shè)置你的手機(jī)的亮度;將手機(jī)在大約12英寸（30厘米）從你的眼睛和嘗試讀取收件箱中的屏幕讀取消息。明白我的意思？

沒有谷歌為什么要設(shè)計(jì)它呢？

康韋爾的話聽起來像一個(gè)直接的答案：

如果我們只是設(shè)計(jì)[的Gmail]看起來像蘋果的應(yīng)用程序，我們已經(jīng)有點(diǎn)失敗。我們希望它有一些個(gè)性那是它自己的。

但是，有可能是這背后一個(gè)更合理的理由 - 他們可能已經(jīng)想到了，一旦你讀你不回去給他們，經(jīng)常使他們足夠可讀的消息。但是，如果你做了什么？

你怎么能提高設(shè)計(jì)？

您可以讓一切可讀，仍然在一個(gè)以上的方式創(chuàng)造差異化對(duì)比讀和未讀郵件。你可以通過改變以下任何一種或所有產(chǎn)生的對(duì)比。

• 字體大小
• 字體粗細(xì)
• textbrightness（亦稱亮度）
• 文字顏色

我增加了字體的大小和重量，黑暗的文本，并轉(zhuǎn)移藍(lán)色的未讀消息的時(shí)間戳其發(fā)送者在此到達(dá)：

雖然我的眼睛重新設(shè)計(jì)看起來比原來的一些你最好也未必如此，它的外觀是唯一的，因?yàn)樗墓ぷ髟硪粯又匾?/span>原來看上去好于可讀性為代價(jià)而重新設(shè)計(jì)實(shí)現(xiàn)了兩者之間的平衡。

信息屏幕也可以得到改善

從收件箱去你又遇到了小文的訊息畫面。這不是為不可讀如收件箱中的光的文字，但提高它會(huì)使閱讀更加舒適。

雖然這次只是單純改變大小就足夠了，有一件事你可以做的更好了 - 使它更加微乎其微。白色的消息層上面漂浮的灰色背景，完整的陰影，形成于兩側(cè)一個(gè)20像素的灰色邊框。一個(gè)萬無一失的方法，使你的用戶界面最小的是消除這種多余的邊框和陰影。這是古怪的Gmail應(yīng)用程序，其對(duì)極簡(jiǎn)主義的親和力，并沒有選擇這樣做，也許它是康威爾提到的個(gè)性的一部??分。

除了是一種風(fēng)格的選擇，消除了邊界會(huì)增加保證金，這樣可以讓我們的眼睛從一個(gè)文本行的末尾順暢地流動(dòng)到下一行的開頭。

有多少余量就足夠了？

而在印刷設(shè)計(jì)余量通常運(yùn)行大于移動(dòng)設(shè)計(jì)這樣一英寸就會(huì)留下很多未使用的空間兩側(cè)。因此，我們可以依據(jù)我們的另一個(gè)屬性，裝訂線寬度決定。

在文本是奠定在列的任何布局的列之間的寬度，堪稱裝訂線寬度，以提高可讀性事宜。太近列看起來像一根數(shù)據(jù)線，太寬，他們看起來超脫，保持它等于或小于領(lǐng)先（連續(xù)兩行文字之間的間距）看起來是對(duì)的多一點(diǎn)。其理由是，該欄之間的間距應(yīng)大于行間的空間，使我們的眼睛不要困惑，那里的下一行開始。

背著它在移動(dòng)設(shè)計(jì)中的文字是奠定在單個(gè)列，我們可以考慮利潤(rùn)率為裝訂線寬度，并按照其約定在設(shè)置它的大小。也就是說，頁邊距應(yīng)至少等于領(lǐng)先。作為最低限度，至少應(yīng)該比線之間的空白稍大。但在Gmail應(yīng)用程序的有效保證金大小的一半，領(lǐng)導(dǎo)也低于空白。

重新設(shè)計(jì)的訊息畫面

綜合以上考慮，我重新設(shè)計(jì)了屏幕，增加了字體大小，相應(yīng)的領(lǐng)導(dǎo)和保證金。保證金仍不足的領(lǐng)先，但它至少是大于行間空白的厚帶。