程序员也该懂点UI细节

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

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

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

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

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

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

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

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

三、导航的重要性。

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

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

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

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

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

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

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

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

七、搜索的处理

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

八、忌用长表单

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

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


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



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

相关文章

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

程序员必备心理学——心流

心理学之心流 前言一、“心流”是什么?二、心流的好处二、如何进入心流心流状态的四个阶段第一个阶段:挣扎第二个阶段:放松第三个阶段:心流第四个阶段:巩固 进入心流的技巧 总结题外话 前言 你是否常常感觉自己明明学习了一整天,但是就是感觉没有太多的收获。这个时候除了你的学习方向等问题之外,也可能是你的学习方法太低效了。作者本人就经常有这种情况,好在偶然间在b站刷到一个大佬的这个心

Post-Training有多重要?一文带你了解全部细节

1. 简介 随着LLM学界和工业界日新月异的发展,不仅预训练所用的算力和数据正在疯狂内卷,后训练(post-training)的对齐和微调方法也在不断更新。InstructGPT、WebGPT等较早发布的模型使用标准RLHF方法,其中的数据管理风格和规模似乎已经过时。近来,Meta、谷歌和英伟达等AI巨头纷纷发布开源模型,附带发布详尽的论文或报告,包括Llama 3.1、Nemotron 340

移动UI:分类列表页、筛选页的设计揭秘。

移动UI的列表页设计需要考虑用户体验和界面美观性,以下是一些建议的设计要点: 1. 列表项的展示: 列表页应该清晰地展示各个列表项,包括标题、副标题、缩略图等内容,以便用户快速浏览和识别。可以使用卡片式布局或者简洁的列表布局。 2. 搜索和筛选: 如果列表项较多,应该提供搜索和筛选功能,方便用户查找感兴趣的内容。搜索框和筛选条件可以放置在页面顶部或者底部,以便用户方便操作。