兰亭妙微灵感库:那些让人眼前一亮的交互设计细节

雅各布定律告诉我们:设计师要多研究、多把玩各种产品,才能对当下的设计趋势和方法有直观的感受。兰亭妙微团队有一个习惯 —— 日常使用产品时,遇到好的交互设计就截图存档,定期整理分享。今天我们从手势、按钮、输入框三个维度,把这些灵感拿出来和大家交流。

一、手势交互:让操作更自然

手势是移动端最天然的交互方式,好的手势设计能让用户 "忘记界面",直接用直觉操作。

拖拽手势是最高效的方式之一。比如淘宝的多地址下单功能,用户可以通过拖拽,把不同的商品分配到不同的收货地址 —— 不需要进入每个商品单独设置,拖一拖就搞定了。这种设计的核心是 "所见即所得",用户直观地看到商品和地址的对应关系,操作路径极短。兰亭妙微在做后台管理系统时,也借鉴了这种思路:排序、分类、分配权限,能用拖拽解决的就不用下拉菜单。

上滑 / 下滑手势适合需要 "切换模式" 的场景。某聊天软件的阅后消失模式,用户上滑页面即可开启,页面上有文字引导和滑动进度提示 —— 用户在滑动过程中自然地进入新模式,没有突兀的弹窗打断。再比如外卖 APP 的订单详情页,第一个卡片顶部有 "可滑动" 的图标提示,往下滑整个卡片区域就进入地图模式,能查看骑手位置;想切回订单信息,往上一滑就行。这种设计特别适合 "沉浸式查看 + 快速切回" 的场景,比多开一个页面流畅得多。

摇一摇是一个容易被忽略的手势。某输入法 APP 的语音输入功能,用户说完一句话、做了语音修改后,如果想撤销,摇一摇手机就行。用摇一摇代替界面上的撤销按钮,好处是页面更干净 —— 主操作和主内容更突出,没有多余的按钮干扰;同时还增加了操作的趣味性。当然,摇一摇不能滥用,它适合那种 "不常用但需要时能快速触发" 的功能。

image.png

二、按钮交互:在方寸之间做文章

按钮是界面上最常见的元素,但越是常见的元素,越容易被忽视。好的按钮设计,能在方寸之间传递大量信息。

二次点击切换是减少界面复杂度的好办法。比如排序功能,默认是 "降序",点一下变成 "升序",再点一下又切回来。不需要做一个下拉菜单让用户选,也不需要放两个按钮 —— 一个按钮、两次点击,状态一目了然。这种设计的前提是选项只有两个,如果有三个以上的排序维度,还是老老实实做菜单。

动态按钮区是兰亭妙微特别喜欢的一种设计。应用市场的应用详情页就是典型:没更新时,按钮显示 "更新";点了之后,同一个位置变成更新进度的加载动效,能看到百分比;更新完成后,又变成 "打开" 按钮。同一个区域承载了三种状态,过渡自然,信息直观 —— 用户不需要理解 "按钮去哪了",因为它一直在那里,只是状态变了。这种设计比 "按钮消失→出现进度条→再出现新按钮" 要流畅得多。

按钮吸顶 / 吸底是长页面的标配。当页面内容很长,用户往上滑时,重要的操作按钮(比如 "提交"" 购买 ""下一步")会固定在顶部导航栏或页面底部,用户随时能点到,不用滑回顶部或底部找按钮。这个细节看似简单,但很多产品都没做好 —— 要么按钮不吸顶,用户滑远了找不到;要么吸顶了但挡住了内容。关键是把握好触发时机和遮挡范围。

image.png

三、输入框交互:降低用户的输入成本

输入是用户最 "累" 的操作,好的输入框设计能显著降低用户的负担。

整合标题和占位符是近年来很流行的设计。传统做法是输入框上方有个标题,框内有占位符文字,占了两行空间。整合式的做法是:未输入时,标题文字显示在输入框中间(充当占位符);用户点击后,标题缩小并移动到输入框左上角,同时占位符出现。这样既节省了空间,又保证了标题始终可见 —— 用户输入到一半,也能看到这个框是填什么的,不用往上翻。Material Design 和很多主流 APP 都采用了这种模式。

占位符融合按钮是一个很巧的设计。某输入法的中译英功能,占位符写着 "输入或粘贴文字",其中 "粘贴" 两个字是可以直接点击的按钮。用户复制了一段文字后,不用长按输入框再选粘贴,直接点占位符里的 "粘贴" 就行 —— 少了一步操作,体验就顺滑了很多。这种设计的关键是按钮要和占位符自然融合,不能看起来像两个独立的元素。

收益可见性是金融类产品的杀手锏。投资理财类的收益计算器,输入框旁边的帮助提示直接显示产品的年化利率,更妙的是,用户输入金额后,下方会动态计算出预估收益 —— 你输入 10 万,立刻看到 "预计收益 XXX 元"。这种实时反馈让用户 "看得见收益",比任何营销文案都更能刺激买入决策。兰亭妙微在做电商项目时也借鉴了这个思路:用户选择规格后,实时显示总价和优惠金额,决策效率明显提升。

写在最后

这些交互灵感看起来都是 "小细节",但正是这些小细节,决定了用户用产品时是 "顺手" 还是 "别扭"。

兰亭妙微始终认为,交互设计的灵感不是凭空想出来的,而是从日常使用中积累出来的。 下次你用 APP 时,不妨多留意一下:这个操作为什么这么设计?有没有更好的方式?把好的设计记下来,日积月累,你的交互设计能力自然就上去了。

毕竟,最好的设计老师,就是那些你每天都在用的产品。

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档