構(gòu)建漂亮的應(yīng)用

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

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

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

使用開放web特性來提供漂亮的設(shè)計

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

Figure 4.1 -美不美由應(yīng)用的使用者說了算！

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

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

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

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

4.提示應(yīng)用當(dāng)前進(jìn)度的圖像和動畫。

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

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

有用的資源：

文章

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

網(wǎng)頁排版 – 來自于 Jason Santa Maria所寫的書的一章

SAFARI CSS 視覺效果指南

手冊

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

CSS3 關(guān)鍵幀動畫簡介

庫& 框架

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

TYPEKIT -簡單、符合標(biāo)準(zhǔn)的、容易獲取的、完全合法的web字體。

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

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

樣例

CSS3 PATTERNS GALLERY

使用全屏

Web頁面和web apps之間的一大區(qū)別就是它們?nèi)绾问褂每捎玫钠聊豢臻g。好的web apps和客戶端應(yīng)用一樣，會占滿可用的屏幕空間。

要有一個好的視覺設(shè)計，設(shè)計者應(yīng)該做到：

讓你的app看起來像是一個應(yīng)用，而不是一個有著左右邊框的網(wǎng)站。

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

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

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

Figure 4.2 -采用各種方式去引導(dǎo)你的用戶！

使用全屏的web apps包括：

GOJEE

NEW YORK TIMES WEB APP

WORD2

GITHUB ISSUES

60 MINUTES

Web apps不應(yīng)使用傳統(tǒng)的導(dǎo)航元素

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

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

讓使用變得簡單

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

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

1． 對于不想登錄或注冊的用戶提供應(yīng)用。

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

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

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

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

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

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

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

有用的資源：

庫 & 框架

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

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

樣例

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

標(biāo)簽： Web-App App �发指�

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