交互设计基本功!5个值得学习的APP交互方式

2024-02-18 09:38

本文主要是介绍交互设计基本功!5个值得学习的APP交互方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

交互设计基本功!5个值得学习的APP交互方式

一、下拉输入

代表应用:Flickr、Opera Coast、any.do、Timi记账

即通过下拉的动作来呼出输入操作,比如搜索、添加项目等,比如flickr、opera coast就是通过下拉呼出搜索框,另外,还有一种就是下拉添加项目,此类的app有any.do、Timi记账。下拉是一个很自然很便捷的动作,很适合于”随时、快速输入”的情境,比如any.do作为GTD应用,采取下拉添加的设计就非常适合,因为很多时候,我们都会在这样一种情境中使用这个功能:走在路上,突然有了一个灵感,于是赶紧打开any.do,把想到的记下来。这样的情境要求能够以最简单、最快的方式输入,而不用去寻找添加按钮。

Opera Coast的下拉搜索

图1 Opera Coast的下拉搜索

Flickr的下拉搜索

图2 Flickr的下拉搜索

二、登录验证帐号

代表应用:印象笔记

通常的登录和注册是分开设计的,而印象笔记将登录和注册整合,每一步骤都只有一个表单,注册和登录没有任何冲突。这样避免了”用户已存在”然后又要重新填写表单的不良体验,在流程上有很大的优化,如下图4所示:

印象笔记

图3 印象笔记

印象笔记的登录流程优化

图4 印象笔记的登录流程优化

三、未激活按钮的设计

代表应用:snapchat

交互设计中有个叫做”预设用途”的原则,大意就是一个界面或者控件,要让用户一看见它就知道如何使用。显然,最基本的要求就是至少要能知道这个控件可否操作,而所谓”未激活的按钮”就是含有”激活”和”未激活”两种状态而目前处于”未激活”状态的按钮,这就要求分别对两种状态进行设计。通常来说,有两种方法,隐藏或呈不可操作的视觉效果(比如灰色),比如snapchat的表单填写界面,当表单尚未填写完全时,CONTINUE按钮一直处于灰色状态,即告诉用户该按钮尚未激活。读到这里你或许会觉得这其实很简单嘛,但只要你仔细观察一下,就会发现有很多的应用没有这样设计。

snapchat的表单

图5 snapchat的表单

四、输入框title或提示文本的解决方案

代表应用:dubble

通常设计输入框时,我们会使用Lable标签给每个输入框一个title,比如”用户名”、”密码”,另外,还会在输入框中使用灰色的提示文本,如图6所示。但是,在手持设备的应用中,这样的设计会产生两个问题,一是浪费屏幕空间,我们知道,手持设备的屏幕空间是很宝贵的,而以Lable标签呈现的title会占去很大一块屏幕空间;二是提示文本在用户输入时便消失不见,提示效果无法持续到任务结束。那么,如何解决这两个问题呢,如下图7所示,在用户输入时将title移至输入框边框中,或者像dubble应用的注册界面,把输入框的提示文本移动到键盘上面,如图8所示:

图6 通常情况下的输入框设计

图6 通常情况下的输入框设计

图7 将title移至输入框边框

图7 将title移至输入框边框

dubble的输入框提示文本

图8 dubble的输入框提示文本

五、悬浮聊天窗,滑动关闭聊天窗口

代表应用:Facebook

如图9所示,Facebook将聊天窗口悬浮在界面边缘上,可以任意拖动,但会自动贴紧屏幕边缘,打开聊天时其他背景半透明遮罩,层次感很强,按住聊天窗口任意位置向右上角滑动即可关闭聊天窗,有一个回收的动效。淘宝手机客户端也借助了这个设计,这样的设计对于以用户动态为主,而私信聊天为辅的应用非常适合,比如微博、QQ空间等。稍微嘴贱一句,新浪微博之前一直想加强社交属性,减弱媒体属性的标签,但最终未果,我觉得新浪早点重视移动客户端并且像facebook一样用设计来加强社交属性或许会比较有效果。

facebook的悬浮聊天窗口

图9 facebook的悬浮聊天窗口

 


这篇关于交互设计基本功!5个值得学习的APP交互方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/720756

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例,告诉我们不懂推荐算法的产品,也能从产品侧出发, 设计出一款不错的推荐系统。 相信很多新手产品,看到算法二字,多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法(注:传统是指科班出身的产品都会接触过)。但对于推荐算法,多数产品对着网上搜到的资源,都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后,更是加大了理解的难度。 但,不了解推荐算法,就无法做推荐系

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习:参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归(SAheart.csv) 【学习笔记】 陈强-机器学习-Python-Ch6 多项逻辑回归 【学习笔记 及 课后题练习】 陈强-机器学习-Python-Ch7 判别分析 【学

系统架构师考试学习笔记第三篇——架构设计高级知识(20)通信系统架构设计理论与实践

本章知识考点:         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域,图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能,成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限,比如只有一台高性能电脑时,如何高效地让七人同时流畅地进行设计工作,便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器(CPU):选择多核、高线程的处理器,例如Intel的至强系列或AMD的Ry