UI设计细节 — 表单设计技巧(1)

1、在明亮的背景下,给白色的文字中添加一个微妙的阴影不仅能让文字更清晰,还能让文字更“流行”。

2、让梯度渐变显得更加充满活力的办法就是通过调整色调(hue)10º或20ºmax。


3、按钮交互变化:当鼠标悬停时,增加阴影和button整体上移1px。参考网站:Stripe

4、给卡片一个轻微的,垂直的偏移有助于使它们看起来更自然。

5、为使你的设计更易于阅读,对齐文本是最简单的方法。

6、纯灰色的文本总是在有颜色的背景上显示“off”。一个快速的解决办法是在你的文本中加入一点背景色调。但在复杂的背景下做这件事时要小心,因为它可能会给人一种“幽灵”的感觉。

7、当使用图标时,如果图标的字重大于文本的,那么图标的色相通常会轻于文本的。

8、使用像箭头或复选标记而不是标准项目符号这样的泛型图标是为无序列表增加视觉兴趣的好方法。

9、为你的主要区域顶部添加一个颜色(或渐变)提示 (4 到 6px) 是一个简单的技巧, 使你的设计更生动

      (这个技巧也适用于modals、面板)

10、除了大小和重量,使用颜色和对比度是创建排版层次结构的好方法。

11、所有大写字母有时很难阅读。考虑使用字母间距给你的文本多一些留白。

12、为保证圆角像素完美性, 通常需要在网格上画圆圈, 并连接他们, 而不是依靠草图的半径。


13、线条不仅很好地划分内容, 而且使断开连接的内容感觉更紧密。

14、为使页面垂直距离上看着更加有节奏感,使用倍数来定义你的间距, 并提供一个公式, 以证明您的选择。

15、对于banner的制作:照片 + 加粗颜色 + 混合模式: 相乘+创建高对比度的文本。

16、页面上的重叠元素是创建深度和鼓励用户滚动的好方法。

17、对于负次要操作, 一个微妙的链接通常比一个大的粗体按钮更管用。(注意:请确保您有一个确认步骤)

18、太多的边框会使设计看起来非常凌乱。下面是一些更微妙的想法:

19、双列表单布局对于组织长表单和在不使用笨拙的长表单域的情况下填充更宽的屏幕非常重要。

20、字体大小并非总是强调或取消强调文本的最佳方式, 请尝试使用颜色和字体粗细来替代。

21、设计好的表可能会很困难, 但下面的做法可以使表格设计看起来有些不同:

22、在应用程序中的图标, 试着在它们后面放一个形状, 给它们一个背景颜色。

23、处理相互冲突的图像?尝试给他们统一的灰度或使用统一的颜色, 使他们更一致。

24、下拉列表可以不仅仅是一个无聊的链接列表。他们只是盒子, 你可以用他们做很多事情;

        例如, 当您要添加支持文本时, 这种两列布局很棒:

25、这种 "眉" 标题处理不仅是很好的澄清你的信息, 但它也使一个无聊的标题 + 身体模式看起来更有趣。

      这种小的、大写的文本处理方法对于链接列表 (如此垂直导航或页脚站点地图) 的标题也很有用。

26、对所有文本使用相同的行高是一个非常微妙但常见的错误(1.5倍行高可以很好地做为拷贝参考), 但

随着文本变得更大, 你的线高度应该变得更紧。

27、"灰色" 并不意味着灰色。试着用蓝色或褐色来饱和你的灰色, 给人冷却或变暖的感觉。

28、如果你想要不同大小的文字 “感觉” 一样的重量, 使较大的文本更薄, 更小的文本更大胆。

29、课程定价部分设计参考:

30、重叠图像是向界面添加深度的好方法, 使其看起来更有 "设计”感。

      使用与背景颜色匹配的边框来创建区别, 并保持看起来干净的东西。

31、不要害怕 "在数据库之外思考"-您的 UI 不需要与数据的字段和值进行一对一的映射。

      下面是一些您可以用更有趣的方式来呈现 "field: value" 数据的一些想法:


原文链接:Little ui details

原文作者:Steve Schoger            Grant McAllister

内容部分经过本人筛选及在原文基础上做了适量的删减。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_x阅读 15,967评论 3 119
  • jQuery.each(array, callback ) jQuery.each( object, callba...
    panw3i阅读 109评论 0 0
  • 水彩:MG 史明克 纸:梦法儿 笔:紫豪
    是小壳吖阅读 309评论 2 4
  • 每年的3月22日至4月27日之间,春分以后的一个星期五(每年复活节的日期都不一样),在很多西方国家会过一个叫做“好...
    乐在四季阅读 351评论 0 0
  • 五月的天气,乍暖还寒。但我的心确是无比的温暖。 感恩老公,每天为我做晚饭,洗碗。 感恩他,是他让我遇见更好的自己。...
    悦琴1818阅读 86评论 0 0