网页设计(Web UI)与手机UI的区别

by 少年2021-03-09
  • 0 赞
  • 0 收藏
  • 网站
  • 23 评论
  • 1317 阅读
© 本文 by 少年 版权所有,作者未对本笔记声明转载限制,转载时请注明本文标题和链接。
笔记

首先,网页设计与手机UI,操作的媒介不同,鼠标与手,这是一个很大的区别,而这个区别所造成的几点不同如下:



1、精确度不同:


鼠标的准确度是相当高的,哪怕是再小的按钮,对于鼠标来说,也是可接受的(注意,仅仅是可接受),点击的错误率不会很高。


而手的准确度相对而言就没那么高了,而且还要照顾一些肢端较大的用户,因此对于手机UI中的按钮,就需要一个比较大的范围,以减少错误率(相信不少人咒骂过iphone的输入法吧,这就是个很好的例子)


2、位置不同:


对于鼠标,可以说按钮在屏幕中的任何位置,对于操作的影响都不是很大,你可以轻松的移动鼠标到任何你想去的位置,点击任何你需要的按钮。因此我们可以看到大部分的网页,按钮都在边缘的一个狭小空间内。


而对于手机UI,你需要考虑的是手机的使用环境,通常人们更加希望单手操作手机(某品牌的7寸大砖头除外),因此,我们设计的按钮,通常更多的在屏幕下方,或左右手大拇指能控制到的区域内。


3、操作习惯不同:


对于鼠标,通常我们有单击,双击,右键这几种操作,因此在网页设计中,我们可以设计右键菜单,双击动作等等。


而对于手机UI,通常我们有点击,长按和滑动甚至多点触控,因此我们可以设计长按呼出菜单,可以设计滑动翻页或切换,可以设计双指的放大缩小,以及双指的旋转等等。


但很明显,我们不能把以上这两种操作习惯混用,想象一下如果手机应用中出现右键菜单,或者网页中出现多点触控操作,那么最先骂娘的就是用户,然后就是设计师的老板了。


4、按钮状态不同:


对于网页中的按钮,通常有四个状态:默认状态,鼠标经过状态,鼠标点击状态,不可用状态。


而对于手机UI中的按钮,通常只有三个状态:默认状态,点击状态和不可用状态。


因此,在网页设计中,按钮可以与环境以及背景更加和谐的融为一体,不必担心用户找不到按钮,因为当用户找不到的时候,会用鼠标在屏幕上乱画,这时按钮的鼠标经过状态就派上用场了。


而在手机界面中,按钮需要更加的明确,指向性更强,让用户知道什么地方有按钮,因为一旦用户点击,触发按钮的事件就发生了。


然后,网页设计与手机UI,输出的区域尺寸不同,这同样是一个很大的区别,目前主流显示器的尺寸通常在19-24寸,而主流手机的尺寸则仅仅为3.7-4寸(请果粉原谅我没有把iphone的屏幕尺寸作为主流标准,因为它实在是太小了),甚至最愚蠢的厂商开发的大砖头,也不过7寸而已。


这个不同造成的结果是,我们不能在网页设计和手机UI中,在同一屏里放入同样多的内容,一般来说,一个应用或是一个网页应用,总体的信息量是一定的,因此,在网页端,我们可以尽量多的把内容放进首页,而尽量避免更多的层级,一般类的网站,基本只有3级目录,而这个3级目录,是建立在第一级所产生的子目录足够多的情况下。


在手机端,我们需要更多的层级,因为我们不能在第一个页面里放入无限多的内容,所以我们需要给用户一个更加清晰的操作流程,让用户可以更容易的知道自己在整体应用的什么位置,并且很容易的到达自己想去的页面或步骤。因此,map在手机UI中的重要性,要比网页更大。


---

转载请注明本文标题和链接:《 网页设计(Web UI)与手机UI的区别
评论
ABerict
I did have a double masectomy though side effects of clomid male

2022-11-22 08:28:43回复

Reefdrini
Sunnyvale, CA purchase stromectol online

2022-11-20 08:43:22回复

geoldenly
and Lancas, F can doxycycline treat bv

2022-11-14 05:51:27回复

spirway
Trip Verified Seattle to Spokane nolvadex Theanine is a derivative of green tea that works well with midazolam in reducing anxiety

2022-11-10 02:46:36回复

hyclorm
The experiments revealed that in most rats vasopressin did not induce renal tubular necrosis if the anti oestrogen was administered simultaneously, even during oestrogen pretreatment buy priligy 60 mg

2022-11-09 18:09:31回复

12345(有 23 条评论)