`
WebAppTrend
  • 浏览: 55440 次
社区版块
存档分类
最新评论

WebApp最佳实践用户体验篇之移动设计

阅读更多

有三个元素是打造优秀的移动用户体验不可或缺的:环境,信息架构,以及视觉设计。这一章重点关注视觉设计部分。视觉设计 是你的所有设计的一个最直观的表现;它关系到用户对你的应用的第一印象。好的设计能够提升用户对你的网站或是应用程序的期望值;而坏的设计将导致用户降低 对你的服务的期待。

用 户的期望值将转化为经济效益和品牌信用。在移动领域,目录往往是“免费”的(但用户仍需为具体的数据付费),如果你在目录中呈现的内容不够丰富,那么用户 通常不会有太高的期望值。如果网站结构混乱不堪,并且下载速度又特别慢的话,用户的期望值只会进一步下降。在应用下载领域,apps设计更加健壮,用户购 买app时通常并不完全了解自己下载的应用。比如,他们可能只是看了一下你的应用程序或是游戏的截图就做出了决定。但如果你的设计无法让他们有很高的期 待,那么你的工作可能从此就石沉大海了。你的设计,将给用户留下第一印象,这也会直接决定用户是会在你的产品上花费5秒钟,5分钟,还是5个小时的时间。

这 给移动设计提出了一个最大的挑战:创造性。创造性并不单单是设计师有新颖的想法就足够了的。有些设备可能根本就无法支持你的复杂设计;比如在许多低端的手 机上,所谓的移动web体验可能就是一些连接而已。但是每个设备都有针对这个设备的最佳体验;这取决于你如何充分利用应用程序的运行环境和载体了。

电 脑上有一个称作“最小公分母”的策略:为了让产品能够在各种平台上运行,你让你的产品以最通用的组件在各个平台上执行(参见FIG8-1)。电脑上的平台 只有有限的几种,所以这个策略只是一个不错的想法,但是在移动开发环境中,各种不同的设备成百上千,所以这一策略显得非常有必要。

建 议可以先按照这种“最小公分母”的方式开始你的移动设计。作为一个设计师,你需要问自己“如何将我要表达的内容在尽可能多的设备上以可视化的方式呈现出 来?”从最基础的设计开始,确保能够得到各种设备的支持。只有当你确认设备平台能够支持你要新增的功能时,再往你的设计中加入更加丰富的内容。如果你的设 计太过复杂,也不考虑平台是否能够支撑的话,那么注定你的设计恐怕将无法成功。

文章来源: Mobile design

 

译文来源:http://www.webapptrend.com/
 WebAppTrend是一个独立的技术博客,关注Web App前瞻和实践,以及智能浏览器发展 

请大家在关注ITeye的同时,关注我们的新浪微博 @WebAppTrend,关注我们的腾讯微博@WebAppTrend,欢迎加入我们的Q Q群:193775364

 

分享到:
评论

相关推荐

    webApp页面跳转滑动菜单导航

    在现代Web应用开发中,创建一个用户友好的界面至关重要,特别是在移动设备上。...通过精心设计的滑动菜单和页面跳转效果,它为用户提供了直观且流畅的导航体验,同时也展示了现代Web开发中的最佳实践。

    SmartAdmin - Responsive WebApp_4.5.1

    "SmartAdmin - Responsive WebApp 4.5.1" 是一款高级且功能丰富的响应式Web应用程序模板,专为开发高效、现代和用户友好的管理界面而设计。该模板以其灵活性和适应性著称,能够自动调整布局以适应各种设备,包括桌面...

    基于JAVA的几套 WebApp开发源码

    初学者可以从这些源码中学习到如何组织项目结构,如何编写整洁的代码,以及如何应用最佳实践来构建Web应用。 标签“.NET web app”可能是一个错误,因为它与提供的Java WebApp主题不符。.NET Web App通常指的是使用...

    WEBAPP-HTML5开发入门

    HTML5移动开发是WebAPP开发的重要组成部分,它为开发者提供了更强大的功能和更好的用户体验。本文将深入探讨HTML5移动开发的基础知识,...在实践中,不断探索和学习新的技术和最佳实践,是提升WebAPP开发技能的关键。

    基于dclound旗下html5的webApp调用原生支付插件

    6. **最佳实践**: - 使用异步调用处理支付请求,以避免阻塞用户界面。 - 保持前端和后端的良好通信,确保订单信息的一致性。 - 对用户进行明确的支付指引,提升用户体验。 - 定期更新支付插件,确保安全性及...

    webapp参考

    例如,"百度地图API最佳实践_贾铮.pdf"和"百度地图API开发指南.pdf"可能详细讲解了如何使用百度地图API,包括获取API密钥、加载地图、添加标记、设置事件监听器等操作,以及在实际项目中的最佳实践和注意事项。...

    移动生态安全探索与实践.pdf

    原生WebApp、HybridApp、H5应用和跨平台应用如React Native、Flutter等不断涌现,它们在性能、体验、开发成本等方面各有优劣。例如,原生应用提供最佳的性能和体验,但开发和发布的成本相对较高。而H5应用则具有最低...

    给你几个web app站的例子,套个壳在浏览器中浏览就是 移动端webapp(伪APP).zip

    标题和描述中提到的“移动端webapp(伪APP)”是指一种通过在浏览器中封装Web应用的方式,模拟原生移动应用程序的用户体验。这种方式通常利用HTML、CSS和JavaScript等Web技术构建,无需通过应用商店下载安装,用户只...

    webapp模板

    Webapp模板是专门为移动设备和桌面浏览器设计的Web应用程序界面模板。它们通常包含一组预设计的HTML、CSS和JavaScript文件,旨在提供一个快速启动的框架,帮助开发者构建现代、响应式且用户友好的Web应用。在给定的...

    boostrap webapp电商前端页面.rar

    6. **易用性和可访问性**:Bootstrap遵循最佳实践,确保其组件易于使用和理解,同时考虑到网页的可访问性,这对于电商网站至关重要,因为它们需要满足广泛的用户需求。 7. **性能优化**:Bootstrap对代码进行了优化...

    模仿W3C的一个webapp

    而“mobile”一词意味着该应用考虑到了在智能手机和平板电脑等移动设备上的用户体验,可能采用了响应式设计或者原生移动应用的特性,如触摸事件和离线存储。 【标签】:“angular” 作为标签,“angular”进一步...

    webapp.zip

    Web技术日新月异,开发者需要不断学习新技术和最佳实践,如WebAssembly引入原生代码执行,Web Components促进组件化开发,以及Service Worker实现离线缓存等。 总结,“webapp.zip”所代表的Web应用程序开发是一个...

    logforwebViewwebApp用于webView和webApp的log工具

    3. **文档**:详细说明如何安装、配置以及使用`logforWebViewwebApp`,可能包括API参考和最佳实践。 4. **测试**:测试用例,确保工具的正确性和稳定性。 5. **许可证文件**:定义了软件的使用权限和条件。 为了...

    webapp:制作webapp

    了解这两者的语法和最佳实践是制作WebAPP的前提。 2. **响应式设计**:为了适应不同设备的屏幕尺寸,WebAPP需要采用响应式设计。通过媒体查询(Media Queries)和弹性布局(Flexbox或Grid)等技术,可以确保WebAPP...

    移动web登录页面源码

    通过这些案例,开发者不仅可以学习到实际的代码实现,还能了解到当前流行的设计趋势和最佳实践,如扁平化设计、渐进增强、无障碍访问等。 4. **源码结构**: 通常,登录注册页面源码会包含HTML文件(包含页面结构...

    webapp

    6. **RESTful API**:Webapp通常通过HTTP协议与服务器进行通信,REST(Representational State Transfer)是一种设计API的最佳实践,使数据交换更加简洁、直观。 7. **WebSocket**:提供全双工通信通道,使得实时性...

    arcgis webapp js

    7. **响应式设计**:适应不同设备的屏幕大小,确保在桌面、平板和移动设备上都有良好的用户体验。 **开发环境准备:** 由于ArcGIS WebApp JS依赖于Node.js,因此首先需要在开发机器上安装Node.js。安装完成后,还...

    基于VuejsTypeScriptpwa编写的模仿原生应用的WebApp

    项目文件名为“vue-ts-daily-master”,可能代表这是一个关于每日任务管理或者资讯阅读的WebApp实例,使用了Vue.js、TypeScript,并且遵循了PWA的最佳实践。项目结构可能包含src目录,用于存放源代码,包括Vue组件、...

    移动互联时代的嵌入式系统.ppt

    通过“从菜鸟到高手”的项目化教学模式,学生可以更深入地理解和掌握嵌入式系统的设计与开发,提高实践能力。 在云时代的软件开发中,争论焦点在于App与WebApp的选择。App提供离线功能和更好的用户体验,但需要下载...

Global site tag (gtag.js) - Google Analytics