河畔志 首页 关于 链接

触屏键盘设计笔记

视觉与体感上的细节笔记,基本框架基于百手输的实例。

视觉面积 ≠ 物理面积

相同的物理面积,在UI的改变下,会产生不同的视觉效果,进而影响大脑对于面积的判断。
一般来说,相同物理面积,有立体感的按键往往比扁平更容易捕捉,并且不容易审美疲劳。

适当的间距,能让点击准确度增大。(拉开层次)
尽管这样让物理占用面积减小,但带来更好的视觉效果,看起来反而更大。

对于键盘,认为全扁平设计在实用上不占优。
布局相同时,UI会影响到整体的轻重、复杂度。可能的话,两者应当配合起来。

另外,前景小则突出按键大,前景大则突出按键小。

回归按键中心!

点击、长按,这是模拟实体按键最基础的两个状态。
尽管滑动是先进而有用的,但过多的滑动操作,会使「按键」之感减弱。

长按的时间阈值

过短的时间容易造成误判,进而误操作。
但键盘的长按操作可能是极其频繁的,应当使用较小的值。

list的横/竖选择

竖向利于翻阅、查找,而横向利于形成位置关系、以让首页hot。

hot:极其频繁地使用。
类似于代码应当勤于换行、Grid模式形成动作导向。

弹窗效果

模拟弹窗效果,不求塞进过多功能。
而应该留有较大的返回区域,让「返回」变得非常容易,这样,才是「弹窗」。

类似现在,把搜索框做成搜索按钮,然后点击是出来一个铺满屏幕的新页面,认为是不可取的。
作为弹窗效果,覆盖层的重量应该保持在底层的三分之一以下。
否则,功能过度地铺满页面,就不是弹窗效果,而是一个新页了。(尽管实质上它就是)

统一性

对于一个主题的不同面板,为了增加区分度、没必要做到相同,但要做到相似、以维持主题的统一。

对于临近的相似元素,显示上给予合并,形成联系,成为整体。
如list、MORE的单元格使用细线或无线分割,而非强烈的阴影、大间隔,凸现其整体性。

对于性质不同的元素,为了视觉上的简洁、以及操作上的便利,视情况合并。如「白瓷」的「空格MORE」键。
大致是「境遇」相通的按键合并。

适度的反馈

作为单纯的输出性按键,通过按下效果反馈(作用于背景或前景)。
但对于会使界面元素发生巨变的按钮(如切换面板),则不应给予按下效果。

翻页策略选择

用于候选栏与list,有「随指滑动」与「翻页滑动」两种效果。

随指滑动: 内容粘连着手指一同滚动
翻页滑动: 翻书一样,滑一下翻一页

随指重「沉浸」,翻页重「效率」。

候选栏候选字的承载

内容过多,不仅选择起来繁杂,手指也难以精确点击,容易误触。
而内容过少,则可能带来频繁的翻页、进入更多候选,以及选择时的跨度增大(如从第一候选移动到第二候选)。

在这里,百手输有做首选间隔优化:
其不止是增大首选的宽度范围,而是让宽度从首选到末选依次减小。认为是很好的一个设计。

更多候选字的承载

这里展开了二维结构。内容多少参考前文。

但当内容少到一个点时又会发生有趣的事:
比如使用3*3的九宫格承载,到这个点,眼睛一瞄便可判断目标是否存在,然后多次使用翻页即可。

对于英文应当减少列数,一般用两列或三列。(因为单词长短不一,需要硬对齐,否则会形成不利于查找的瀑布流)

对齐与参差

对齐按键容易让整体有序,适用于少键情况。(如九宫格)
而参差更容易让个体得到识别,基于位置关系的区别。(如26键)

面板指示器

让用户知道自己所在的位置。
最好不仅高亮出所在位置,也陈列出其他的位置,形成几何上的位置感。

点击与滑动手势

点击操作需要找到目标,然后操作,是精确的。
而滑动手势是模糊的,尽量只使用通用、易于理解的手势。

固定链接: https://gearkey.vvnote.org/index.php/post-67.html 

发表评论:

(邮件地址不会被公开,同时用于显示与之关联的 Gravatar 头像)