悄悄的經過一個星期，又到了憂鬱的星期一，我是喵橘，今天我要講解設計框架所會遇到的常見問題。

網頁製作前預先準備的態度

網頁並不是直接程式就開始撰寫架構，需要依據自己的產業與公司需求來進行製作，所以，要先構想一個架構，但在設計前，要先注意什麼事情呢?

1. 智慧手機普及，使用者找尋資料的習慣改變。

到了現在，每一個民眾手上都會握著一支手機，會找尋自己想要看的資訊，所以，出現了低頭族的副文化，因此，網頁的設計有逐漸 APP 化，並且，使用者追求新鮮感，所以，網頁設計必須能製作時常能隨存取變換資訊的動態網頁，也保持設計的一致性，也就是通用性高的網頁設計。

2. 時常瀏覽相關網頁設計的模板，增加對排版以及顏色配置的靈敏度。

現在虛擬世界的變化快速，所以，網頁的製作也跟隨環境而瞬息萬變。所以，要養成關注軟體最新功能、設計以及標記語言是否有改進或新增，還有創新的想法以及突破性的創意，都是相當重要。以下推薦一些相關設計網頁模板。

• Dribbble

網址：https://dribbble.com

• Reeoo

網址：http://reeoo.com/

• S5-Style

網址：https://bm.s5-style.com/

• Pttrns

網址：https://www.pttrns.com/

• Wireframes

網址：http://wireframes.linowski.ca/page/2/

• Lovely UI

網址：https://www.lovelyui.com/

3. 時常到處收集相關的資訊。

身處廣大的網路業界，如何有效收集最新技術以及設計相關資訊是非常重要的一件事情。近年來，台灣會舉辦與設計師相關的研討活動，可以多去參加這一類型的活動，時常更新這一塊領域的想法，藉此打造出能迅速因應趨勢變化的環境。

網頁設計遇到的常見問題與建議

1. 按鈕尺寸大小需要注意

使用蘋果系列的手機或電腦使用者相當多人，還有手提與平板結合在一起的裝置出現。因此，按鈕尺寸大小就是一個相當重要的課題。也就是在設計按鈕的時候，就要考慮到觸控操作的部分，要保留適當的觸控區域，如果太小，觸控時將會被手指遮住，就無法得知按鈕的位置。所以，可觸碰的按鈕尺寸必須超過44像素。

2. 利用網格系統有計畫的編排版面

桌上排版系統(英語：Desktop publishing，簡稱：DTP)或平面設計慣用的排版系統，是將版面分割成格狀作為版型基準，讓看起來隨機的排版可以更整齊的技術。響應式網頁設計主要是採取12欄的網格，12欄顧名思義就是利用12個(直欄)分割區來設計版面，每一個欄位都是用 % 指定，一個分割區大概寬度是 1/12 = 8.3333% 。

3. 文字大小設定

網頁設計往往很容易受到作業系統和瀏覽器影響，能否支援各種環境是相當重要的。因此，文字大小的設計就相當重要，例如： Google 瀏覽器的最小字級需要10像素。所以，建議除非是相當特殊的狀況，就盡量文字小於10像素，不只難閱讀，也不是一個好的設計。

4. 注意裝置螢幕方向

操作智慧型手機或平板，每一個人使用習慣不同，會有直式或橫式看網頁的不同習慣，所以，在設計版面切記要思考到直式與橫式切換，是否有影響到版面排版與物件的偏移。解決方法分為三種，如下所顯示。

• 徹底禁止橫向操作方法。
• 固定寬度。
• 符合版面的響應式設計。

5. 買斷式授權(英語：Royalty-free)圖片，真的是免費?

像網路上許多漂亮的照片，都具有著作權，有一種授權方式是第一次使用時，會先支付小額的金額並遵守相關規定，即可免除之後的每次使用權，這就是所謂的買斷式授權，但並非完全免費的素材，使用前需要好好注意裡面撰寫的相關規則。

6. 字型的使用與設定

網頁的內容的字型選擇通常不會使用明體，這是因為在 Window ，消除鋸齒處理較弱、邊緣會呈鋸齒狀，導致顯示效果不夠美觀，所以，網頁設計通常都是選擇黑體系列來設計。還有隨著使用者的電話或隨行裝置會有支援上的差異，因此，網頁字型不會單單設定一種樣式，避免問題產生，會設定兩種以上的字型模式。

明天預告

​
今天講解 設計框架所會遇到的常見問題，因為偏向理論，文字稍微多，請各位多多見諒。明天會準備開始講解網頁設計的程式設計，謝謝大家耐心的觀看。
​