热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

UI设计的基本原则--贾伟

在这一次的任务中,我负责的是UI设计,以下是我的一些感触:现在我把之前在《写给大家看的设计书》中看到的设计的四大基本原则转述给大家,虽然这些东西可能大家都知道,但是具体说出来可能会更加注意到。各

在这一次的任务中,我负责的是UI设计,以下是我的一些感触:

 

现在我把之前在《写给大家看的设计书》中看到的设计的四大基本原则转述给大家,虽然这些东西可能大家都知道,但是具体说出来可能会更加注意到。各位在实现前端界面的时候一定在遵守这些原则:

 

  1. 亲密性,彼此相关的项应该靠近,归组到一起。如果多个项之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个独立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。这些在我们的网站设计中,可能不太需要,因为我们的模块是分好的。
  2. 对齐,任何东西都不能随意摆放。每个元素都应该与页面上的另一个元素存在某种视觉联系。这样能建立一种清晰,精巧而且清爽的外观。我们在网站设计中,均采用左对齐,有些地方同时有右对齐的属性,但是要尽量避免居中对齐,有时候居中对齐,反而给人一种不整齐的感觉!但是不相关的东西就没必要对齐,否则会让人把不相关的东西认为是一样的。
  3. 重复,让设计中的视觉元素在整个作品中重复出现。可以重复颜色,形状,材质,空间关系,线宽,字体,大小和图片,等等。这样一来,既可以增加条理性,又增强统一性。所以我们的设计中,要达到的效果是在整个网站的统一性,就是每个分版都有重复的样式,这样才不会让用户点了一个界面之后以为已经跳出网站了。边框相同是一点体现,另外我现在的设计因为颜色还没定好,所以每个小版面的样式没怎么统一,这样是不对的。希望大家在实现时,采用相同的样式。
  4. 对比,要避免页面上的元素太过相似。如果决定元素(字体,颜色,大小,线宽,形状,空间等)不相同,那就干脆截然不同!让页面引人注目,对比是最重要的一个元素。你得让别人知道你是故意做的不一样,而不是不小心做的不一样!

这些基本原则是设计的重中之重,但是必须在实践中多多使用才能有所收获。

 

 


推荐阅读
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • 生成对抗式网络GAN及其衍生CGAN、DCGAN、WGAN、LSGAN、BEGAN介绍
    一、GAN原理介绍学习GAN的第一篇论文当然由是IanGoodfellow于2014年发表的GenerativeAdversarialNetworks(论文下载链接arxiv:[h ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • 家装日记六:家具采购和瓷砖选择
    本文记录了作者进行家装的过程,包括家具采购和瓷砖选择。作者介绍了自己家的装修风格以及选择烤漆家具和红白系列的原因。作者还提到了装修风格以简约为主,不可以太花哨的要求。最后,作者提到了价格较贵的问题。 ... [详细]
  • 本文讨论了当某位排位靠前的涉众提供了一张精美的界面图片时,是否可以将其作为设计约束。同时还探讨了高质量素材和愿景之间的关系,以及老大自身的软件方法和建模技能。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • sklearn数据集库中的常用数据集类型介绍
    本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
  • 本文介绍了一些好用的搜索引擎的替代品,包括网盘搜索工具、百度网盘搜索引擎等。同时还介绍了一些笑话大全、GIF笑话图片、动态图等资源的搜索引擎。此外,还推荐了一些迅雷快传搜索和360云盘资源搜索的网盘搜索引擎。 ... [详细]
  • 【MicroServices】【Arduino】装修甲醛检测,ArduinoDart甲醛、PM2.5、温湿度、光照传感器等,数据记录于SD卡,Python数据显示,UI5前台,微服务后台……
    这篇文章介绍了一个基于Arduino的装修甲醛检测项目,使用了ArduinoDart甲醛、PM2.5、温湿度、光照传感器等硬件,并将数据记录于SD卡,使用Python进行数据显示,使用UI5进行前台设计,使用微服务进行后台开发。该项目还在不断更新中,有兴趣的可以关注作者的博客和GitHub。 ... [详细]
  • 本文研究了使用条件对抗网络进行图片到图片翻译的方法,并提出了一种通用的解决方案。通过学习输入图像到输出图像的映射和训练相应的损失函数,我们可以解决需要不同损失函数公式的问题。实验证明该方法在合成图片、重构目标和给图片着色等多个问题上都很有效。这项工作的重要发现是不再需要人为构建映射函数和损失函数,同时能够得出合理的结果。本文的研究对于图片处理、计算机图片合成和计算机视觉等领域具有重要意义。 ... [详细]
  • 本文介绍了在Vue项目中如何结合Element UI解决连续上传多张图片及图片编辑的问题。作者强调了在编码前要明确需求和所需要的结果,并详细描述了自己的代码实现过程。 ... [详细]
  • 也就是|小窗_卷积的特征提取与参数计算
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了卷积的特征提取与参数计算相关的知识,希望对你有一定的参考价值。Dense和Conv2D根本区别在于,Den ... [详细]
  • Python瓦片图下载、合并、绘图、标记的代码示例
    本文提供了Python瓦片图下载、合并、绘图、标记的代码示例,包括下载代码、多线程下载、图像处理等功能。通过参考geoserver,使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法,供读者参考使用。 ... [详细]
  • 计算成像的原理与应用研究
    本文探讨了计算成像的原理与应用研究。首先介绍了小孔成像实验和软件方面的相关内容。随后从傅里叶光学的角度简单谈了成像的过程。成像是观测样品分布的一种方法,通过成像系统接收光的强度来呈现图像。视网膜作为接收端接收到的图像实际上是由像元组成的矩阵,每个元素代表相应位置像元接收光的强度。大脑通过对图像的分析,得出一系列信息,如识别物体、判断距离等。计算成像是一种采集记录系统,通过处理数据得到样品分布与像的对应关系,用于后续问题的分析。 ... [详细]
author-avatar
mzyzzyk
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有