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

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

第1課：提供足夠的對比度

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

“我們花了很多時間與排版，使其手感輕盈，干凈，而不是像一個負擔?！?/span>

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

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

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

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

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

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

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

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

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

雖然我的眼睛重新設(shè)計看起來比原來的一些你最好也未必如此，它的外觀是唯一的，因為它的工作原理一樣重要。原來看上去好于可讀性為代價而重新設(shè)計實現(xiàn)了兩者之間的平衡。

信息屏幕也可以得到改善

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

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

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

有多少余量就足夠了？

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

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

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

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

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