是什么让 Web 应用程序成为触摸板友好的应用程序?
使用 ASP.NET MVC 设计 Web 应用程序时,我问自己如何才能取悦那些使用智能手机、ipad 等(所有可触摸的东西...)的人,而不仅仅是带有浏览器的台式机/笔记本电脑。
我怎样才能开发更好的用户体验。
我很高兴听到有关 ASP.NET MVC 框架的技术建议,以便稍后我可以具体实施您的建议。
Designing a web application with ASP.NET MVC I asked myself how can I also please those people using a smart phone, ipad, etc.. (everything thats touchable...) and not only a desktop/notebook with a browser.
How can I develop a better user experience.
I would be pleased to hear about technical advises concerning the asp.net mvc framework so I can later implement your suggestions concretely.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
友好程度有几个级别。您可以从基本的“该网站的渲染效果是否足以在移动浏览器中使用?”开始。对于任何使用现代网络标准的新网站来说,这确实不应该成为问题,但旧网站可能会出现问题。与此相关的是“我的网站是否是一个带宽消耗大户,因为每个页面都是 14mb 的动画 GIF 和意大利面条式 HTML,所以需要永远花费超过 3g 的时间来渲染?”或者“我的网站是否会因攻击性脚本而导致移动设备崩溃?”幸运的是,这个集合非常容易处理——现代网站在默认情况下往往可以很好地处理这个问题。
第二个层次是“从触摸的角度来看,这个网站是否做了任何令人抓狂的事情”。最重要的是基于悬停的菜单——触摸 UI 上没有悬停。另一个常见问题是使用小链接或按钮,至少在不放大到疯狂级别的情况下无法点击。这里的解决方案是测试——有些问题对所有人来说都是显而易见的,但有些事情只有在不使用鼠标进行交互时才能看到。
最后一个级别是使用触摸用户界面来获得乐趣和利润。如果您做到了这一点,那么您比当今时代的许多网络出版商做得更好。这里涉及的是使用触摸友好的 UI 工具(例如 jquery mobile)来处理滑动事件和其他触摸功能,以使事情更像人们期望的触摸 UI 一样。一个简单的例子是使图像轮播可滑动,而不必等待按钮。
There are a few levels of friendlyness. You can start with the basic "does this site render well enough to be usable in a mobile browser?" This really should not be a problem for anything new that is using modern web standards but older sites could have problems. Corallary to this is "is my site a bandwidth hog that takes forever to render over 3g because each page is 14mb of animated GIFs and spaghetti HTML?" Or "does my site make mobile devices melt due to aggresive scripts?" Luckily this set is pretty easy to deal with -- modern websites tend to handle this pretty well by default.
The second level is "does this site do anything maddening from a touch perspective." The big thing that can clip you here is hover based menus -- there is no hover on a touch UI. The other common issue is using small links or buttons that one can't hit at least without zooming in to crazy levels. The solution here is testing -- some issues are obvious to all but you won't see some things until you are interacting without a mouse.
The final level is using a touch UI for fun and profit. If you make it this far, you are doing better than many web publishers in this day and age. What is involved here is using touch-friendly UI tools, such as jquery mobile, to handle swipe events and other touch features to make things work more like one expects with a touch UI. An easy example would be making an image carousel swipe-able rather than having to wait for the buttons.
让界面变得厚实——大图标很容易点击,文本很难准确触摸。为每个元素设置最小尺寸,至少与 iPhone/android 虚拟键盘上的各个按键一样大,最好更大。
确保最相关的选项位于顶部附近,之后的目标只是使其直观。菜单通常越少越好。
Make the interface chunky - big icons are easy to click, text is very difficult to touch accurately. Set a minimum size for every element, at the very least as big as the individual keys on an iPhone/android's virtual keyboard and preferably much larger.
Ensure that the most relevant options are near the top, and after that the aim is simply to make it intuitive. Fewer menus are generally better.
阅读我的教程ASP.NET MVC 4 移动功能
- 使用 HTML5 视口属性和自适应渲染来改善移动设备上的显示。
Go through my tutorial ASP.NET MVC 4 Mobile Features
-use the HTML5 viewport attribute and adaptive rendering to improve display on mobile devices.