程序员也该懂点UI细节

2023-05-16

虽然说项目开发过程中,美工和程序各司其职。但是很多时候程序员本身也要知道一些UI设计的细节。

一、每个页面的功能上要突出重点。

比如说你首页是想引导更多用户注册的话,你就要把注册按钮突出出来。如果你首页是你想引导用户更快的找到自己需要的文章或内容的话,你就应该优化好导航或者搜索功能。想清楚该页面是干什么的,然后再进行页面设计。这点很重要。

切记记得,不要在一个页面上指望引导用户进行多项操作。这点是不实际的,如果处处都突出,处处都是重点,也就没有重点了。首页一定要精简,如果什么东西都在首页显现出来的话,你还要其他页面干什么?

二、尊重用户的阅读习惯,对角线原理的合理利用。

人在浏览网页的时候往往遵循从左上角到右下角的一个阅读习惯,所以我们将重要的内容最好放在对角线附近。

三、导航的重要性。

有些网站因为导航设计的乱七八糟,导致客户体验极其差。在做导航设计的时候,越简单的越容易搜索,将相似的内容概括到二级菜单中。顶级导航不宜过多,你总不能期待用户想找的所有东西都在一个导航菜单中实现,尤其对于大型的商城或者管理系统之类的。

四、注重文字和间距的一致性。

我不知道你身边有没有这样的美工,他们为了左右协调一致,将页面中不同元素块的距离都设置的大小不一,设置于页面类似元素的字体和字间距都不一致,这是极其不合理的。如下图:

五、告诉用户什么样的输入才是有效输入。

有些站点在用户注册的时候,很简洁,什么样的提示信息都没有。等到用户满心欢喜的填好所有东西的时候,点击注册。它会不厌其烦的告诉你用户名格式错误,善意的人会指出用户名的正确的格式应该是数字+字母不能带特殊字符之类的。也有极个别站点就是告诉你错了,但是不会跟你说什么样的才是正确的。这是要用户抓狂的节奏啊。好的体验应该是在用户输入用户名附近的地方有个提示:用户名必须是数字+字母,不能带特殊字符。

还有种常见的问题就是输入框字符限制的问题,很多站点的处理方式是如果超过限定的字符,则用户再输入就无效。但因为没有给出提示,用户在超出之后只是发现自己打不出来字了,很多人可能会怀疑是键盘松动了。

六、用户文档(培训文档)用视频会更加生动传神

有时候你要花3页内容才能阐述清楚的问题或者流程,可能5分钟不到的视频就能实现一样的效果。并且通过视频传递的信息会比文档传递的信息更容易让用户记住。

七、搜索的处理

精简主义者会想直接一个搜索框和一个搜索按钮就可以了,完美主义者会想用户想,把所有的可搜索条件都罗列出来共用户选择搜索。如何精简和细化自己的搜索功能是个难题。如果你两者都要用到的话,你可以提供给一个高级的选项给用户,当简单搜索可以满足用户的时候,用户就直接搜索。不满足用户的时候,用户就可以选择高级搜索。

八、忌用长表单

如果有要用到长表单的时候,请选择分步的方式让用户填写。一来在视觉上看起来没那么复杂,二来分步保存的话,也避免用户在填写长表单过程中因为浏览器异常等情况信息丢失。比如你在做一个简历系统,如果一次性要求用户输入基本信息、教育经历、工作经历、获奖经历、技能信息,用户看到得疯啊。这时候你可以分成几个小步骤,用户来逐步完善自己的简历,部分步骤可以直接选择跳过进入下一步中。

在长表单的分布的填写过程中,务必要让用户知道共哪几步,现在进行到哪个步骤了。不然用户会觉得怎么刚输完又要输啦,到底有完没完啊,什么时候结束啊~~~~


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

程序员也该懂点UI细节 的相关文章

  • Qt安装显示:MSVC2015 编译器带有感叹号,及解决办法

    在Qt安装完成后 xff0c 选项 KIt界面显示 xff1a MSVC2015 的两个编译器的图标会变为带有感叹号的一个黄色图标 xff0c 如下图所示 xff1a 图 1 Kits 显示的界面上 MSVC2015 的两个编译器的图标会变
  • VR中的交互方式 好

    http www gameres com 495107 html
  • Mac常用应用 brew list

    61 61 gt Formulae ca certificates gdbm go libidn2 mpdecimal python 64 3 10 readline wget delve gettext jsonschema libuni
  • Slack 消息回传

    Slack预留了回传接口 可以将报错 告警信息等回传到Slack频道里 https api slack com messaging webhooks
  • Postgres 最大连接数满了: remaining connection slots are reserved for non-replication superuser connections

    最近遇到链接pg数据库报错 xff1a remaining connection slots are reserved for non replication superuser connections 百度说 xff0c 是由于设置的最大
  • oracle游标:fetch和for循环游标

    1 fetch 显式的open close Declare Cursor cur Is Select xtwldm From xtm14 curRow cur Rowtype Begin Open Cur Loop Fetch cur In
  • .net {"已添加项。字典中的关键字:“**”所添加的关键字:“**”"}

    用户代码未处理 System ArgumentException HResult 61 2147024809 Message 61 已添加项 字典中的关键字 00 所添加的关键字 00 Source 61 mscorlib StackTra
  • docker: 为运行的container增加多个端口

    1 list all docker process and stop running container test01 docker ps a docker stop test01 2 commit the container docker
  • git prune, git remote prune, git fetch --prune 三者异同

    远程分支的3种状态 远程仓库确实存在分支dev本地版本库 xff08 git xff09 中的远程快照和远程分支建立联系的本地分支 git prune https git scm com docs git prune Prune all u
  • Jmeter_Non HTTP response code: java.net.SocketException

    error msg rc 61 span class hljs string 34 Non HTTP response code java net SocketException 34 span rm 61 span class hljs
  • SQL Server 数据库导入导出数据

    Data Micration between SQL Server Database 1 减少源数据库的导出数据 排除日志表数据 xff1a 日志表数据体积大且没有导出价值 精简掉备份表 xff1a 为了保证数据的安全 xff0c 一般会对
  • 程序员读书啦!!!

    成为Java顶尖程序员 xff0c 看这11本书就够了 xff1a http blog csdn net u012410733 article details 51869105 编程科普书籍推荐 xff1a http blog csdn n
  • Windows设置本地DNS域名解析Hosts

    DNS Domain Name System 域名系统 xff1a 为了加快定位IP地址的速度 将域名映射进行层层缓存的系统 目的 xff1a 互联网通过IP xff08 10 223 146 45 xff09 定位浏览器建立连接 xff0
  • 机器学习之缺失样本重采样策略

    1 引言 在机器学习领域中 对不均衡数据集进行建模是我们训练模型时经常遇到的挑战 比如在分类问题上 训练集上类别的平衡对模型建模起着重要作用 如果直接对类间不平衡的数据进行建模 xff0c 即数据集中存在少数类 xff0c 这样训练好的模型
  • aptitude与apt-get

    aptitude 与 apt get 一样 xff0c 是 Debian 及其衍生系统中功能极其强大的包管理工具 与 apt get 不同的是 xff0c aptitude 在处理依赖问题上更佳一些 举例来说 xff0c aptitude
  • js 冒泡排序、函数(function)

    一 冒泡排序 原理 数组中的元素两个两个进行比较 xff0c 如果前面的数大于后面的数就进行交换 xff0c 如果前面的数小于后面的数不交换位置 xff0c 后面的继续和下一个进行比较 整体代码 xff1a 冒泡排序 var arr 10
  • python 中Dict 转 Json

    最近在公司需要写个小工具 xff0c 运用到的python xff0c 然后需要将Dict转成Json 之前遇到转换Json失败 xff0c 然后以为复杂的Entity结构 xff0c 不能用Json的库Json dump xff0c 进行
  • Zabbix监控

    由于本人工作职责的一部分 xff0c 需要用Zabbix监控 xff0c 所以在此贴一下Zabbix监控 实在觉得Zabbix监控做的太牛掰 xff0c 先打Tag xff0c 周末再来补全
  • 看完23岁的我在干嘛之后有感

    现在我已经25岁了 xff0c 先说我23岁的时候吧 xff0c 23岁我在干嘛 xff0c 刚上研究生 xff0c 好像貌似一切都挺顺的 xff0c 考研成功 xff0c 进入北京比较好的一所大学读计算机 xff1b 然后是和前任分手 x
  • Libev源码解析

    最近在看libev源码 xff0c 算是对libev的源码有个比较清晰的了解 总共分3部分来介绍libev 1 Libev是什么 Libev是基于Reactor模式的一个高性能 xff0c 支持高并发的事件库 它本身不仅支持IO xff0c

随机推荐

  • Android开发之Intent跳转到系统应用中的拨号界面、联系人界面、短信界面 .相机.录影机....

    Android开发之Intent跳转到系统应用中的拨号界面 联系人界面 短信界面 现在开发中的功能需要直接跳转到拨号 联系人 短信界面等等 xff0c 查找了很多资料 xff0c 自己整理了一下 安装已经存在的apk String file
  • C++ STL中判断list为空,size()==0和empty()有什么区别

    关于两个的区别 xff0c 首先size 61 61 0为bool表达式 xff0c empty 为函数调用 xff0c 这一点很明显 查看源代码 xff0c bool empty const return M node gt M next
  • docker port

    一 码云 https gitee com login 用户名 xff1a cakin24 二 为什么要端口映射 在启动容器时 xff0c 如果不配置宿主机器与容器的端口映射 xff0c 外部程序是无法访问容器的 xff0c 因为没有端口 三
  • 安装和删除Ubuntu双系统

    一 制作系统硬盘 1 在官网下载镜像文件 xff1a ubuntu 18 04 6 desktop amd64 iso 地址 xff1a 下载Ubuntu桌面系统 Ubuntu 注 xff1a 这里的LTS Long Term Suppor
  • 安装Intellij,编译第一个android程序出错

    今天安装了最新的Intellij社区最新版 xff0c 安装完成后 xff0c 发现编译第一个android程序 xff0c 出现如下编译错误 Cannot run program 34 D Android platform tools a
  • Bootstrap的select组件动态添加的数据不显示

    bootstrap中的select属性 xff0c 如果是动态添加的元素 xff0c 会出现页面不显示的问题 lt select class 61 34 form control form control lg 34 id 61 39 my
  • VScode 自定义主题颜色

    vscode其实已经有很多完善且好看的主题了 xff0c 但我总觉得每一个主题对我来说 xff0c 都有那么一点点不够完美 xff0c 比如亮色的主题 xff0c 颜色就没有深色主题那么好看 xff0c 对比度高 好不容易看到一个好看的主题
  • IIC详解,包括原理、过程,最后一步步教你实现IIC

    IIC详解 1 I2C总线具有两根双向 信号线 xff0c 一根是数据线SDA xff0c 另一根是时钟线SCL 2 IIC总线上可以挂很多设备 xff1a 多个主设备 xff0c 多个从设备 xff08 外围 设备 xff09 上图中主设
  • 飞控板不用看得高大上,本质就是STM32加那几个传感器,和平衡车板子差不多,是完全可以自己画的,甚至不用画,买个STM32核心板+十轴模块

    你自己画一块板子 xff0c 然后真正飞成了 xff0c 我觉得你会非常开心的 xff0c 这种感觉不一样的我觉得 xff0c 你说是不是 飞控我们不用看得高大上 xff0c 本质还是STM32加传感器 xff0c 可能和平衡车的差不多 x
  • 搜刮来的PID进阶

    PID 原理普及 1 对自动控制系统的基本要求 xff1a 稳 准 快 xff1a 稳定性 xff08 P和I降低系统稳定性 xff0c D提高系统稳定性 xff09 xff1a 在平衡状态下 xff0c 系统受到某个干扰后 xff0c 经
  • C语言中<>和“”引用头文件的区别

    区别如下 xff1a 1 lt gt 先去系统目录中找头文件 xff0c 如果没有再到当前目录下找 所以像标准的头文件 stdio h和 stdlib h等用这个方法 2 34 34 首先在当前目录下寻找 xff0c 如果找不到 xff0c
  • ACfly中的Parameters.c参数部分

    typedef enum MAV PARAM TYPE MAV PARAM TYPE UINT8 61 1 8 bit unsigned integer MAV PARAM TYPE INT8 61 2 8 bit signed integ
  • C++Primer第五版 习题答案 目录

    C 43 43 Primer第五版 习题答案 本文当作我学习C 43 43 的一个记录 xff0c 这里的习题答案并不是标准答案 xff0c 仅仅是我的理解 xff0c 如有错误 xff0c 请大家指出 xff0c 谢谢 xff01 参考的
  • C++Primer第五版 习题答案 第六章 函数(Functions)

    练习6 1 实参和形参的区别的什么 xff1f 形参在函数的定义中声明 xff1b 实参是形参的初始值 练习6 2 请指出下列函数哪个有错误 xff0c 为什么 xff1f 应该如何修改这些错误呢 xff1f span class toke
  • Dockerfile的CMD指令

    一 Docker的CMD指令 The main purpose of a CMD is to provide defaults for an executing container CMD在容器运行的时候提供一些命令及参数 xff0c 用法
  • usb供电相关

    1 针对集线器端口上的电涌警告 xff1a 在 设备管理器 gt 通用串行总线控制器 xff0d USB Root Hub gt 电源 中可以看到 xff0c 正在使用的USB设备的耗 由于频繁的插拔USB设备 xff0c 或在USB设备传
  • PHP四种设计模式

    1php常见开发模式 xff1a 1 单列模式 2 工厂模式 3 观察者模式 4 策略模式 2设计模式实例 1 单例模式 单例模式顾名思义 xff0c 就是只有一个实例 作为对象的创建模式 xff0c 单例模式确保某一个类只有一个实例 xf
  • CAN总线基础知识(一)

    1 xff0e CAN总线是什么 xff1f CAN xff08 Controller Area Network xff09 是ISO国际标准化的串行通信协议 广泛应用于汽车 船舶等 具有已经被大家认可的高性能和可靠性 CAN控制器通过组成
  • 【ROS Gazebo专题】二、Gazebo的使用上

    跳的比较快 xff0c 别人光介绍基础以及ros的基本操作就写了十几二十篇 xff0c 我一下就跳到了Gazebo这 xff0c 可怕有没有 其实原因很简单 xff0c 如果你将ros官网的基础篇章练习完了 xff0c 在最后一篇 wher
  • 程序员也该懂点UI细节

    虽然说项目开发过程中 xff0c 美工和程序各司其职 但是很多时候程序员本身也要知道一些UI设计的细节 一 每个页面的功能上要突出重点 比如说你首页是想引导更多用户注册的话 xff0c 你就要把注册按钮突出出来 如果你首页是你想引导用户更快