為什麼很多網站 LOGO 都是在左上角，旁邊擺一排選單呢？在軟體中開啟了一個新的 Artboard 該怎麼開始排列介面呢？也許我們可以試著從理性的使用者瀏覽習慣路徑開始，不論是設計 Header, Menu 或 Navigation，先知道最基本的設計道理後，就可以靈活運用創造出嶄新的介面體驗。
這篇文章按照網頁發展順序列出三種網頁瀏覽路徑，適合還沒有 UI 動線設計頭緒的朋友閱讀。
古騰堡排列
在網頁誕生早期，超文本標記語言(Hyper Text Markup Language) 是所有網站的基礎，基本上就是用文字輸入去對網頁進行視覺化(標題、顏色等)與功能性(超連結、圖片等)標記。
最簡單的網頁 html 檔案像是這樣：
<html>
<body>
<h1>Hello World !</h1>
<p>Website's content</p>
</body>
</html>因此最簡單的網頁是那種滿滿是文字的頁面，早期網站的閱覽習慣就跟看實體報紙、雜誌一樣，是一行接著一行進行閱讀。
那麼使用者在閱覽的習慣就會是這樣子的：
為了紀念第一位發明活字印刷術的歐洲人 Johannes Gutenberg，這樣子的排列方式叫做古騰堡排列(Gutenberg Diagram)，這邊特別提的原因是之後如果在相關 UI/UX 文章中看到可以比較快理解。
小秘訣：如果是網頁文字多或設計 blog post 樣式時，可優先參考此古騰堡排列模式。
Z 字動線
那麼在網頁從樸素的文字組成慢慢發展豐富後，各種視覺組合演變而來，網頁漸漸地脫離只有純文字，而變成一個個由資訊組成的區塊(block)，那人們在看這些網頁都時候，就會習慣先由左到右、再由上到下的閱讀方法。
此手法常見於現代 Landing page 一頁式網頁的設計手法，透過 Z 字型去排列資訊順序，使用者的閱讀習慣會變成快速 Z 字掃瞄去找到有興趣或需要的資訊進行閱讀。
小秘訣：將水平 Gird 排成 1/2 + 1/2 或 1/3 + 1/3 + 1/3 依此類推，再做 UI設計，會更方便達到 Z 字閱覽區塊，適用於大多數的一頁式網頁。
F 式佈局
英文是 F-Shaped Pattern，最早來自 NN/g 的眼動儀研究 ，為目前最廣泛作為網頁佈局判定的依據。透過追蹤使用者的眼球，標註出紅色的部分是使用者感興趣的局部，再來是黃色，不感興趣的部分則是藍色，沒有顏色代表被忽略的邊緣內容。
研究發現軌跡順序呈現 F 型，從左上角 (通常是放公司LOGO)朝水平方向瀏覽，然後回到左側垂直進行掃讀，找到有興趣的段落、然後再水平朝右移動；接著再回到左側垂直往下後，又水平移動閱讀，但會隨著耐心與資訊消化而遞減閱讀量。
現在網站普及且資訊量多，使用者會快速進行掃描以便更快找到該有內容，因此 F-Shaped Pattern 的 F 則也是 Fast 快速的意思。
小秘訣：在絕大多數的國家或語言習慣中，F式佈局是相當符合閱讀習慣的，我們可以透過這樣的設計手法製作更有層次感的網頁，方便使用者瀏覽獲得資訊。
網頁發展至今，F 式佈局這個遵循人類習慣與設計趨勢的做法，能幫助你提升介面資訊效率與強化結構，以下僅列幾點在設計介面時實務上可能用到的幾種情況，之後碰上時可以運用到這篇文章所提及之重點。
1、按照重點優先度排列
這也是為什麼很常 LOGO 都會放在左上角，以便使用者能快速找到公司識別，不論是記憶或回首頁都很直觀；再來循著 F 軌跡的是選單，放了這個網頁展示的所有內容大綱。
再往下則常是這間公司的 slogan 標語，或是一句話呈現產品的定義；再往下則是輔助標題或補充內容，最後來個 Call To Action 重新讓使用者聚焦在此。
2、可使用左右 F 式
有時候不一定只能夠按照 F 直直排下來，適當的跳脫框架則能夠使網頁變得更好啃，比如說若將網頁垂直拆成兩半，可以在左側安排 F 動線後，下面再一排同樣結構但左右互換的排版，則可以延續閱讀順序，同時畫面上視覺也能更平衡。
3、善用不容易被發現的邊緣地帶
除了強調 F 軌跡內的重點訊息之外，也可以善用可能比較不被使用者發現的區塊。當網頁中放太多東西的時候，也許會產生疲乏、甚至明明知道是重點卻因為拖延症發作而先放一邊！這時候會先看旁邊比較沒那麼重要的資訊，這時候塞一點廣告、放文章目錄，或是擺一些最新消息或特價訊息等，連使用者暫時喘息的留白都要加入設計考量。
講完使用者眼球動線原理後，接下來我們會照順序接著演練介面設計時的更多環節，請直接觀看《Adobe Xd設計實務｜成為UI設計師的8項核心技能》。
我是 Riven ，如果這篇內容還算受用的話，歡迎幫我在旁邊拍手處給予 1~50下的鼓勵，更多 UI/UX設計相關文章可以發摟我的 Medium。
有任何問題或交流討論，都可以透過我的 Facebook 臉書。我們下次見囉 😉
