第二種瀏覽方式

由於上述第一種只是初步的樣式，所以經過 CSS、HTML5、Javascript 的加工 之後，我們有著更棒的使用者介面，下面我們一一呈現。

最上方系統會有幾個圖示，分別是 Help、Refresh、Logout，而這些都是系統 的基本功能，方便使用者使用這項系統。

來源分類

系統會將所收集到的來源做分類，若要做加入更改，只要點擊畫面中的 Add、

manage 即可。

標題呈現

而中間的部分是標題的呈現，每個來源的文章，都會有他自己所謂的標題，

為了方便使用者知道他所在瀏覽的內容有哪寫，方便做個總攬，我們也列出了標 題的欄位，而其中也有著 Reload 的功能讓使用者可以自己控制更新的時間。

標題的的列出，除了標題以外，還有來源網站，以及發布的時間。

數位內容畫面呈現

在這個部分，就是本系統最重點的部分，本體內容的呈現，這麼有著許多小 細節，我們一一呈現。

字體、排版、倒影、邊框

圖表 5-17 第二種風格畫面

上面可以看到我們在標題用了粗體字，下面有著發佈時間、作者、發 佈網站，店選之後會直接連到來源網站。

我們也可以很清楚看到，圖片有著倒影的效果。

圖表 5-18 第二種風格畫面 2 系統會調整圖片的大小，讓畫面變得非常美觀。

圖表 5-19 第二種風格畫面 3 圖片我們加上了邊框，加上倒影的功能，讓他更為美觀。

圖表 5-20 文繞圖

我們也更改了字體，行距，以及邊框的距離，還有讓畫面有著文繞圖的效果。

分享及稍後閱讀

Read later

這邊我們來示範稍後閱讀的流程

當我們點選了 Read later 之後，系統便會將這篇文章載到有裝載 instapaper 的 裝置中。

圖表 5-21 instapaper 展示

假設我們對這篇文章有興趣，那們我們點選這篇下面的 Read Later。

圖表 5-22 instapaper 展示 2

如圖所示，他直接就傳至 iphone 的裝置中，而這是可以離線瀏覽的。

該篇文章在 Iphone 上看起來的子會是這樣。

Press it

接下來就是分享的部分，如果你看到一篇很喜歡的文章想要在上面做標記，

或是加入自己的心得，那麼這個 press it 的功能就是讓使用者在分享的同時還可 以寫心得到自己的部落格上，而發佈的文章是連帶圖片的。

圖表 5-23 press it 展示

假設看到一篇喜愛的文章，使用者點選下方的 press it 之後便會跳到發佈的畫 面。

圖表 5-24 press it 展示 2

如圖，我們會跳到發佈的畫面，我們可以看到這篇分享的文章是連帶圖片的，完全 沒有更改的讓使用者分享，也可以在上面加入自己的心得。

圖表 5-25 press it 展示 3 如圖所示，就會發佈到屬於自己的 Word press。

螢幕畫面拖動

由於 IPAD 的螢幕大小與電腦有所差異，為了讓使用者有更好的閱讀體驗，我們在 不同設備上有著些微不同的呈現。

圖表 5-26 畫面拖動展示

這是在電腦上畫面的呈現。即使左邊的標題及來源列很寬，還是可以很清楚的看 到右邊的內容。

圖表 5-27 移除功能列畫面

這是在 IPAD 上面呈現的畫面，使用者可以自行決定要不要拿掉這些來

源列或是

標題列，這樣子在 ipad 上面也可以有很好的閱讀體驗。

鍵盤快速鍵

系統在無障礙方面也做了一點些功能，如使用者可能不方便使用滑鼠，所以 我們設計了鍵盤的快速鍵，一旦使用者進入了這個系統，只要按 J、K 兩個按鈕，

就可以做上下頁的動作，而其實，我們真的只需要這兩個動作就可以了。

圖表 5-28 鍵盤快速鍵