上述特点对设计的影响有以下几点:
- 所有可交互元素,一般都需要定义普通态和hover态;
- 大部分的数据对象,比如文字、图片、文件、列表项,都需要考虑定义选中态、右击菜单、双击逻辑;
- 鼠标指针可需要进行一些定义,比如鼠标放到布局分隔线上时变成“水平调整大小箭头” 。
文章插图
移动端采用软键盘的形式,场景式出现,没有快捷键逻辑,输入成本相对较高 。
桌面端采用硬键盘的形式,输入成本相对较低 。有丰富的快捷键逻辑,且需要设计师定义快捷键,比如一些通用的快捷键:复制、粘贴、全选等 。
对于一些高频操作的功能,也需要定义快捷键,比如发送消息、下一步;另外,对于比较成熟的桌面端产品,原则上需要支持“全键盘交互”,也就是说可以脱离鼠标实现所有交互,而这些键盘交互逻辑也是需要设计师定义的 。
10. 单窗口 vs 多窗口
文章插图
移动端是单一窗口,所有操作都是针对当前窗口的,很少有跨窗口逻辑 。
桌面端是多窗口逻辑,可以同时存在多个窗口,且各个应用之间也可以交互 。所以在设计时需要定义这些交互逻辑(窗口任务并行 & 窗口间交互 & 应用间交互);比如网盘应用中,用户是否可以把文件从一个窗口拖动到另外一个窗口,是否可以拖到桌面上保存,具体的交互逻辑又是怎样的 。
最后,还需要定义窗口是否是模态的,如果是模态的,则用户无法操作应用下的其他窗口 。
五、控件/模式差异
桌面端的控件/模式(Components & Patterns)和移动端也有着诸多差异,这里列举了一部分比较典型的差异 。
文章插图
弹窗:移动端和桌面端的弹窗样式有所差异 。按钮位置也会有所差异,移动端的”确定性”按钮在右侧,桌面端中MacOS的在右侧,Windows的在左侧 。
文章插图
浮层:移动端由于屏幕尺寸限制,较少使用浮层控件 。而浮层在桌面端则非常好用,它可以做成信息详情浮层、二次确认浮层、复合型浮层等 。相对于弹窗而言,它的打扰性很小,而且“就地操作”,效率更高,同时能够承载的信息也相对比较丰富,是笔者很喜欢用的一个桌面端视图控件 。
文章插图
tooltip:移动端理所当然是没有tooltip的 。而桌面端tooltip的出镜率就很高了,一般有2个作用:一个是用于解释一些按钮的功能,另一个是展示被截断字段的完整信息(均见上图) 。
文章插图
更多菜单:移动端的更多菜单采用的控件是左滑菜单(iOS)或长按菜单(Android),桌面端采用的则是右击菜单 。
除了上面所说的控件,其实还有很多其他控件也是不同的,再此不一一细述 。比如:标签栏(无文字 vs 有文字)、面包屑(少用 vs 常用)、单选(单选列表 vs 单选按钮)、开关(开关 vs 复选框)、下拉(下拉框 vs Actionsheets)…
另外,还有很多和系统交互的模式也是不同的 。比如上传、下载、保存、打开、系统任务栏、系统推送、后台运行等 。不过这些差异性只需跟随系统即可,没有特别需要注意的,也就不再赘述了 。
六、最后
推荐阅读
- 直系亲属都有谁 直系亲属包括哪些
- 口取纸贴法步骤图片 word打印口取纸
- 如何设置手机的铃声,如何给华为手机设置手机铃声短视频
- 无人机表演公司排名,消防无人机生产最大的企业
- 快递包裹的重量和体积限制 - 中国邮政小包的要求有
- 懒人拌饭的做法,懒人的炒饭方法有哪些呢
- 航拍器品牌 安徽航特品牌
- 岱宗夫如何齐鲁青未了 岱宗夫如何
- 木兰诗有多少字,木兰诗原文多少字