內文簡介:
首先你必須知道Patrick是一位設計師，同時也是網站開發者和作家，
更重要的是，他還是一位充滿熱忱的教育家。
正是這種熱忱讓他寫書、教課、持續不斷分享他的知識和想法。
也因此,依循手機網站做設計的書誕生了,他滿載各種設計創意與靈感，
為您解析手機網站設計的趨勢、風格，協助您創造出最佳的手機網站。
有時我們都忘了第一代 iPhone 其實在 2007 年才剛出現，而又直到 2011 年左右，網路界才真正擁抱手機網站。
當初由平板電腦暢銷而激起的行動裝置熱潮，看來其飽和度已達到臨界點，而手機網站地位變得舉足輕重。
本書就是他專為網站設計師打造的靈感之書。
接下來讓我們前往手機網站設計的世界...
CrazyKnowledge的觀書重點:
網站標誌的設計:
一旦決定做適應性設計,您可能就會忘我地投入處理網站的各種細節,而我們應該修改某些元素,例如:網站標誌
本來我認為網站標誌無論如何都該保持不變,
但以下的範例改變了我的想法,
當螢幕尺寸變動時,網站標誌是我們應該優先考慮修改的元素.
輪播效果的使用:
輪播效果的流行是因為它可以在同一塊區域中收納大量的內容,而且也很容易製作.
但是當適應性設計逐漸成為主流時,輪播效果卻花了點時間才追上腳步,
因為輪播效果在適應性網站上很難發揮.
還好,以下為介紹該輪播效果的實例
圖片的設計:
文字和圖片是網站中不可或缺的元素,
你必須在不同螢幕的尺寸中找出適合的圖片大小及方向.
第一個選擇是直接改變圖片的大小以符合版面的配置,當然設計師就必須依照各種設計尺寸來多做規劃
第二種選擇則是做一張才去邊緣也沒問題的圖片,這時在任何螢幕尺寸下,網站都使用同一張圖片,但限制要顯示出來的部分,
也就是不論平板還是手機上都是採用相同的圖片格式,但是在善加的規劃,也能呈現出不同的效果
最後呢就是按照不同的版面選擇不同的圖片,像是透過程式碼為桌機版網站提供某張圖片,平板電腦版提供另一張圖片,手機版則又是另一張圖片
地圖的設計:
在網頁上加入地圖很簡單.
然而若要自訂地圖外觀,或是讓地圖適應不同尺寸的螢幕,依然是個挑戰.
以下的範例不僅美觀實用,更能在各種螢幕尺寸上游刃有餘..
文字編排設計:
在行動網站上,往往會力求精簡以提升網頁的讀取速度,因此大多不會自訂字體.
以下範例包含:
你能試著將文字做成圖片或是透過字體變化,訪客可以很快地看出重點、裝飾性的字體也能使得既展現美觀就能達到最大的效果
半透明的設計:
從CSS3開始,製作半透明物件變得很簡單,因此也越來越普及了.
在手機網站中在操作上很容易讓使用者混淆,尤其是在網頁上加入或刪除東西的時候,
無論做了什麼,
如果能讓訪客明確請楚地知道,都是件好事
巨型照片的使用:
雖然大圖片可能拖慢網站速度,但這些設計整體上簡潔直接,讓網站速度仍保持效率.
在手機網站這種以簡潔風格稱王的地方,這些版面讓人感到獨特且耳目一新
而且大張的圖片還能帶出整個網站的強大又獨特的風格.
產品網站的設計:
從以下範例可以得知,
此類網站最大的目的就是展示產品,每個網站都將產品放在上方,確保第一個畫面就會出現
以及大部分的網站都以資訊為主,並沒有要讓訪客在這裡就下訂購買
這種狀況下,我們可以觀察這些網站中更重要的目的為何.
本書重點已結束
本封面引用自網路書城 ,其他書頁內文皆為本鋒智所有
請點擊此即可進入相簿觀看更多書籍重點
PR Practitioner (4)