程序员也该懂点UI细节

2023-11-21 02:38
文章标签 程序员 ui 细节 懂点

本文主要是介绍程序员也该懂点UI细节,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

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

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

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

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

三、导航的重要性。

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

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

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

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

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

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

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

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

七、搜索的处理

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

八、忌用长表单

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

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


这篇关于程序员也该懂点UI细节的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element

Python中的可视化设计与UI界面实现

《Python中的可视化设计与UI界面实现》本文介绍了如何使用Python创建用户界面(UI),包括使用Tkinter、PyQt、Kivy等库进行基本窗口、动态图表和动画效果的实现,通过示例代码,展示... 目录从像素到界面:python带你玩转UI设计示例:使用Tkinter创建一个简单的窗口绘图魔法:用

element-ui下拉输入框+resetFields无法回显的问题解决

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的... 目录描述原因问题重现解决方案方法一方法二总结描述第一次进入页面,不做任何操作,点击重置按钮,再进行下

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

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

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

vscode中使用go环境配置细节

1、在docker容器中下载了go的sdk 2、在/etc/profile.d/go.sh里填入如下内容: #!/bin/bashexport GOROOT=/home/ud_dev/goexport PATH=$GOROOT/bin:$PATH  3、设置go env go env -w GOPROXY=https://goproxy.cn,directgo env -w GO

使用WebP解决网站加载速度问题,这些细节你需要了解

说到网页的图片格式,大家最常想到的可能是JPEG、PNG,毕竟这些老牌格式陪伴我们这么多年。然而,近几年,有一个格式悄悄崭露头角,那就是WebP。很多人可能听说过,但到底它好在哪?你的网站或者项目是不是也应该用WebP呢?别着急,今天咱们就来好好聊聊WebP这个图片格式的前世今生,以及它值不值得你花时间去用。 为什么会有WebP? 你有没有遇到过这样的情况?网页加载特别慢,尤其是那

LabVIEW程序员是怎样成长为大佬

成为一名LabVIEW编程领域的“大佬”需要时间、实践、学习和解决复杂问题的经验。尽管LabVIEW作为一种图形化编程语言在初期可能相对容易上手,但要真正成为精通者,需要在多个层面上深入理解。以下是LabVIEW程序员如何逐步成长为“大佬”的路径: 1. 打好基础 LabVIEW的大佬们通常在初期会打下非常坚实的基础,理解LabVIEW编程的核心概念,包括: 数据流编程模型:Lab

分享MSSQL、MySql、Oracle的大数据批量导入方法及编程手法细节

1:MSSQL SQL语法篇: BULK INSERT      [ database_name . [ schema_name ] . | schema_name . ] [ table_name | view_name ]         FROM 'data_file'        [ WITH       (      [ [ , ] BATCHSIZE = batch_siz

【LVI-SAM】激光雷达点云处理特征提取LIO-SAM 之FeatureExtraction实现细节

激光雷达点云处理特征提取LIO-SAM 之FeatureExtraction实现细节 1. 特征提取实现过程总结1.0 特征提取过程小结1.1 类 `FeatureExtraction` 的整体结构与作用1.2 详细特征提取的过程1. 平滑度计算(`calculateSmoothness()`)2. 标记遮挡点(`markOccludedPoints()`)3. 特征提取(`extractF