目錄
Article Structure
UI Design 的基本思想
如何将 Design Ideas 运用到 Sketch 中
如何将 Design Ideas 运用到 CSS 中
Conclusion
Resources
首頁 web前端 html教學 从 Sketch 到 CSS_html/css_WEB-ITnose

从 Sketch 到 CSS_html/css_WEB-ITnose

Jun 24, 2016 am 11:29 AM

以前先接触的 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
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

See all articles