Google Web App开发指南第四章：构建优秀的Web Apps
2019-04-03 来源：webapptrend.com
构建漂亮的应用
一个web app的视觉设计不仅要看起来美，也要用起来让人觉得方便
你的应用的美学设计将直接影响人们使用应用时的易用性。一个有着丰富视觉感受的应用既能让人用起来愉快，又不会分散人的注意力。它注重美观，使用类似于native apps设计模式的同时又不失易用性。
美观的图片、颜色、字体和速度、易读性、易用性之间需要达到均衡。用户和文化背景也非常重要，因为在不同文化中，颜色、布局以及文字选择可能有不同含义。应用的视觉设计不仅要让用户感觉愉悦，也要让他们觉得使用方便。
使用开放web特性来提供漂亮的设计
人们期待看到的web apps是与客户端或者mobile apps有着同样的视觉感受，而不是和平淡的web内容一样。
Figure 4.1 -美不美由应用的使用者说了算！
开发者可以通过使用以下技术来创造丰富的沉浸体验：
1.具有交互性和用户相关性的实时绘图界面。
2.加强可读性的字体和排版特性。
3.增加美观的纹理、渐变和变形，又要保证不会让人分心。
4.提示应用当前进度的图像和动画。
5.高质量高分辨率的图片，无论用户如何调整浏览器窗口，这些图片都不失美观。
6.在应用中使用现实世界中也有的图像、图示和图标，增加熟悉感和现实感，让用户容易将现实生活中的经验转移到应用中去。
有用的资源：
文章
更有意义的字体 –来自于 Tim Brown所写的书的一掌
网页排版 – 来自于 Jason Santa Maria所写的书的一章
SAFARI CSS 视觉效果指南
手册
通过FONT-FACE快速实现WEBFONTS指南
CSS3 关键帧动画简介
库& 框架
GOOGLE WEB FONTS API -Google Web Fonts让每个人都能很快制作web fonts，包括专业设计人员和开发人员。我们相信在制作好网站的道路上不应该有任何障碍。
TYPEKIT -简单、符合标准的、容易获取的、完全合法的web字体。
CSS3 GRADIENT GENERATOR - 展现了CSS gradients的强大力量。
ULTIMATE CSS GRADIENT GENERATOR -来自于 ColorZilla 的一个强有力的类似于Photoshop CSS gradient 编辑器。
样例
CSS3 PATTERNS GALLERY
使用全屏
Web页面和web apps之间的一大区别就是它们如何使用可用的屏幕空间。好的web apps和客户端应用一样，会占满可用的屏幕空间。
要有一个好的视觉设计，设计者应该做到：
让你的app看起来像是一个应用，而不是一个有着左右边框的网站。
将可用的屏幕空间占满。因为你不能确定设备具体尺寸，那么让内容可以根据屏幕大小进行调整，支持屏幕窗口大小调整，并且在需要的时候使用滚动。
避免固定宽度的布局，因为这样的布局的左右边框会让用户联想起web页面。
使用Full Screen API在合适的时候提供一个全屏界面。
Figure 4.2 -采用各种方式去引导你的用户！
使用全屏的web apps包括：
GOJEE
NEW YORK TIMES WEB APP
WORD2
GITHUB ISSUES
60 MINUTES
Web apps不应使用传统的导航元素
Web apps不应以来传统的浏览器导航元素，比如后退、前进、刷新按钮的等。它们也不应该使用传统的页面内导航元素，比如左侧或者顶端的向下链接。
尽管web apps不使用这些传统的导航元素，它们可能使用地址栏以保存或共享状态，使用向前或向后按钮在不同状态间切换。用户不再使用链接在不同页面间切换，而是使用按钮来改变当前内容的状态。。
让使用变得简单
人们在面对复杂冗长的注册过程时往往会望而却步。如果你的应用需要用户登录，那么，这个过程需要非常简单，只需要最少的信息就可以了。如果可能的话，让用户可以通过一个已有的OpenID来注册。在可以少管理一些账户和密码的时候，用户是非常开心的。
为了减少用户被吓走的几率，让注册登录过程更为简单，可以按如下方式去做：
1． 对于不想登录或注册的用户提供应用。
2． 对于选择注册登录的用户进行一些奖励，比如附加功能或是更为完整的服务。
3． 支持通过OpenID来注册，比如Google账户，以减少用户需要记忆的用户名和密码。
4． 如果你已经有了一个登录系统，考虑将其与OpenID建立关联。
在这些方面做的很好的WEB APPS ：
ETHERPAD - EtherPad让用户可以立刻开始使用应用，并且只在用户想要保存的时候才要去他们注册。
PICNIK -让登陆门槛很低，用户可以不用登陆或注册就能编辑并保存照片。
Figure 4.3 – 让人们在初次尝试时就觉得简单！
有用的资源：
库 & 框架
GOOGLE IDENTITY TOOLKIT （GITKIT） 是一个免费工具包，网站经营者可以使用它让用户通过邮件地址和密码登陆，并通过联合登陆替换密码。
JANRAIN LOGIN HELPER 帮助网站实现基于电子邮件的注册，通过内联电子邮件验证帮助注册转换。
样例
OPENID WIKI GALLERY – 一个使用用户已有账户的创新性的登陆注册应用。
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
下一篇:谈产品经理的转行
