UX 設計師寫給 UI 新手的 7 個法則(下)

如果你想要成為好的 UI 設計師,你必須學會在圖片上美觀地呈現文字。優秀的設計師在這方面做得都不錯,而水平較低的設計師往往在這方面也比較差,甚至完全不會。在學習了這部分以後,相信你會有很大的提升。
評論
評論

本文編譯自 Medium,作者是一位 UX(User Experience, 用戶體驗 ) 設計師,他通過自己學習 UI 設計的過程,總結出 7 條實用的法則,為 UI 設計新手提供了寶貴的經驗。文章分為 2 個部分,這裡是第 2 部分。第 1 部分請移步:UI 設計新手?試一試這 7 條法則(Part 1)

〉〉 閱讀 寫給 UI 新手的 7 個法則(上)

以下是 UI 設計入門你需要掌握的 7 條法則:

  1. 光線來自天空(第 1 部分)
  2. 黑白優先(第 1 部分)
  3. 增加空白空間(第 1 部分)
  4. 學會在圖片上呈現文字
  5. 做好強調和弱化
  6. 只用合適的字體
  7. 像藝術家一樣偷師

法則 4:學會在圖片上呈現文字

在圖片上優雅地呈現文字並不容易,這裡給出 6 種方法。

如果你想要成為好的 UI 設計師,你必須學會在圖片上美觀地呈現文字。優秀的設計師在這方面做得都不錯,而水平較低的設計師往往在這方面也比較差,甚至完全不會。在學習了這部分以後,相信你會有很大的提升。

方法 0:直接在圖片上放文字

我很猶豫要不要講這種方法,因為應用起來十分困難。不過直接在圖片上放文字從技術上來說也是可行的,下面這個網站的首頁就很不錯,所以說說也無妨。

直接在圖片上放文字時,有幾點需要非常注意:

  • 圖片應該比較暗,而且顏色不能有太大的反差。
  • 文字必須是白色的,我知道你也能找到用其它顏色的案例。但是我覺得,你最好還是用白色。
  • 在不同螢幕,不同尺寸的窗口調試頁面,確保各種情況下文字都是清晰、易於辨識的。

上面這 3 個方面調整好就 OK 了,不要再做其它處理。

我自己從來沒有在任何專業的專案上直接把文字放在圖片上,這種方法是可行的,也能做出酷炫的效果,但還是小心點。

方法 1:暗化整張圖片

可能在圖片上放文字最簡單的方法就是暗化整張圖片,如果原圖顏色不夠深,你可以用半透明的黑色在上面覆蓋一層,比如下面這個案例就加了一層不透明度 35% 的黑色。

如果你直接放原圖,底色太亮,和文字的反差不夠明顯,看不清文字。

類似的方法同樣適用於小圖。

加一層黑色是最簡單、普適性最強的。當然你也可以用其它合適的顏色,比如這樣:

方法 2:給文字加個框

這是一種簡單有效的方法。在白色文字下方加上一個略透明的黑色方塊,就可以放在各種各樣的圖片上了,而且顯示效果非常清晰。

當然,你也可以放別的顏色,只是需要小心謹慎。

方法 3:虛化圖片

虛化圖片是增加文字易讀性的好方法,把文字下方的圖片虛化了,同時把虛化部分亮度調低。

iOS 7 用毛玻璃的效果虛化了背景,而 Windows Vista 也使用了這種虛化效果。


虛化圖片的方法也有局限性,你需要確保在不同螢幕上圖片尺寸調整後,文字依然是在虛化的區域上的。

看看下面這個例子,你能看清小標題嗎?真不知道這樣的設計是怎麼通過審核上線的。

方法 4:底部褪色

所謂底部褪色是將圖片的下邊緣變暗一些,然後在放上白色的文字。這是一種非常有獨創性的方法,我不知道在 Medium 之前有沒有人用過,但我是先在 Medium 上看到的。

乍一看,你可能覺得這就是把文字放在了圖片上。其實不然,圖片上有一些非常細微的變化,中間完全沒有黑色覆蓋,而底部有不透明度大約 20% 的黑色覆蓋在上面。

這樣的變化很難看出來,但確實存在,而且確實提高了文字的可辨認性。

此外,Medium 還給文集圖片上的文字加了些許陰影,進一步提高了文字的易讀性。最終的效果就是 Medium 可以把任何文字放在任何圖片上,閱讀體驗非常好。

有人可能會問了,為什麼是把圖片的底部變暗呢?為什麼不能是圖片的其它區域?要回答這個問題,請看法則 1:光線來自天空。光線從上面照下來,圖片的上方亮一些,而底部較暗,看起來更自然。

此外,你還可以把虛化和底部褪色結合起來,做出底部虛化的效果,比如下面這張圖的效果:

方法 5:把圖片部分區域的光線變得更柔和

Elastica 的部落格的主圖並不是太暗,而且對比都較強。為什麼文字的辨識度還這麼高呢,就像下面兩張圖顯示的這樣:

這裡實際上是把圖片局部區域的光線變得更柔和,突出了文字。如果我們在瀏覽器上縮小 Elastica 部落格,會看出到底發生了什麼。

在圖片左下角有一塊陰影區域,文字置於其上,就很容易辨認了。

這可能是在圖片優雅呈現文字最細微的一種方法。我還沒在別處見過,保存下來,說不定將來什麼時候就用到了。

法則 5:做好強調與弱化

把文字設計得又美觀又得體通常就是通過放大或縮小文字,做出反差的效果。

我認為,UI 設計最困難的地方就在於文字的裝飾,因為設計文字時需要考慮的因素太多了:

  • 字號
  • 顏色
  • 字體粗細
  • 大小寫
  • 斜體
  • 字母間距
  • 頁邊空白(準確的說不是文字的一部分,但是容易影響閱讀時的注意力,所以也算在這個列表裡了)

還有其它一些方法調整文字吸引讀者的注意力,但是不常用,也不推薦你使用。

  • 下劃線。下劃線現在基本上等同於超連結了,我覺得你還是不要挑戰人們的常識比較好。
  • 文字背景色。這個有時候也被當作超鏈接,只不過不是那麼常見。
  • 刪除線。一邊待著去吧,你這個怪人。

就我個人經驗來說,當我覺得一段文字設計的不好時,通常不是因為用了大寫字母,或者顏色太重,而是因為各種要素的搭配出了問題。

強調和弱化

你可以把所有的文字樣式分成兩類:

  • 增強可讀性的樣式:大字號、粗體、大寫等;
  • 減弱可讀性的樣式:小字號、與背景對比不明顯、空白較少等。

上圖「Material Design」這個標題就很突出:字號大、反襯明顯、字體較粗

上圖頁腳的字就是弱化處理的,字號小、反襯不明顯、字體較細

我認為文字設計的核心在於:

標題是唯一需要全部強調的元素,其它的部分則應該將強調與弱化結合使用。

如果網頁上某個元素需要強調,把強調和弱化結合在一起,可以避免整個頁面看起來太有壓迫感,同時又讓各個元素的呈現效果恰到好處。

下面這張 Blu Homes 的首頁堪稱是這方面的典範:上方文字較大,突出顯示,但是用了小寫字母。沒有給人強烈的壓迫感。

網頁上的數字字號較大,是網頁上的重要信息。但是請注意,數字的字體很細,與背景色對比也不明顯;而數字下方的單位雖然寫得很小,卻全部加粗,用大寫字母。

這就是設計中的平衡。

上面這張圖是 Contents Magazine 的網站,也是學習強調和弱化的一個好案例。

  • 文章標題是唯一沒有用斜體的部分,而且還做了加粗處理,更容易吸引讀者的關注。
  • 作者姓名寫在文章標題下方,字體加粗,與沒有加粗的「by」區分開來。
  • 「ALREADY OUT」獨立出來,字號很小,與背景區分不明顯,但是用了大寫字母,字間距很大,文字外圍空白較多,當你想要找它的時候一眼就能看見。

滑鼠懸停或選中時的樣式

設計鼠滑鼠停或選中時的樣式也是同樣的道理,只不過更難一些。

通常情況下,改變字體大小、大小寫、粗細時會改變文字所佔空間的大小,讓人們理解鼠標正懸停在這裡。

此外,下面這些要素也能夠影響人們的感受:

  • 文字顏色
  • 背景色
  • 陰影
  • 下劃線
  • 細小的動畫——上升、下降等

這裡再推荐一個比較普適的方法:給白色的元素上色;或者當背景顏色較深時,把有顏色的內容變成白色。

裝飾文字是非常難的,但是每當我感到“這些文字不可能再變好看時”,我的判斷都是錯的。我需要做的就是不斷優化,不斷嘗試。

所以想開點吧,如果你設計出來的文字不好看,不要擔心,你需要不斷地提升自己的能力,讓自己變得更好。

法則 6:只用合適的字體

有些字體很不錯,就用它們吧。

注意: 這一部分沒有太多知識要學,我只是給你推荐一些好用的免費字體給你。

有的網站很有個性,會用到比較特別的字體。但是,大多數產品的 UI 設計只要保持乾淨、簡潔就可以了。所以,把那些太花哨的字體放到一邊吧。

我在這裡推荐一些免費的字體。因為這篇文章是為初學 UI 設計的人所寫,這些免費的字體完全夠用了。

我希望你把這些字體下載下來,在你開始專案設計之前,瀏覽一下它們。

以下是我推薦的字體:

Ubuntu(上圖)——字體偏粗,對於有些 app 來說太張揚了,但是對於大多數 app 來說還是不錯的。在 Google Fonts 上可以找到。

Open Sans ——非常易於辯讀,是一款很流行的字體,用在正文非常合適,在 Google Fonts 上也能找到。

Bebas Neue ——適合作標題,都是大寫字母,在 Fontfabric 上能找到,這個網站上還有一些 Bebas Neue 的應用實例。

Montserrat ——只有兩種粗細,但也足夠了。是 Gotham 和 Proximate Nova 最好的免費替代品,但不如那兩種好。在 Google Fonts 上能找到。

Raleway ——適合作標題,但不適合用於正文。有一個極細的版本(上圖沒有展現),在 Google Fonts 可以找到。

Cabin ——在 Google Fonts 可以找到。

Lato ——在 Google Fonts 可以找到。

PT Sans ——在 Google Fonts 可以找到。

Entypo Social ——一個社交網絡圖標集,在 Entypo.com 上能找到。

這裡還有其它一些資源:

Beautiful Google web fonts ——有 Google Fonts 的運用實例,我經常在這裡找靈感。
FontSquiirrel ——收集了不少可以免費商用的好字體。
Typekit ——如果你用 Adobe Creative Cloud(也就是用 Photoshop 或 Illustrator 等),你就可以從 Typekit 中獲得包括 Proximate Nova 在內的大量字體。

法則 7:像藝術家一樣偷師

我第一次坐下來試著設計按鈕、圖標、彈窗等各個 app 元素時,我感到我對於什麼是「好」知之甚少。但是我也很幸運,我並不需要完全設計全新的 UI,因為有很多優秀的作品可以藉鑑。

下面列出一些資源,肯定會對你的設計非常有用 (按照重要性從高到低排列)

1. Dribbble

 

這個專為設計師而做的網站集合

了網上最好的 UI 設計作品,在 Dribbble 上你能找到幾乎各種類型的案例。

你可以關註一下 我的 dribbble 作品集 。下面是其他一些推薦給你關注的人:

Victor Erixon ——有著非常明顯的個人風格,非常厲害。他的作品很漂亮、簡潔,扁平設計。他做 UI 設計師已經 3 年了,是這方面數一數二的人才。

Focus Lab ——這些人是 Dribbble 中的名人,他

們的作品非常多樣化,絕對是一流的。

Cosmin Capitanu ——他是個通才,做出來的東西很瘋狂,有未來感,但又不太花哨。他用色非常棒,但並不只專注做 UX 設計的。

2. Flat UI Pinboard

這裡面有一些特別棒的手機 UI 設計,你能找到很多精美的 UI 設計實例。

3. Pttrns

這裡面有大量 app 螢幕截圖,它的一大好處在於,它是按照 UX 模式分類的,因此,你在搜索你手頭正在做的這一類作品時非常方便。

我堅定地認為每個藝

術家初期都該像鸚鵡一樣,不斷的模仿和學習,直到能把頂尖的作品模仿得惟妙惟肖,然後再開始找到自己的風格,引領新的潮流。

所以,像個藝術家一樣偷師吧!

總結

我之所以寫這篇文章,是因為我很遺憾自己當初在學 UI 設計時,沒有這樣的教程。我希望這篇文章能幫到你。如果你是一名 UX 設計師,在畫好框架和線框圖之後,做出個漂亮的實物模型吧。如果你是一名開發者,把你下一個專案做得更美觀一些吧。

UI 設計的學習不可能一蹴而就,而是需要不斷地觀察、模仿並且和他人交流。以上是到目前為止我所學到的,我也會保持著初學者的心態,繼續前進。

[ 本文編譯自:medium.com ]


Microsoft Teams 推出全新網路研討會功能,實現防疫期間線上活動需求

既然實體活動停辦,不妨趁此機會了解更多關於線上會議、活動的操作方法,避免線下群聚感染。Microsoft Teams 全新功能一條龍包辦虛擬活動策劃,不論是常態會議或大型活動都適用。
評論
Photo Credit:Microsoft
評論

5 月 19 日全台疫情警戒升至第三級,停止室內 5 人、室外 10 人的聚會,教育部也宣布各級學校學生全面停止到校上課,並採行遠距教學。沒想到此公告一出,隨即哀鴻遍野,許多師生與家長不擅長使用數位平台,有多場學術研討會與講座活動改採線上模式,畢業典禮也不得不停辦。企業單位更是備受衝擊,原本預定的記者會、法說會、行銷活動等都被迫停擺,主辦單位急於苦尋能容納數百人以上的平台工具,也為了註冊報名頁面製作、會後回饋資料收集等工作而焦頭爛額。

其實上述這些問題,舉辦線上會議行之有年的 Microsoft Teams,都有很好的解方。

全新網路研討會功能,Microsoft Teams 新增三大亮點功能

近期本土疫情加劇,台灣才要經歷其他國家去年就面臨過的考驗。無論是異地辦公、遠距教學、線上研討會等,這些疫情時代的新常態生活,在台灣以外的大多數國家,經過一年的練習後再也熟悉不過。面對各類型實體研討會、講座與活動大幅線上化的趨勢,Microsoft Teams 推出全新網路研討會功能,幫助企業與組織以更敏捷、彈性的方式,照常舉行活動,並持續開拓嶄新機會。新增三大亮點功能包括:

  • 專業虛擬活動

Microsoft Teams 幾乎可以滿足各種類型的活動虛擬化需求。使用者可以利用 Microsoft Teams 自訂註冊頁面導流活動報名,並同步行事曆發會議通知;另外,也能設定與會者權限,主辦人有「主控制項」以管理廣大觀眾,像是停用出席者音訊、視訊和聊天功能,亦可使用「大廳控制項」以管理存取權。活動結束後,不只可以從會議詳細資料下載活動的錄製內容,並上傳至 Microsoft Stream 或者 OneDrive for Business 保存,Microsoft Teams 也提供簡單的會後報告,供主辦人參考並優化下一次的虛擬活動。

Photo Credit:Microsoft/從註冊報名的功能開始,即可使用 Microsoft Teams 開辦虛擬活動
  • 容納萬人的大型聚會

線上會議平台並不稀奇,不過往往功能陽春、同時上線人數有限,通常以 100 人為上限。Microsoft Teams 則可支援 1,000 人上線互動,且在僅供檢視(view-only)模式下,能容納最多 10,000 名與會者,非常適合線上大型聚會活動。

Photo Credit:Microsoft/Microsoft Teams 可支援多人大型聚會,在僅供檢視模式下可萬人與會
  • PowerPoint Live 簡報演示

Microsoft Teams 還有強大的簡報功能「PowerPoint Live」,可幫助簡報者在同一個會議視窗中,直接看到備忘錄、筆記註解、下一頁簡報、出席者影像、以及會議聊天室內容,在使用者展演簡報的同時,也完美場控。

Photo Credit:Microsoft/簡報者可以在一個頁面檢視簡報、下頁簡報、備忘筆記,以及與會者影像

註冊報名、開會平台都包辦!Microsoft Teams 的一站式解決方案

這裡細談一下 Microsoft Teams 作為一站式生產力溝通平台的特色。通常活動要臨時改為線上舉行時,許多人可能會利用線上表單或是網路售票平台,提供與會者註冊報名,然後另外再導流到其他 Webinar 平台,使得報名與活動頁本身可能不一致,主辦單位還要奔波於各種平台處理、統整報名人數等。

而 Microsoft Teams 的網路研討會功能的強大之處,就在於從註冊報名的頁面開始,就已經整合進虛擬活動的舉辦流程中,主辦者可以輕鬆設定註冊頁面、整合報名資訊,後續的網路研討會、會後追蹤等,都可以在熟悉的 Micorsoft Teams 介面完成。

用 Microsoft Teams 辦線上活動的三大適用場景

使用 Microsoft Teams,讓舉辦線上虛擬活動變簡單了。無論是對外的大型研討會,或是企業內部的小組會議,都可以藉由一站式平台控管參與人數、舉行活動、留存活動紀錄。且無論是 IT 技術、人資、行銷活動單位,都可以在 Microsoft Teams 同站搞定線上活動需求。Microsoft Teams 三種主要會議功能適用情境為:

  • 一般會議、遠距教學

常態的企業例行會議,像是教育訓練、董事會、小組會議等,都可以利用 Microsoft Teams 舉行,若會議中需要分組討論時,也提供虛擬分組討論室的功能。遠距教學也適用,教師可以利用簡報或是白板功能進行手寫的教學,也可以看到上課學生的即時影像,並點名學生回答問題並透過虛擬白板即時互動。

  • 網路研討會

企業法人說明會、媒體記者會、行銷活動等需要舉辦對外的活動,也可以利用 Microsoft Teams 作為一站式活動平台,完成報名註冊、管控參與人員、線上即時互動、會後追蹤等工作。

  • 大型線上活動

員工大會、尾牙、緊急公告,或學校畢業典禮等這類單向傳訊活動,也適用 Microsoft Teams。可容納 1,000 人線上即時互動、最多 10,000 人觀看會議的超寬限制,大型群聚無感染風險,方便又安全。

Photo Credit:Microsoft/教育工作者也可以善用 Microsoft Teams 進行遠距教學

既然實體活動停辦,不妨趁此機會了解更多關於線上會議、活動的操作方法,並避免線下群聚感染。利用 Microsoft Teams 創造凝聚的力量,透過科技讓生產力得以持續和延伸,讓人們的創意與智慧得以匯聚融合,相信我們很快就能度過疫情難關,並善用科技創造更多美好的事物。

網路研討會快速上手,立即下載 Microsoft Teams 使用手冊