每當要設計一個軟件界面的時候，設計師收集資料是必然的過程。最近北京藍藍設計要一個沉穩嚴謹的pad端軟件界面。

于是國內外網站找了許多資料，集合一起，與大家分享！

1

整體的統一感知：大腦會將復雜的視覺內容簡化為容易理解的整體，如圖所示；

為了對稱，我將她肩膀上的缺口補上了，但是作為一個形象剪影，她的頭發太像《星球大戰》中黑武士的頭盔了，所以發型還需要進行一些調整。馬尾辮足夠現代，也非常女性化，看起來會給人年輕的感覺，但是在32像素的寬度之下，馬尾辮的效果看起來像是某種嚙齒動物。如果改成長發披肩或者其他的造型，在如此低的分辨率之下也難以準確表達、消除歧義。所以，最終我使用了一個更加爽利精致的短發形象。

更新完女性剪影之后，問題來了：舊的男性剪影似乎也有些僵硬而過時。于是，我調整了男性剪影的發型，令其更加平滑，讓肩膀的弧度更大。在更新這個圖標設計的時候，我發現Facebook的常常會用男性單人圖標來表示“添加好友”。這樣的設定似乎并不公平，或者說是不準確，難道所有的朋友請求都應該用男性標識來傳達么？唯一的性別圖標是不恰當的，所以我準備了一組。

清晰度是用戶界面設計最重要的元素。事實上，用戶界面設計的所有目的是為了使人們能夠與您的系統通過溝通和功能來進行交互。 如果人們不知道你的應用程序怎樣工作或在你的網站上應該去哪里，他們會困惑和沮喪。

當你已經定義了你的目標用戶而且只想通過一張嘴來提升產品，你應該直擊它們的心靈和感受。如果你創造出了強烈的感受，你會使大家都在談論這個產品。 因此，你應該分析他們的需求和典型的人口特點來創造顯著的情緒反應，這種情緒愿意與他人分享。順便說一句，這種反映的不同取決于產品的目標不同：你可以敬 畏他們，震撼他們，驚訝他們，鼓勵他們，迷惑他們——任何強烈的感受將會鼓勵用戶告訴其他人這種體驗，并且與他人分享。

在我的小心臟都快停跳了的時候，我的電影突然出現了。

這一點都不人性化好嗎？

格式塔原理解釋了人們如何以視覺方式感覺物體，以及圖像的結構，視角，大小等要素是如何影響我們的視覺的。

在下面這篇文章中，我們首先會簡單介紹一下格式塔原理中的基本概念，然后再詳細探討一下如何將它們應用于今日的UI設計中。

自從幾個互聯網公司的產品帶領了白色簡潔設計，所以現在在國內不用白色的設計便不能叫做好設計。我們打開所有的應用，從娛樂到閱讀，到社交工具到備份工具等等，一切都是白色。這一期我們來洗洗腦吧，看看國外優秀的其他色設計吧 >>>

藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源：莫貝網

 如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

1.保持簡潔

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

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

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

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

2.注重郵件目標和折疊

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

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

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

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

3.調整字體和圖片

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

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

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

• 小字體在默認情況下被放大
• 郵件寬度基于最大的單元

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

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

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

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

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

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

關于圖片

你可以為那些支持媒體查詢的設備加載針對性圖片（可以看看這兩篇文章A Slick, New Image Swapping Technique for Responsive Emails和Optimizing images for mobile）

4.自定義鏈接和按鈕

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

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

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

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

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

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

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

5.添加間距

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