關於 bootstrap字型 ，我們在網路上蒐集到這些相關的討論、資訊與評價

工程師怎麼學視覺設計
美學相對於其他理論是較為抽象、主觀的
但並非沒有快速上手的方法
首先要先將問題簡化
修圖、色彩學、排版、UI、字型學先視為獨立理論
我們應專注在特定的主題上學習

### 設計的基準，整齊 ⭐⭐⭐⭐⭐
這是最簡單也是最難的
在一開始不要挑戰 "有特色" 的排版
而是依據不同的平台、載具、呈現環境
參考相依的設計文件規範來制定格線
然後將物件依據格線排列
Web 來說可以參考 Bootstrap
Android 可以參考 Material Design 等
觀念可參考：https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid

### 色彩的配置 ⭐⭐⭐⭐
在美感之前
色彩是用來吸引目光的
以網頁來說我們可以把用途歸類三個等級
1. 內容、不重要的訊息等 (黑、白、灰階)
2. 可操作的內容，主要的訊息、品牌色調 (主色)
3. 最重要的行為，例如購買 (強調色)
依據這個配置只能選擇兩個色彩
主色、強調色
主色用於大部分的情境
強調色只在唯一最重要的行為 (甚至不使用)
剩下都是黑、白、灰階
這是目前相當主流的配色方法
簡單、穩定、且訊息傳達力強
觀念可參考：https://material.io/guidelines/style/color.html#color-usability

### 字體配置 ⭐⭐⭐
字體可以表現出一句文字的
文化、語氣、重要性、氣質、個性等等
就如同我們看日本人與其他亞洲人
就算沒有透過語言
從行為舉止及穿著幾乎可以認定氣質上的差異

簡化說明
字體就類型上分為兩大類
- 無襯線字體 - 也稱為黑體
- 有襯線字體 - 也稱為明體、宋體
以識別性來說首推黑體
可以避免在不同系統上的呈現落差
中文可用：Noto Sans、蘋方、微軟正黑體
英文可用：Helvetica Neue, Roboto, Segoe UI, Ubuntu ...
(英文可用的非常多，以上只是常見的)

---
除了以上說明外
不外乎就是多看相關文件
以及實作練習
可參考設計文件：
- Material Design
- iOS Human Interface Guidelines
- Bootstrap
Bootstrap 嚴格來說不算是純設計文件，
但其中觀念非常值得參考

#每日一觀點 #15

［ Lyric Speaker 動態歌詞音響（本人暫譯）］

真的啊，有點點懷念歌詞本呢！

我也很喜歡kkbox的歌詞功能，可惜一直都不太完整，尤其是外國歌詞的部分。

如果有一套完整的資料庫能跟iTunes 整合就更完美了。

★東京觀察#008／
【以歌詞品嘗創意，用文字精彩空間】

Lyric Speaker是台能隨著歌曲，同步顯示歌詞的類音響裝置。利用智慧型手機中專屬APP加上藍芽的控制，Lyric Speaker會將歌詞用生動的文字動畫，呈現在裝置的透明螢幕裡，並自動挑選出適合那旋律的字型做變化。歌詞資料庫則是與日本APP公司プチリリ / PetitLyrics合作，目前已有100萬首以上的資料。

開發出Lyric Speaker的團隊SIX Inc是間全方位的創意公司。從品牌包裝的影像及平面廣告製作到新產品開發都能執行。擅長以渲染力極強的嶄新手法詮釋各類型專案而聞名於業界。合作過的廠商更是個個來頭不小如：JoJo的奇妙冒險、Google、ADIDAS、森大樓、TOYOTA、日清、寶礦力水得...等，多年來獲無數大獎肯定。
2014年世足賽時SIX為ADIDAS所製作的行銷廣告《賭上一切的時候到了》短片，在當時引起相當大的迴響，以巧妙的手法從商品帶出精神面訴求：團結一致堅定信心迎向勝利，值得看看→ https://www.youtube.com/watch?v=eELaIAjK16g。

每年於美國德克薩斯州所舉辦，世界最大的藝術交流嘉年華會 SXSW。共分為互動式媒體節、音樂節、電影節三大類。屬於互動式媒體節的SXSW Accelerator®是個致力挑選出具有商業價值的產品並幫助其上市的單位，歷年來的產品都成功激發了世界各地相關工作者的靈感。而今年SXSW Accelerator®的Best Bootstrap Company獎項，就是由帶著Lyric Speaker參賽的SIX所獲得，這是亞洲企業首次獲得這項榮譽。

SIX的創意總監 斉藤迅先生表示「以前聽歌時都會拿著歌詞本，邊聽歌邊看著歌詞，總覺得這才是品嘗音樂的標準動作，但現在這種機會似乎減少了許多。因此我們開發出Lyric Speaker的目標，就是再現最初那品嘗音樂的使用經驗」。而這種經驗跟直接觀賞MV是有些許不同的。因為只有音樂和文字少了具體的影像，反而給聽眾留下大片的想像空間，自由詮釋作曲者的感性及作詞者的思路。

正如現代主義建築大師Ludwig Mies van der Rohe的名言「少即是多（Less is more）」使用Lyric Speaker後將可讓「歌」的影響力完全發揮，人們將能更方便的品嘗到音樂醍醐味。

最新消息請見官網↓
http://lyric-speaker.com/

30 個讓你的網站看起來更優的點子

做網站的朋友，每天大多竭盡心思想著如何把網站變得更好看，但又不致於讓伺服器負擔太重。這裡有一篇「30 個立即可用的網站好點子」給大家參考。包含：

1. 使用者體驗測試
2. 適度的留白
3. 適當的字體
4. 以 CSS3 增加陰影，營造層次感
5. 添加背景紋理與樣板
6. 用 CSS3 替背景披上漸層色
7. 善用 Twitter 的 Bootstrap UI 函式庫
8. 善用 HTML5 Kickstart UI 函式庫
9. 使用 jQuery UI
10. 使用精美的全螢幕背景圖片
11. 以「圖示」（Icon）來代替單調的「選單（Menu）」
12. 常常更換整個網站的基礎色調
13. 盡可能將老舊瀏覽器的支援考慮在內
14. 善用搶眼的特殊字體營造網頁風格
15. 支援「社群分享」
16. 開放讀者討論
17. 較寬的「頁腳」設計（目前流行）
18. 使用相對大小來決定照片大小（如：以「100%」取代「180px」）
19. 提高「選單」的操作性（如：增加「首頁 > 產品 > 相機 > CM-100」這類超連結在頂端）
20. 為「照片」與「影片」以 HTML 屬性標籤添加關鍵字，方便搜尋引擎尋找
21. 別把選單項目埋得太深，讓使用者找不到
22. 增設「回到頁面頂部」（Back to Top）連結
23. 記得以 CSS 設定 與

 標籤，使之易讀明顯
24. 記得增加圖片的 width 與 height 屬性
25. 以 alertify.js 這類函式庫，製作彈出式視窗
26. 版面要能適應「桌機」或「手機」等不同螢幕大小
27. 友站連結
28. 善用看起來很像圖示的字型
29. 圖片框加上陰影，營造層次感
30. 盡量以 CSS 代替 HTML 標籤排版，以利輕鬆更換版面

原文連結如下：
http://www.hongkiat.com/blog/ideas-to-nicer-websites/