• 未分類
  • 平面理論教程
  • Flash教程
  • 其他作品
  • 標誌設計
  • 海報招貼
  • 包裝設計
  • 畫冊設計
  • 網頁設計
  • 名片設計
  • PS作品
  • CG設計
  • MAYA教程
  • Illustrator教程
  • AutoCAD教程
  • 3DMAX教程
  • Painter教程
  • 繪畫教程
  • FireWorks教程
  • 攝影教程
  • 工業設計
  • 網頁設計教程
  • 其他資訊
  • 摺紙大全




  • [ 平面理論教程 ] 5大黃金準則幫你設計移動端郵件—- 其他教程




    教學主題: 5大黃金準則幫你設計移動端郵件

    大家好!! 小編今天來和大家分享關於 其他教程中的平面理論教程教學

    今天的這個教學主題是: 5大黃金準則幫你設計移動端郵件

    這教學的重點為這幾點 [ 郵件,移動,設計,準則,黃金,設備,一個,問題,能夠,鏈接, ]

    希望你可以從這幾點中領悟到修圖的精華

    本文重點

    用移動端收郵件的人越來越多,如何令郵件變得清晰易讀也成了一個設計難點。今天分享5個實戰經驗中總結的設計準則,幫你搞定小屏幕上的郵件設計。

    用移動端收郵件的人越來越多,如何令郵件變得清晰易讀也成了一個設計難點。今天分享5個實戰經驗中總結的設計準則,幫你搞定小屏幕上的郵件設計。

    移動設備上的郵件設計不僅僅是一個內容填充列表,它涉及諸多設計元素。

    對於移動設備的設計從來不是一件簡單的事情。人們採用不同的方式使用網絡,我們需要考慮一個全面的方案,特別是在小屏幕上使用郵件。

    讓我們一起來探討關於移動設備上的郵件設計需要考慮的問題,這些討論並不意味着能夠解答手機郵件設計上的所有問題,但這是一個好的起點。

    一、保持簡潔

    嚴禁複雜 —— 尤其是在郵件上。始終避免使用複雜的結構,否則在小屏幕上渲染時一定會失敗。請記住許多設備是不支持媒體查詢的(例如谷歌郵件),所以我們不能指望成熟的內容重排技術。

    一個線性簡單的布局在大多情況下都能表現良好。

    郵件的整體大小也非常重要,如果它超過了預設的大小(大概100KB),你的郵件將不能完全加載。我在所有的客戶端上都沒有測試出這個問題,但是谷歌郵件和IOS設備出現了這個問題。

    下面這張截圖裡,你能夠看到用戶是如何通過點擊一個鏈接查看整個信息:這使得用戶不必閱讀全部郵件。

    5大黃金準則幫你設計移動端郵件

    二、注重郵件目標和摺疊

    雖然我不是“Above the fold”問題的粉絲,不過在移動設備上閱讀郵件意味我們要把上半部分放在非常重要的位置。

    讓用戶能夠輕鬆地看到摘要目錄,在大多數情況下都能快速瀏覽內容,從而引導讀者深入閱讀。

    郵件頂部的小段落可以做到這些。

    5大黃金準則幫你設計移動端郵件

    這使得一些重要的客戶端(如谷歌郵件,或者IOS和OSX上的郵件)工作更便利。

    5大黃金準則幫你設計移動端郵件

    三、調整字體和圖片

    這個話題只適用那些支持媒體查詢的設備。不幸的是,對於那些不支持的設備我們沒有任何辦法,他們會自己調整文本與圖片。

    目前,媒體查詢能夠被所有IOS設備支持,安卓原生郵件應用也支持(但是有一點問題並且Lollipop拋棄了這一特性支持谷歌郵件),還有最新的黑莓手機和少數的其它手機支持。

    IOS設備在字體與圖片尺寸上有兩個主要問題:

    小字體在默認情況下被放大

    郵件寬度基於最大的單元

    字體被放大通常不能說是一個嚴重的問題,但是在很多情況會導致文本超出你的布局被剪切。

    在你的CSS代碼中加入這一行能夠輕鬆解決這一問題。

    5大黃金準則幫你設計移動端郵件

    下面的截圖你能夠清楚地看到通過添加-webkit-text-size-adjus,紅色區域的文本大小是如何改變的,左邊的是添加后的,右邊的是沒添加。

    5大黃金準則幫你設計移動端郵件

    字體調整也影響移動設備上的用戶體驗。小字體在桌面設備上能夠輕鬆閱讀,但是小屏幕上就有完全不同的影響。

    看下面這個例子,右邊的文字被放大了能夠輕鬆閱讀,吸引用戶的目光。

    5大黃金準則幫你設計移動端郵件

    一般來說,在移動設備上放大文本字體是一個非常好的做法,特別是對郵件來說。因為閱讀的時間很緊張你需要快速抓住用戶的關注。

    四、自定義鏈接和按鈕

    移動設備上的郵件設計對於鏈接需要一點技巧。

    首先考慮到將被手指點擊,所以保持良好的間隔並嚴格限制數量。

    確保他們很容易點擊並可見。此外,永遠記住在內聯CSS樣式表中為錨添加規則:Gmail應用程序鏈接的樣式為藍色,默認情況下強調他們。

    一個潛在的小問題是,Gmail和IOS自動為電話號碼,URL和電子郵件字符串(只是Gmail)添加鏈接。

    為避免IOS自動生成電話鏈接,你可以在你的代碼中添加meta標籤。

    5大黃金準則幫你設計移動端郵件

    Gmail的解決有一些狡猾:它通過加入一些不可見的字符,以確保字符串不會被識別為一個潛在鏈接。

    我用HTML實體和“中性”span標籤做了一系列測試。只有用span標記打破鏈接的每個部分,才能獲得預期結果。

    五、添加間距

    對於郵件的設計我有一個最新的建議就是考慮增大文本內容的內邊距,這能夠顯著提升郵件可讀性。

    看完小編分享的教學之後 是不是對平面理論教程中的其他教程教學更熟悉了呢?

    希望我們所介紹的 5大黃金準則幫你設計移動端郵件 這教學會喜歡

    文章標題: 骨子愛創意- 5大黃金準則幫你設計移動端郵件–轉載請註明來源處

    本教學分類為平面理論教程中的 其他教程相關教學

    文章相關關鍵字為: 郵件,移動,設計,準則,黃金,設備,一個,問題,能夠,鏈接,

    本文永久連結 :5大黃金準則幫你設計移動端郵件

    本文轉載自 :VIA