河畔志 首页 归档 关于 链接

分类 交互策略 下的文章

那些即将淘汰的设计

看到一篇关于即将淘汰设计的文章:《能让你「一键回家」的 Home 键,很快也要无家可归了》
以及它的前面两篇:《抛弃旋钮,可能是现代电子设备最大的遗憾》《没法给手机换电池,怎么就变成一件理所当然的事了?》

有些同感,但当他给出一个拟物过时的原因是「但当大家都习惯了触屏操作后,大家又发现过分地拟物会限制住“交互创新”,还不如全部彻底去除掉那些光泽、阴影等装饰性的元素」。
有一个很明显的问题——「大家」是谁?是我们这代人吗?那下一代呢?既然他们可以直接上手新设计,我们为什么还需要过渡呢?

结论是,它们仅仅是「需要」被淘汰——趋势站在视觉这边,一切都需要被看到,于是隐晦与不可见的操作都会消失。

Home 键,旋钮,可拆卸电池,Micro USB,3.5mm耳机,以及我常说的长按操作与菜单键等。
尽管新的解决方案提供了新特性,但它也失去了一些东西——有时已经分不清是念旧还是旧方案更好了。

可以确定的是,拥抱新事物比守旧更可取,但至少要记得有一个可能更好,但只是老了的解决方案。

几个触屏浏览器标签栏方案

更新于这里

传统标签栏改进

复原桌面浏览器的体验。

  • 右置新建按钮
  • 小图标与文字结合,文字主体
  • 点击关闭标签
  • 长按气泡提示完整标题并复制到剪贴板

1_传统标签栏改进.png

优点:

  • 若无必要,勿增实体,需要更少的学习
  • 第一层操作,无需展开,更快更直接

缺点:

  • 默认更少的信息显示
  • 有限的操作面积(但已经足够)

应用:

  • 海豚浏览器

小窗口预览

使用窗口预览快速切换,可使用上下滑动手势删除。

2_小窗口预览.png

优点:

  • 直观的图形截取
  • 更大的触摸面积

缺点:

  • 更多的屏幕占用
  • 可能需要更多的界面变化
  • 同屏标签数量少

取舍:

  • 以何种方式显示标题

应用:

  • QQ浏览器 for Android
  • UC浏览器国际版 v8

小窗口层叠预览

小窗口预览的改进,大大增加了同屏标签的容纳量,而且切换更加顺畅。

3_小窗口层叠预览_新标签焦点.png
3_小窗口层叠预览_中心焦点.png

  • 三维层叠多窗口预览
  • 点击或长按滑动切换标签
  • 新建标签作为一个标签页在最后(很棒!)

应用:

  • Opera Mobile 12

文字大标签

上下堆叠的方式,以文字为主体,可使用左右滑动手势删除。

4_文字大标签.png

优点:

  • 屏幕占用随着使用程度变化
  • 显示更多的网页信息,主次分明

缺点:

  • 文字的不够直观

应用:

  • UC浏览器 v9.0

窗口预览大标签

将文字大标签的小图标替换为窗口预览

5_窗口预览大标签.png

优点:

  • 相对仅文字更大的占用空间

缺点:

  • 更少的文字信息量

应用:

  • Firefox for Android v14?

侧边窗口预览

侧边放置窗口预览,溢出可上下滑动。

6_侧边窗口预览.png

优点:

  • 足够大的容纳量和切换速度

缺点:

  • 更少的文字信息量

应用:

  • Firefox for Android v4

卡片标签

类似[[触屏最近应用列表设计]]的卡片标签,将焦点收缩于中心,基于[[位置]]平铺出标签卡片。

7_卡片标签.png

应用:

  • Chrome for Android
  • QQ浏览器 for Android

卡片层叠

由卡片形成的三维层叠,类似[[#小窗口层叠预览]],更充分地利用屏幕空间。

8_卡片层叠.png

应用:

  • QQ浏览器 for Android v5.0

标签栏的位置

  • 顶部更符合一般的桌面认知
  • 底部更靠近手指

即时通讯的消息提醒方案

QQ在4.1左右消息提醒方案从固定一条消息变成多联系人消息合并。

IMG_20180328_112958.png
▲原方案,不断在消息容器里填充内容

IMG_20180328_113007.png
▲新方案,有多个联系人时消息合并

原方案虽然刷得快,但一般情况不用打开软件就能知道发生了什么,而新方案只要同时有多个联系人的消息、就无法获得有意义的信息、需要打开软件查看了。

使用额外的修饰着重中文

许多设计会采用英文演示,这是因为英文(西文)天生地比中文(汉字)轻而错落有致。——中文更靠近图像,更重而规整

如此一些英文的样式应用于中文是水土不服的,典型如标题使用字体大小区分、粗体和斜体。
它们都是修饰文字本身,而使用同样方法,中文需要程度更深的修饰,否则区分度不大。——始终是黑压压的方块

例子可以是 WindowsPhone 的大标题——英文不错,中文就差强人意:

IMG_20180318_124123.jpg
IMG_20180318_123416.jpg
▲英文灵动,中文死板

于是中文偏向使用额外的修饰,比如在标题前增加图案标记,比如【这样】而不是这样着重文字。
HTML一些语义标签如 <q> 也是适用于西文的,因为它需要修饰文字本身,而对于中文,大多数情况写死成符号就好了,比如「引号」和《书名号》,本身的修饰退化为辅助存在,比如【这样】

中文当然可以仅修饰本身,而且也可以做得好,只是它与英文间有着微妙差别,生搬硬套是不可取的。
在这里稍微为传统中文门户网站正名——尽管所有东西挤在一起,但是符合中文特性的。

不认同把换行符替换掉的做法

注意到 Lofter 现在客户端的私信会把换行符替换为空格,微信也会将「多余」的空行去掉。

尽管出于让消息尽可能短、鼓励发送短消息的考虑,替换换行符的做法依然激进了些
——既然需要换行,文本必定会长,而长文本没有好的排版就是一团浆糊。

改进方案可以是最多保留一个空行防止刷屏即可。


以及联想到之前一个会把脏话敏感词处理为「大笨蛋」而非星号的案例。
它一定程度上改变了用户的本意,认为是对用户的不尊重,程度轻重而已——有人不以为意,有人敏感于此。(而且「大笨蛋」放在现在已经太违和了)

尊重需求满足了不一定加分,但损害到的话一定是减分的,用户不应该是产品的傀儡。