
有三个元素是打造优秀的移动用户体验不可或缺的:环境,信息架构,以及视觉设计。这一章重点关注视觉设计部分。视觉设计 是你的所有设计的一个最直观的表现;它关系到用户对你的应用的第一印象。好的设计能够提升用户对你的网站或是应用程序的期望值;而坏的设计将导致用户降低 对你的服务的期待。
用 户的期望值将转化为经济效益和品牌信用。在移动领域,目录往往是“免费”的(但用户仍需为具体的数据付费),如果你在目录中呈现的内容不够丰富,那么用户 通常不会有太高的期望值。如果网站结构混乱不堪,并且下载速度又特别慢的话,用户的期望值只会进一步下降。在应用下载领域,apps设计更加健壮,用户购 买app时通常并不完全了解自己下载的应用。比如,他们可能只是看了一下你的应用程序或是游戏的截图就做出了决定。但如果你的设计无法让他们有很高的期 待,那么你的工作可能从此就石沉大海了。你的设计,将给用户留下第一印象,这也会直接决定用户是会在你的产品上花费5秒钟,5分钟,还是5个小时的时间。
这 给移动设计提出了一个最大的挑战:创造性。创造性并不单单是设计师有新颖的想法就足够了的。有些设备可能根本就无法支持你的复杂设计;比如在许多低端的手 机上,所谓的移动web体验可能就是一些连接而已。但是每个设备都有针对这个设备的最佳体验;这取决于你如何充分利用应用程序的运行环境和载体了。
电 脑上有一个称作“最小公分母”的策略:为了让产品能够在各种平台上运行,你让你的产品以最通用的组件在各个平台上执行(参见FIG8-1)。电脑上的平台 只有有限的几种,所以这个策略只是一个不错的想法,但是在移动开发环境中,各种不同的设备成百上千,所以这一策略显得非常有必要。
建 议可以先按照这种“最小公分母”的方式开始你的移动设计。作为一个设计师,你需要问自己“如何将我要表达的内容在尽可能多的设备上以可视化的方式呈现出 来?”从最基础的设计开始,确保能够得到各种设备的支持。只有当你确认设备平台能够支持你要新增的功能时,再往你的设计中加入更加丰富的内容。如果你的设 计太过复杂,也不考虑平台是否能够支撑的话,那么注定你的设计恐怕将无法成功。
文章来源: Mobile design
发表评论
-
响应式Web设计资源整理
2012-03-02 22:50 856这篇文章是对以往发表在Smashing Magazine上关于 ... -
投身移动开发必须知道的20件事
2012-03-01 23:42 773移动开发需要具体的设计考虑。这个所指的范围非常广,可以从“ ... -
聘用NodeJS开发者的六个建议
2012-03-01 23:41 868假设你正想聘用一名Node ... -
[摘要]Vision Mobile发布2012跨平台开发工具报告 PhoneGap最受欢迎
2012-03-01 23:41 922国外知名调查分析机构V ... -
Facebook发力Mobile Web 推出支付和测试工具
2012-02-28 23:49 831Facebook入场了,在MWC大 ... -
【数据】《移动优先》作者:为什么移动如此重要?
2012-02-28 23:48 954三 年前,前雅虎用户体验总监Luke Wrobl ... -
重新审视Mobile Web
2012-02-28 23:48 712作者简介:Byron是一个 ... -
WebAppTrend周刊:Google Chrome工程师推出Web App开发指南
2012-02-26 00:52 1231从本周起,WebAppTrend将精选一周内(2月20日~2月 ... -
Google Web App开发指南第四章:构建优秀的Web Apps
2012-02-24 23:13 1287构建漂亮的应用 一个web app 的视觉设计不仅 ... -
零基础学习Sencha Touch(资料和教程集合)
2012-02-23 00:41 1294译者注:本篇文章为开发者提供了零基础使用Sencha To ... -
Google Web Apps开发指南之项目样例(上)
2012-02-23 00:41 950如果缺少项目案例部 ... -
如何一步一步制作出高品质Infographic?
2012-02-20 21:23 990译者注:Infographic就 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:10 891在计算机的发展过程中 ... -
海豚浏览器CTO刘铁锋:Mobile Web App发展现状及展望
2012-02-18 00:09 0在计算机的发展过程中 ... -
新手必读:PhoneGap入门六大问题
2012-02-18 00:08 1038很多PhoneGap新手总是需要一些基础问题的解答,Ado ... -
Google Web App开发指南第一章:什么是Web Apps?
2012-02-18 00:07 936很多人向我问起学习HTML5技术的权威入门资料,我总是毫不 ... -
Lanyrd是如何应用HTML5创建出优秀的移动Web应用的
2012-02-15 00:28 660当很多人都在等待观望 ... -
Appcelerator收购Cocoafish,旨在为Titanium平台提供即时移动云服务
2012-02-15 00:17 927译者注:Appcelerator是 ... -
Android官方文档之Web Apps最佳实践
2012-02-15 00:14 700为移动设备开发web页面或者web应用与为桌面浏览器开发web ... -
Android官方文档之Web Apps调试
2012-02-15 00:13 924概览 你可以使用控制台的Javascript方法调试你的w ...
相关推荐
在现代Web应用开发中,创建一个用户友好的界面至关重要,特别是在移动设备上。...通过精心设计的滑动菜单和页面跳转效果,它为用户提供了直观且流畅的导航体验,同时也展示了现代Web开发中的最佳实践。
"SmartAdmin - Responsive WebApp 4.5.1" 是一款高级且功能丰富的响应式Web应用程序模板,专为开发高效、现代和用户友好的管理界面而设计。该模板以其灵活性和适应性著称,能够自动调整布局以适应各种设备,包括桌面...
初学者可以从这些源码中学习到如何组织项目结构,如何编写整洁的代码,以及如何应用最佳实践来构建Web应用。 标签“.NET web app”可能是一个错误,因为它与提供的Java WebApp主题不符。.NET Web App通常指的是使用...
HTML5移动开发是WebAPP开发的重要组成部分,它为开发者提供了更强大的功能和更好的用户体验。本文将深入探讨HTML5移动开发的基础知识,...在实践中,不断探索和学习新的技术和最佳实践,是提升WebAPP开发技能的关键。
6. **最佳实践**: - 使用异步调用处理支付请求,以避免阻塞用户界面。 - 保持前端和后端的良好通信,确保订单信息的一致性。 - 对用户进行明确的支付指引,提升用户体验。 - 定期更新支付插件,确保安全性及...
例如,"百度地图API最佳实践_贾铮.pdf"和"百度地图API开发指南.pdf"可能详细讲解了如何使用百度地图API,包括获取API密钥、加载地图、添加标记、设置事件监听器等操作,以及在实际项目中的最佳实践和注意事项。...
原生WebApp、HybridApp、H5应用和跨平台应用如React Native、Flutter等不断涌现,它们在性能、体验、开发成本等方面各有优劣。例如,原生应用提供最佳的性能和体验,但开发和发布的成本相对较高。而H5应用则具有最低...
标题和描述中提到的“移动端webapp(伪APP)”是指一种通过在浏览器中封装Web应用的方式,模拟原生移动应用程序的用户体验。这种方式通常利用HTML、CSS和JavaScript等Web技术构建,无需通过应用商店下载安装,用户只...
Webapp模板是专门为移动设备和桌面浏览器设计的Web应用程序界面模板。它们通常包含一组预设计的HTML、CSS和JavaScript文件,旨在提供一个快速启动的框架,帮助开发者构建现代、响应式且用户友好的Web应用。在给定的...
6. **易用性和可访问性**:Bootstrap遵循最佳实践,确保其组件易于使用和理解,同时考虑到网页的可访问性,这对于电商网站至关重要,因为它们需要满足广泛的用户需求。 7. **性能优化**:Bootstrap对代码进行了优化...
而“mobile”一词意味着该应用考虑到了在智能手机和平板电脑等移动设备上的用户体验,可能采用了响应式设计或者原生移动应用的特性,如触摸事件和离线存储。 【标签】:“angular” 作为标签,“angular”进一步...
Web技术日新月异,开发者需要不断学习新技术和最佳实践,如WebAssembly引入原生代码执行,Web Components促进组件化开发,以及Service Worker实现离线缓存等。 总结,“webapp.zip”所代表的Web应用程序开发是一个...
3. **文档**:详细说明如何安装、配置以及使用`logforWebViewwebApp`,可能包括API参考和最佳实践。 4. **测试**:测试用例,确保工具的正确性和稳定性。 5. **许可证文件**:定义了软件的使用权限和条件。 为了...
了解这两者的语法和最佳实践是制作WebAPP的前提。 2. **响应式设计**:为了适应不同设备的屏幕尺寸,WebAPP需要采用响应式设计。通过媒体查询(Media Queries)和弹性布局(Flexbox或Grid)等技术,可以确保WebAPP...
通过这些案例,开发者不仅可以学习到实际的代码实现,还能了解到当前流行的设计趋势和最佳实践,如扁平化设计、渐进增强、无障碍访问等。 4. **源码结构**: 通常,登录注册页面源码会包含HTML文件(包含页面结构...
6. **RESTful API**:Webapp通常通过HTTP协议与服务器进行通信,REST(Representational State Transfer)是一种设计API的最佳实践,使数据交换更加简洁、直观。 7. **WebSocket**:提供全双工通信通道,使得实时性...
7. **响应式设计**:适应不同设备的屏幕大小,确保在桌面、平板和移动设备上都有良好的用户体验。 **开发环境准备:** 由于ArcGIS WebApp JS依赖于Node.js,因此首先需要在开发机器上安装Node.js。安装完成后,还...
项目文件名为“vue-ts-daily-master”,可能代表这是一个关于每日任务管理或者资讯阅读的WebApp实例,使用了Vue.js、TypeScript,并且遵循了PWA的最佳实践。项目结构可能包含src目录,用于存放源代码,包括Vue组件、...
通过“从菜鸟到高手”的项目化教学模式,学生可以更深入地理解和掌握嵌入式系统的设计与开发,提高实践能力。 在云时代的软件开发中,争论焦点在于App与WebApp的选择。App提供离线功能和更好的用户体验,但需要下载...