首页 > web前端 > html教程 > 从 Sketch 到 CSS_html/css_WEB-ITnose

从 Sketch 到 CSS_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:29:01
原创
1624 人浏览过

以前先接触的 CSS,后来又接触了 Sketch, 如今再反过来使用 CSS 的时候,发现设计的思想基本都是共通的。于是,笔者希望通过此文总结下最近所学,希望能对大家有所帮助。

Article Structure

  • UI Design 的基本思想
  • 如何将 Design Ideas 运用到 Sketch 中
  • 如何将 Design Ideas 运用到 CSS 中

UI Design 的基本思想

Limitations:

  • Layout: 确定自己页面的尺寸和布局,是 Mobile 还是 Desktop. 不同的设计尺寸有对应的排版选择。同时考虑如果是响应式设计,如果让排版在不同尺寸间无缝转化。
  • Branding:一个产品需要有自己的品牌意识,因此设计风格要统一和谐。可以从 Logo 配色开始下手,提取 Color Palette,从而统一设计稿的颜色。此外,可以设计一个比较新颖的元素 [动效或设计] 合理运用到不同尺寸的设计中,给用户深刻印象,强化品牌意识。
  • Flat Design:已经 2016 年了,扁平化设计仍然是世界的潮流。高光阴影交错,纹理齐飞的拟物化设计已经一去不复返。简单的设计如今更受到用户的喜欢。

Opportunities:

  • focus
  • native functionality
  • known pattern

Focus example

产品的核心功能是什么?这是 UI 设计时可以说最重要的事了。看看 Facebook 和 Dropbox 的设计可知,前者希望我们注意朋友间的状态,后者希望我们注意自己的文件。视觉中心是图片和黑色加粗文字,主色调灰色,辅助一个强调的蓝色,简单的 Icon,一致的网格布局就是一个 Well-designed 的设计。

Native functionality examples

在技术发展日新月异的时代,合理运用设备的功能可以设计出许多酷炫的功能。比如 Uber 运用手机 GPS 实时定位出租车,Instagram 运用摄像头进行照相。当某一硬件功能出现升级换代时,Design something new 的机会便出现了!

Known pattern examples

看看 10 年的设计吧,有没有丑的感觉呢 [背景按钮,多种字体,重纹理阴影,可见网格分隔]。如今在 Material Design 和 IOS Interface Design 的指导下,网站和应用的设计已经越来越统一,用户体验也越来越好。

Grids and Layout:

  • anatomy: columns, gutters, margins
  • baseline grids
  • mobile grids

布局布的好,基本丑不了 – 野子Joey

确定页面的宽度,根据需求确定列数,每列的宽度,列与列之间的间隔,以及内容两侧的间隔,使用软件制作处自己的网格布局 [Sketch 可以很容易的做到这点], 也可以在适当处添加水平辅助线帮助设计, 这样你所有元素的大小,元素间的 margin 和 padding 也都统一了,和谐自然产生美啊。

Columns, gutters, margins, baseline

如果是 Mobile Design, 为了精确布局,也可以创建全网格布局。

Mobile Grids

Typography:

  • typeface choice
  • font size and styles
  • white space, contrast, legibility, readability
  • forming a style guide

字体的选择,对于 IOS,默认为 Helvetica Neue。 对于 Android, 默认 Roboto, 这两种看起来蛮像的,区别不大。对于 App 设计,一种字体已经足够,当然你可以再选择一种 Serif 字体强化标题或作为品牌特征。

Roboto vs Helvetica Neue

注意 Facebook 的字体设计,人名,时间地址,和正文分别用的不同的字体大小,粗细和颜色用于区分,在该对比的地方一定要强化对比的程度,否则干脆一致。

该留白的地方要留白,人都喜欢宽敞的地方,页面也需要留白喘气,不信你看:

whitespace vs no whitespace

同时注意文字长度要适中,英文每行 7 - 9 个单词,中文每行 15 - 22 的字,行高 1.3 - 1.7 便于阅读。字体颜色和背景颜色要有足够的对比度反差,便于阅读[不要将浅色字体放在亮背景上,或者深色字体放在暗背景上,如果图片作为背景,一般在图片上加一层透明遮罩]。最后是内容上的优化,文字的含义要通俗易懂 [考虑可能有非母语用户使用你的产品哦]。

Color:

  • background
  • text: main, muted, highlighted
  • assist: shadow, divider

一个简单且实用的思路去选取颜色是,背景色采用白色或者浅色,从 Logo 中选取一种颜色作为主颜色,然后再选取主颜色的对比色作为强调色,透明黑色作为阴影,不同灰度灰色作为边框,分割线,柔和字体颜色。

Color Palette

Other color considerations:

  • give each color a meaning
  • contrast
  • limit the use of colors
  • consider real content

颜色有其一定的意义,使用每一种颜色前先想想为什么我要用这个颜色 [比如你不会想把团购网站设计成黑色幽默风格]。主色调和强调色之间一定要有对比。主要颜色尽量不要超过三种,避免给用户造成过高的视觉负担。考虑到 App 的实际应用场景,不同的用户会上传不同的照片,因此背景,字体颜色尽量选取 Web Safe Colors,在实际场景不断改进完善。

更多颜色内容可参考:Material Colors.

如何将 Design Ideas 运用到 Sketch 中

软件框架层大家可以参考我之前写的这篇文章:如何用 Sketch 进行网页设计。

这里我主要以一个 App 页面设计作为范例,补充一些设计细节上的内容 [也算是我踩坑的一些经验吧]。

App Demo

  1. 设计的时候打开 Material Design 或者 IOS Guidelines, 边查看边设计,大大提升操作效率,看多了很多数值自然而然就记住了 [最主要是字体大小]。
  2. 如果尺寸宽度为基数,放大一倍进行设计,这样就不会总为那 1px 对齐纠结了[逼死处女座系列]。同时也更方便 grids 宽度的设计,偶数的公约数比较多哈。Magin 尽量选择 grids 的一倍或多倍,便于对齐。
  3. 辅助颜色板[灰度类的]最好有自己的模板,以免每次都到重新设置,节约时间。能用透明黑色就不用灰色,更清晰。不同明度的同色相颜色可以直接加透明黑色遮罩层就行模拟。
  4. 善于重复使用相似元素,改变布局即可,可以极大的节省实际操作时间。必要时可以创建 Symbol 或 Styled Text 方便日后重复使用。孰能生巧,实践中每个人都能总结很多适合自己的经验。

如何将 Design Ideas 运用到 CSS 中

User Interface Design 绝对不是仅仅画界面,界面做的再漂亮,没有考虑实际运用场景,开发不出来,或者不具有实际应用价值,只能称之为"花瓶"了。因此自己设计的时候,尽量多站在产品和开发的角度去思考问题,怎么设计更能突出功能,怎么设计更能便于开发,实际交互时的效果是怎样的, 这才是一名合格的 User Experience Designer 应有的品质。因此,国外招聘中都要求 User Experience Designer 了解 Web 前端语言 [Html, CSS, Javascript], 作为技术层面的考核。

随着 CSS 预编译处理器的流行 [后文用 Sass 作为例子],极大的方便了前端书写 CSS. CSS 我仅仅是新手水平, 这里我主要讨论如何使用 Design 的思想写出更方便使用的 Sass.

//@MEDIA QUERIES//确定尺寸,自适应布局$media-l: 1200px;$media-m: 900px;$media-s: 600px//GRID//统一布局,padding/margin 均可用, 高度,宽度尽量为其倍数$grid: 10px$grid-double: $grid * 2;$grid-third: $grid * 2;$grid-half: $grid / 2;//COLORS//用实物或功能命名$color-bodybg: #fafafa;$color-primary: #f0214f;$color-accent: #505eb1;$color-text: #555;$color-muted: #aaa;$color-border: #c3ddc8;$color-grey-mist: #f5f5f5;$color-grey-platinum: #bbb;$color-mask: rgba(0,0,0,0.1);//FONTS//字体,大小,粗细//1种或2种字体$font-family-1: Roboto, sans-serif;//一般4种大小 [header text, body text, remark, other]$font-header: 150%;$font-body: 100%;$font-remark: 70%$font-other: 85%;//三种粗细即可 [light, normal, bold]$font-light: 300;$font-normal: 400;$font-bold: 700;//Z-INDEX//用于 Material Design 不同层级的使用$z-index-header: 1000;$z-index-sidebar: 1100;$z-index-notify: 1200;$z-index-modal: 1300;
登录后复制

个人觉的 Sass 的 mixins 用处不大,太过繁琐,CSS 就是 CSS, 没必要搞得 Javascript 一样过度程序化。涉及到 vender-prefix 的部分, 推荐使用 Autoprefixer。Nesting 加上伪类建议不要超过4层,否则后期修改比较麻烦,适当使用 > 子元素搜索符即可。

Conclusion

无论是用 Skech 设计界面或是直接 CSS 设计界面,保有 Design Ideas 是最重要的,工具不是重点,思想才是王道。CSSketch 这款插件甚至支持直接用 CSS 修改 Sketch File, 感兴趣的同学可以去试用下。各大应用商店应用数不胜数,没事干下几个玩玩,多注意观察主流应用的设计细节, 尤其是交互细节 [下拉,悬浮,空状态,初次登陆状态,引导界面],总结为己用。

我说的都是错的,如果不自己思考的话。 – 野子Joey

Resources

  • Mobile UI Design for Beginners
  • Variables: The Backbone Of CSS Architecture
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板