网页UI设计:表格与表单中的信息


此原型是营销数据分析后台的表格,表格包含了很多信息,不过设计者将信息进行了“轻重缓急”的处理,看起来非常不错。

ICO分析

Campaigns列:标题与时间混排的方式很有新意。对标题又使用加粗+颜色+下划线表现出了重要又可点的链接,时间附属信息用灰色显示

Recipients列:最直接的设计来表现Campaigns的效果,使用大且着重的字体。

Open列:将实际数据与对应的活动百分比进行上下居中排列,打开数使用了粗体和蓝色,百分比使用了括号+灰色+小号字,看起来层次清晰

Clicks列:同Open列,颜色进行了变化,更容易视觉上更容易分隔。

ViewReport:用小图标代替了文字,让整个表格更灵活。

时间: 2025-01-21 15:16:29

网页UI设计:表格与表单中的信息的相关文章

关于网页UI设计的10条适用法则

  一个主观上很想多多学习的设计新手在工作中最常遇到的状况应该是-没人愿意教!(ps:传统思想告诉我们"教会徒弟,饿死师傅",所以新人们的如此遭遇也无可厚非;But-另一种可能性是-师傅真的很忙!) Anyway,AnyForWeb今天为菜鸟们奉上关于网页UI设计的10条适用法则,希望能让大家脑洞大开,在设计中得到帮助和启发. 1.纠结的时候,让自然为你做决定! 遵循自然规律的设计总是因为贴近万物本源而受到更多人的宠爱,因此,当你举棋不定的时候,你可以选择将设计代入大自然定律中,让自然

网页UI设计参考:18个伟大的UI的原稿

不管你是不是设计一个网页的UI或是iphone的app,用一个框架图来开始时一个很好的主意.下面是18个伟大的UI的原稿.好好看看吧.(下面的英文都是名词,翻了反而不好) NationWide / NASCAR: 5 Years of Firefox: Links:

11个最好的UI设计

  UI设计可以成就或者毁掉你的网站和应用:怎么做才对呢? 在网页设计中,好的用户界面和UI设计的宗旨在于帮助用户尽可能简单和高效的完成特定任务.虽然视觉和感受也很重要,但是好的UI设计的核心永远是功能:对于导航来说,必须是达到不可见的直观.只要用户会迷路或者不知道去哪儿,这个UI设计就是失败的. 一些例举的网站和应用可能有不同的设计原则和功能,但是它们有一个共同点-高效的UI设计,完美解决上面的问题甚至更加到位.让我们来看看它们是如何做到的. 01.栅格 Grid 应用"栅格"顾名思

jQuery的动态表格动态表单

这个例子就是通过jquery对dom进行操作,达到动态的实现HTML变换的问题. 动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1.3.1.pack.js"></script> <script language="javascript"> $("#addjobline").css

精通CSS+DIV网页样式与布局--设置表单和表格

        表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识:                   首先我们的首先表格中的标记,代码和运行效果如下所示:          <span style="font-size:18px;"><html> <head>

UI设计技巧:网页结构清晰明了的结构设计

文章描述:在界面设计的三大元素中,结构是基础,值得深入研究,再配合颜色和尺寸的运用,才能设计出友好的界面. 构建界面视觉层级的元素有颜色的显著程度,图片.文字的尺寸大小,还有最基础的,内容的组织结构. 结构设计是指对界面内容进行分组,对界面中的信息.数据进行设计使之结构化呈现的过程. 好的结构设计能使界面信息传达更加清晰.快捷.那么,如果进行结构设计呢? 结构设计---内容的分组 使用线.框.背景色来分组 这是最常见的分组方式,在UI设计中历史悠久. 使用线来分组 使用框来分组 使用背景色分组

Dreamweaver如何在表单中插入表格

  一.在Dreamweaver在表单中插入表格 1. 点击鼠标,将光标定位在表单框线内部,然后插入表格,和在普通文档中的方法一样.如下图所示: 在"代码"视图中可以查看源代码: 2. 插入表格以后,在表格的单元格中再插入表单的对象或者域标签.如下图所示: 二.提示 在表单中插入表格,能使表单对象和域标签的垂直或水平排列更加整齐.美观. 在表单中插入表格时,一定要注意使所有的 标签都包括在 标签之间.

Dreamweaver在表单中插入表格

  一.在Dreamweaver在表单中插入表格 1. 点击鼠标,将光标定位在表单框线内部,然后插入表格,和在普通文档中的方法一样.如下图所示: 在"代码"视图中可以查看源代码: 2. 插入表格以后,在表格的单元格中再插入表单的对象或者域标签.如下图所示: 二.提示 在表单中插入表格,能使表单对象和域标签的垂直或水平排列更加整齐.美观. 在表单中插入表格时,一定要注意使所有的 标签都包括在 标签之间.

网页设计分析:UI设计中的包容性设计

中介交易 SEO诊断 淘宝客 云主机 技术大厅 近年来,移动互联网行业快速发展,互联网已经成为人们日常经常使用的信息交流和获取渠道.虽然智能手机和平板等移动设备更新换代的速度非常快,可是目前大多数网页和应用在设计之初没有考虑到特殊人群的需要,就算设备再强大,这类人群在访问网页或使用应用时还是会遇到很多困难.于是乎,"包容性设计"的概念就被引入到了UI设计中. 那么,什么是包容性设计?英国标准协会(2005)将包容性设计定义为"主流产品或服务的设计能为尽可能多的人群所方便使用-