構建漂亮的應用

一個web app的視覺設計不僅要看起來美，也要用起來讓人覺得方便

你的應用的美學設計將直接影響人們使用應用時的易用性。一個有著豐富視覺感受的應用既能讓人用起來愉快，又不會分散人的注意力。它注重美觀，使用類似于native apps設計模式的同時又不失易用性。

美觀的圖片、顏色、字體和速度、易讀性、易用性之間需要達到均衡。用戶和文化背景也非常重要，因為在不同文化中，顏色、布局以及文字選擇可能有不同含義。應用的視覺設計不僅要讓用戶感覺愉悅，也要讓他們覺得使用方便。

使用開放web特性來提供漂亮的設計

人們期待看到的web apps是與客戶端或者mobile apps有著同樣的視覺感受，而不是和平淡的web內容一樣。

Figure 4.1 -美不美由應用的使用者說了算！

開發(fā)者可以通過使用以下技術來創(chuàng)造豐富的沉浸體驗：

1.具有交互性和用戶相關性的實時繪圖界面。

2.加強可讀性的字體和排版特性。

3.增加美觀的紋理、漸變和變形，又要保證不會讓人分心。

4.提示應用當前進度的圖像和動畫。

5.高質量高分辨率的圖片，無論用戶如何調整瀏覽器窗口，這些圖片都不失美觀。

6.在應用中使用現(xiàn)實世界中也有的圖像、圖示和圖標，增加熟悉感和現(xiàn)實感，讓用戶容易將現(xiàn)實生活中的經驗轉移到應用中去。

有用的資源：

文章

更有意義的字體 –來自于 Tim Brown所寫的書的一掌

網頁排版 – 來自于 Jason Santa Maria所寫的書的一章

SAFARI CSS 視覺效果指南

手冊

通過FONT-FACE快速實現(xiàn)WEBFONTS指南

CSS3 關鍵幀動畫簡介

庫& 框架

GOOGLE WEB FONTS API -Google Web Fonts讓每個人都能很快制作web fonts，包括專業(yè)設計人員和開發(fā)人員。我們相信在制作好網站的道路上不應該有任何障礙。

TYPEKIT -簡單、符合標準的、容易獲取的、完全合法的web字體。

CSS3 GRADIENT GENERATOR - 展現(xiàn)了CSS gradients的強大力量。

ULTIMATE CSS GRADIENT GENERATOR -來自于 ColorZilla 的一個強有力的類似于Photoshop CSS gradient 編輯器。

樣例

CSS3 PATTERNS GALLERY

使用全屏

Web頁面和web apps之間的一大區(qū)別就是它們如何使用可用的屏幕空間。好的web apps和客戶端應用一樣，會占滿可用的屏幕空間。

要有一個好的視覺設計，設計者應該做到：

讓你的app看起來像是一個應用，而不是一個有著左右邊框的網站。

將可用的屏幕空間占滿。因為你不能確定設備具體尺寸，那么讓內容可以根據屏幕大小進行調整，支持屏幕窗口大小調整，并且在需要的時候使用滾動。

避免固定寬度的布局，因為這樣的布局的左右邊框會讓用戶聯(lián)想起web頁面。

使用Full Screen API在合適的時候提供一個全屏界面。

Figure 4.2 -采用各種方式去引導你的用戶！

使用全屏的web apps包括：

GOJEE

NEW YORK TIMES WEB APP

WORD2

GITHUB ISSUES

60 MINUTES

Web apps不應使用傳統(tǒng)的導航元素

Web apps不應以來傳統(tǒng)的瀏覽器導航元素，比如后退、前進、刷新按鈕的等。它們也不應該使用傳統(tǒng)的頁面內導航元素，比如左側或者頂端的向下鏈接。

盡管web apps不使用這些傳統(tǒng)的導航元素，它們可能使用地址欄以保存或共享狀態(tài)，使用向前或向后按鈕在不同狀態(tài)間切換。用戶不再使用鏈接在不同頁面間切換，而是使用按鈕來改變當前內容的狀態(tài)。。

讓使用變得簡單

人們在面對復雜冗長的注冊過程時往往會望而卻步。如果你的應用需要用戶登錄，那么，這個過程需要非常簡單，只需要最少的信息就可以了。如果可能的話，讓用戶可以通過一個已有的OpenID來注冊。在可以少管理一些賬戶和密碼的時候，用戶是非常開心的。

為了減少用戶被嚇走的幾率，讓注冊登錄過程更為簡單，可以按如下方式去做：

1． 對于不想登錄或注冊的用戶提供應用。

2． 對于選擇注冊登錄的用戶進行一些獎勵，比如附加功能或是更為完整的服務。

3． 支持通過OpenID來注冊，比如Google賬戶，以減少用戶需要記憶的用戶名和密碼。

4． 如果你已經有了一個登錄系統(tǒng)，考慮將其與OpenID建立關聯(lián)。

在這些方面做的很好的WEB APPS ：

ETHERPAD - EtherPad讓用戶可以立刻開始使用應用，并且只在用戶想要保存的時候才要去他們注冊。

PICNIK -讓登陸門檻很低，用戶可以不用登陸或注冊就能編輯并保存照片。

Figure 4.3 – 讓人們在初次嘗試時就覺得簡單！

有用的資源：

庫 & 框架

GOOGLE IDENTITY TOOLKIT （GITKIT） 是一個免費工具包，網站經營者可以使用它讓用戶通過郵件地址和密碼登陸，并通過聯(lián)合登陸替換密碼。

JANRAIN LOGIN HELPER 幫助網站實現(xiàn)基于電子郵件的注冊，通過內聯(lián)電子郵件驗證幫助注冊轉換。

樣例

OPENID WIKI GALLERY – 一個使用用戶已有賬戶的創(chuàng)新性的登陸注冊應用。

標簽： Web-App App �发指�

版權申明：本站文章部分自網絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。