网页界面设计菜鸟教程

1、七个网页界面ui设计细节你掌握了吗

素马主张任何高大上的产品概念设计最终落地都化解为版式与图片。随着用户对产品使用的体验要求越来越高，新锐的版式加上精美的图片，还需要加上独特的动效设计（前端制作工艺）才行。那么，除了网页设计三大块版式、图片、动效外，我们这些看似搬砖，每天做细节设计的ui设计师，是否有大的研究和作为呢。今天分享的这篇文章，主要是针对ui界面中非常细小的设计技巧进行讲解。

01

-

使用色彩和字重来创造层次结构，而不是单纯的大小对比

在对UI 文本进行样式控制的时候，最常见的错误莫过于过度依赖字体大小差异来营造对比。

“这段文字重要吗？那么让它更大一些吧。”

“这段文字是比较次要吗？那么让它变小一点吧。”

单纯使用字体大小对比，所营造的对比并不够，尝试结合色彩和字重来营造更好的对比效果。

“这段文字重要吗？我们让它色彩更加大胆一些吧。”

“这段文字是比较次要吗？我们让它的色彩更浅一些吧。”

如果可以的话，你甚至可以采用两到三种颜色：

・主要内容采用深色（诸如标题，但是不要用纯黑）

・次要内容采用灰色（比如文章发表日期）

・辅助性内容采用浅灰色（比如页脚中的版权声明）

类似的，在UI设计的时候，通常两种不同的字重足以营造出优秀的层次感：

・大多数的文本采用正常的字重（400到500，具体取决于字体）

・对于需要强调的文字采用较重的字重（600到700，具体取决于字体）

应当尽量不要让正文部分字重低于400，因为这一部分字体本身尺寸已经较小，低于400会使得可读性不佳。如果你依然需要降低字重，那么不妨让字体色彩更浅一点，或者替换成其他识别度较强、字重相对较小的字体。

02

-

不要在有色背景上使用灰色的文本

在白色背景下，将黑色的文本改成灰色，是不错的淡化其视觉效果的做法，但是在彩色背景下这么做，则是另外一回事。

实际上，让白色背景下文本由黑变灰实际上是达到降低对比度的效果。

但是在彩色背景下，想要降低对比度是应该让文本逐步接近背景色，而不是改为灰色。

想要降低和背景色之间的对比，通常有两种方法：

1、降低白色文本的不透明度

降低不透明度，能够让背景的颜色透过来一些，以一种不冲突的方式降低前景文字和背景之间的对比度。

2、基于背景色手工挑选文本的颜色

当背景是图像或者图案的时候，半透明的文本会影响可读性，这个时候最好是基于背景主色调来挑选相应的文本色。

03

-

阴影设计

相比于采用大范围的扩散模糊阴影，使用微妙的垂直偏移阴影效果更明显，更自然，它模拟了最常见的光源特征，光线从上往下照下来所营造的阴影效果。

如果你对此有兴趣，Material Design Guideline 非常清晰地给你讲明白了这样的阴影的制作细节。

04

-

尽量少使用 Borders

盒子模型是网页前端最常用到的工具。当你需要在两个元素之间创建分隔的时候，尽量避免使用两者的边界直接接触。

虽然 Border 是分隔两个元素的好办法，但是它不是唯一的方法，使用过多会让整个布局的设计感降低，甚至会造成混乱。

所以你可以尝试下面的办法来规避：

1、使用 box shadow

box shadow 同样可以营造出边界感，而且更加微妙，并不会显得突兀，不会分散用户的注意力。

2、使用不同的背景色来区分

通常，相邻的元素背景只需要有微妙的差别就能够让人对他们进行区分。所以，你所需要做的就是在不同的区块采用不同的背景色，并且尝试删除边框，因为你根本不需要它。

3、增加额外的留白

创建元素之间的分离效果，并不一定要通过线框来表现，只要增加留白，让它们分隔开就行了。通过留白和间距来实现元素分组是UI设计中的常用手法。

05

-

不要让小图标无端地放大

当你在设计着陆页的时候，可能会突出产品的功能，这个时候你需要一些大图标来作为视觉锚点，这个时候你可能会去 Font Awesome 或者 Zondicons 这样的网站找几个免费的矢量图标，然后放大到符合你需求的尺寸。

它们都是矢量图标，照说是可以无损放大的。但是一个通常只有16×16 的图标放大三四倍，它固然无损，但是在视觉上就显得颇为不专业了：缺乏细节，总感觉过于矮胖。

可是，如果这些小图标是你唯一能够搞得到的素材的话，那么不妨试着将它置于另外一个带有颜色的图形当中：

这样的设计不仅能够让图标达到预期的视觉体积，而且看起来要比单纯放大，看起来细节会更多一些。当然，如果你手头不是那么紧的话，最好还是买几个大尺寸的高素质图标，比如 Heroicons 或 Iconic。

06

-

增加带有颜色的单边边框提升个性

当然，你可能并不是一个对于平面设计有着足够经验的设计师，但是依然可以让你设计的界面有足够的视觉吸引力。

最简单的方法，就是在界面的边框中的一边添加上单色甚至渐变的边框，这能让平淡无奇的界面一下子变得鲜活起来。

比如在警告弹出框的侧面：

或者在导航栏的底部，以示触发：

或者在整个页面的顶部：

这并不需要什么平面设计的经验，但是会明显强化设计感。

退一万步讲，你不知道选取什么颜色，简单，上Dribbble 的色彩搜索中随便找几个看着漂亮的颜色，其实也就够用了。

07

-

并非每个按钮都需要颜色

很多时候，按钮本身所处的语境和按钮上的文本内容会让人感到迷惑。像BootStrap 这样的框架就让设计师按照语境和语义来进行选择：

“这是一个积极的操作？让这个按钮是绿色的吧。”

“这是否是要删除数据？那么将按钮设置为红色的吧。”

的确，语义和按钮本身的设计息息相关，但是还有更重要的维度被忽略了，那就是层次结构。

网页上每个操作其实都位于整个交互金字塔的某个位置。绝大多数的页面其实只有一个主要操作，搭配一些不太重要的次要操作，以及为数不多的几个三级操作。

在设计这些交互的时候，通过层次结构来呈现这些交互的重要性是很重要的设计环节。

・主要操作应该很明显。采用实色、高对比度的按钮是很有必要的。

・次要操作应该明显，但是不突出，采用幽灵按钮或者和背景对比度较低的色彩是比较合理的。

・三级操作应该是可被发现，但是不明显的，他们最好被设计为链接。

“破坏性的交互所涉及的按钮难道不应该是红色的么？”

没必要！如果破坏性的交互所涉及到的按钮不是主要操作的话，让它按照次要操作甚至三级操作的按钮来设计就好了。

如果这样的操作是主要操作的话，可以让它是大号的、红色的带有加粗文本的按钮：

小结

-

以上总结的七个ui界面设计小细节处理技巧，都是大量的项目实战工作中总结出来的，容易理解也容易执行。有人可能说，连一个像素都在磕，又不是搞科学研究火箭发射，有必要吗？我只能说，这是一个工作的专业度问题和态度问题。也许一像素并不影响ui界面的美观问题，但是却是一位大师和普通工人的区别。

2、学习网页设计步骤

作为过来人我建议你这样学
1、先学美工。你有PHOTOSHOP基础，那就好办了。先去模仿一些简单的网站，做网页的效果图，
2、学习DREAMVER这款软件的基础知识，这个软件里面很直观的就会涉及到HTML语言，看多了你就懂了，一点不难。
3、通过以上学习，你就可以将整个效果图切割，放入DREAMVER中，做成html静态网页。
4、当你懂基础的网页制作后，以后你会自然的接触到，数据库，FLASH，网页脚本，服务器知识等很多方面的。一步一步来，不要急

祝你好运

3、网页设计（网页界面设计）的问题，谢谢！

你真牛，能带这么多网址。

4、如何制作一个网页界面？

可以试试看用一些 在线生成网页的 工具啊，可以在手机上播放任何视频非常简便。
epu360你可以试试 或者用coolsite360

5、网页界面设计

UI设计即User Interface(用户界面)的简称。简单的来说就是图形界面设计师（ps：这个职位可以不用写html这类的，但是最好要了解html，因为这样更有利于设计出来的页面适合后面的重构师开发）
然后还有就是上面提到的页面重构师：他的性质就是把页面设计效果图，用HTML+CSS改造成网页
然后这里面还会衍生一个前端开发的职位，他的性质是给上面的网页加入前端脚本，实现一个互动效果，比如我们常见的图片滚动，动画，还有表单验证等等常见的效果
然后就是后端程序员了（这里面可能还会衍生专门做数据库）反正这类人，就是把网站实现动态，与数据库对接
（ps：不做过多阐述，有不明白可以问我）

6、UI设计篇最基础教程，菜鸟应该怎样学UI设计

给小白同学一些学习建议，一般学习UI设计可以分为以下4个阶段。
第一阶段：素描手绘
也就是素描手绘这块，这个对于后期的UI设计有一个帮助。但并不是最重要的。
第二阶段：软件学习
现在的UI设计师一般要掌握以下几个软件，比如PS 、AI、 AE、 AXURE 等等。
第三阶段：理论学习
这个有内容就有点多了，因为是养成思维的必经之路。
比如配色、排版、字体设计三大构成，消费心理学、沟通学，以及思维导图、原型图，还有交互逻辑、规范、切图、了解程序、互联网思维、用户体验，还有一些网络营销都是需要学习的，因为这和产品商业价值有关。
第四阶段：临摹原创
前面的理论软件都会了，接下来就是临摹作品，及原创作品了。然后就是不断的做项目，参与互联网各种UI大赛及一些兼职网接单兼职，和去互联网公司做UI设计工作等。之后不断的逛一些比较不错的设计素材网站，长期坚持下去就能把自己的设计水平慢慢提升。
通过以上4个阶段学习下来，你会发现虽然基本的你都会了。如果是一点基础都么有，建议不要自学，自学特别辛苦；虽然网上有些教程，但是要学会，下来需要花费很大精力和时间，遇到不懂得问题，会没人帮你解决，建议还是报班系统学习下，虽然报班一般速度快点，消化慢点，但是只要自己有恒心，能坚持，相信也一定会学的很好

7、网页设计基础教程

http://tech.163.com/special/w/000915SQ/webmediatech.html
菜鸟教程，懂点电脑就可以看懂

8、在UI设计上，网页界面设计要学到哪些知识？

目前UI设计应用很广泛，涉及方面很多，网页设计需要的学习的有：div+css+ps+js+jq。
网页设计主要是利用Dreamweaver或者其他软件，用div+css布局，用js实现需要的效果
根据ps做好的图稿进行切图，用div+css美化网页就好了。

9、网页是如何实现的，Web UI设计理论入门教程

一、学习HTML5和CSS3基础
随着这移动互联网快速发展的时代，尤其是4G时代，HTML5+CSS3已然成为新一代的web前端技术。
随着HTML5的发展和普及，了解 HTML5 也将成为 Web开发人员的必修课。涉及到网页外观时，就需要学习 CSS 了，它可以帮你把网页做得更美观。
利用 HTML5 和 CSS3 模拟一些你所见过的网站的排版和布局(色彩，图片，文字样式等等)。
当然，远标Web前端开发课程第一阶段还会学习 PS设计工具使用和互联网UI设计理论。
二、学习Java，了解DOM
Java 是一种能让你的网页更加生动活泼的程序语言。学习 Java 的基本语法，学会用 Java 操作网页中 DOM 元素。
Web前端开发课程第二阶段完全可以实现大家平常喜欢玩的 2048 游戏。(是不是感觉挺有意思)
接着学习使用一些 Java 库，比如 Jquery 是大部分 Web开发人员都喜欢用的，通过 Jquery 可以有效的提高 Java 的开发效率。
三、学习Web前端核心
学习 Jquery 之后，大家就要学习 HTML5 高级阶段(HTML5 Canvas 绘图、HTML5 SVG、音频和视频处理、表单处理、表单验证...等)
四、学习HTTP协议及Server端技术
服务器端脚本编程(后台开发)也是Web开发人员的基本功之一。
要构建动态页面通常会使用到数据库，通常PHP使用Oracle、MySQL数据库。
对于Web服务器来说，Apache 一个就已经是了。那么Apache、php、数据库，该怎么理解它们的关系?
1、Apache是服务器基础，php和数据库都需要Apache来协调工作
2、php是脚本解释，如果不用php，那么Apache出来的东西就只是静态的，而不能在服务器实现功能
3、数据库完全可以单独使用，但是和Apache、php一起，则是由php代码调用数据库接口，而apache就负责解释php代码，让他能真正地实现对数据库的调用
五、学习Web前端高级技术
当你掌握了HTML5，CSS3，Java等技术之后，就应该找一个Web框架加快你的Web开发速度，使用框架可以节约你很多时间。
学习的Bootstrap是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVA 的，它简洁灵活，使得 Web 开发更加快捷，是web前端开发者最喜欢，也是现在企业里最常用的前端框架。
Angular JS是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC编程、模块化、控制器、路由、事件绑定等等。
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。