网页界面ui设计细节有哪些

UI即User Interface(用户界面)的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。互联网新科技兴起，从国外引进了UX设计师的感念，但是公司内部协作分的更细，分为了：UI设计师(视觉)和UE设计师(交互)，设计师彻底告别了代码，更专注于我们所说的：用户体验。

UI设计师面向的是产品使用者(用户)，由于用户的留存会决定产品的生死，所以他们要听的是用户的话。即使上层领导与你的审美有很大差别，但也决不敢拿产品的命运打赌。用户留存数据、内测用户的反馈等是你做产品迭代的原因所在。甚至有时候，漂亮、充满创意的界面产生的效果反而比较差。

在开展设计产品UI之前，我们应当根据功能的优先级或者相关调研数据，结合常规设计原则来建立应用的界面交互框架，即交互线框图。交互线框图须对零碎且尚未流程化的功能信息进行归纳和整理，首先要交代应用中都有什么东西，并设计合理的信息结构，明确这些元素的具体位置，最后再详细描述用户与界面元素之间的交互行为，包括如何操作以及相应的操作反馈、跳转路径等。

UI设计师软件基础与矢量插画绘制：Photoshop、illustrator、矢量插画绘制、CINEMA 4D 三维立体软件、蓝湖等。

网站设计与制作：网站概述、专题设计、营销类页面设计、web前端与整站制作、移动端布局、门户网站设计、H5营销设计与交互动效。

智能设备交互界面设计：APP介绍与产品分析、APP需求分析与手绘原型图、多系统图标设计、三大平台设计规范、产品交互设计、AE动效设计、标注、切图、原创APP产品项目实战等。蓝湖倒是可以解决

　随着信息化时代的快速到来，网页设计师已经成为了一门新兴职业。简单机械的将信息罗列在一起的页面不再能满足人们的审美需求，那些依靠未加修饰的和随意使用的色彩制作出来的页面，在没有欣赏价值的同时，也逐渐失去了用户群。所以，越来越多的网站开始注重页面的视觉效果，他们将计算机技术与艺术设计结合起来，在保证网站具有实用性的同时，也使页面看上去更美观、更舒适。

　在艺术创作中，无论哪一个门类都离不开色彩，合理的使用颜色能够让平淡无味的画面瞬间变得精彩。因此，色彩也被看做是设计中重要的一个因素。网页的色彩设计是影响网站页面效果的关键因素之一，它可以影响用户对网页性质的判断，对站点信息的理解，为页面效果注入了生机和活力。所以说，一个好的网页设计离不开对色彩的研究和使用。

　在网页色彩的设计中，从色彩构成中“色相”的概念出发，可大致将网页色彩的搭配方法归纳为以下几种：

　其一，同色系色彩搭配。即利用同一色相的不同明度、纯度的变化来进行配色组合，例如柠檬黄、中黄和土黄的搭配，这些色彩由于色相的统一，所以在页面中很容易调和。

　其二，邻近色搭配。即色相环上相邻近的颜色，如绿色和蓝色，红色和**等。这种方法与“同色系色彩搭配”相比能产生相对丰富的画面效果。

　其三，互补色搭配。在色相环中，处于直径位置的两色为互补色，如蓝色与橙色，红色与绿色，紫色与**。互补色组合在一起使用时，会呈现强烈的相互辉映的视觉效果，具有很强烈的视觉冲击力。

　其四，对比色搭配。如紫色与绿色，蓝色与**等。这种方法搭配出来的颜色由于色彩反差较大，所以需要第三种调和色来协调画面。

　在色彩构成中，从“明度”的概念出发，还可以将网页色彩分为高明度，中明度、低明度等类型，在这其中，低明度深色背景风格的`网页产生的视觉效果更为独特，也颇受欢迎。在互联网中所能看到的深色背景的知名网站比比皆是，比如：nikecom，香奈儿官网，Louis Vuitton网站等。

　作为网页设计工作者，有必要了解深色背景设计的风格特点，知道它所适用的范围，并不断探寻它在使用中的技巧和规律。

　 一、深色背景网页的风格特点

　深色背景并非指黑色，它包含了一切明度较低的色彩，可以是深红色、深蓝色、深灰色或者其他任何一种低明度色彩，它可以有自己的色彩倾向，只是在明度上偏暗而已。

　这种色调给人的感觉是沉稳的、有力量的、庄重的、神秘的。因为它是一种明度较低的色彩，所以比较容易起到衬托作用，因此能够与许多种色彩构成良好的对比调和的关系，是最有力的搭配色。所以，在很多应用深色背景的网站中，我们经常能够看到深底色与一些辅助颜色的搭配。辅助色可以在瞬时间打破页面的沉闷感，引起浏览者的注意。

　深色背景的合理运用能散发出一种高品位高格调的气息，具有极强的视觉冲击力。无论页面上使用的辅助色彩是何种色调，也不管它们的纯度或对比度，只要有深底色这一有力的色彩作为主色调去调和，那么页面配色上都能够达到和谐统一的效果。

　 二、适合使用深色背景的网站类型

　深色背景的设计可以应用在许多网站上，但并不是所有的主题都适用，这种风格应该与网站的性质相搭配。由于深色背景明度较低，给人的心理感觉也较理性、沉稳，所以他多被用在一些男性网站上，如：YOKA男士网，Allcoolmencom，Trendscarcom等专为男性服务的网站。

　其次，深底色与高明度色彩的搭配通常可以表现出比较时尚的视觉效果，结合一些光感技巧，可令展示的产品更有质感。因此，这种搭配也常被用于一些时尚的、优雅的、比较现代的页面设计之中，如：香奈儿官网，nikecom，blackberry中国官网、淑女屋服饰官网等。

　此外，深底色也适用于一些比较有创意性的网站，比如设计公司或者一些张扬个性的团体（如摇滚乐队）或个人的网站。

　但对于一些包含众多内容与服务项目的大型门户网站（如搜狐、雅虎、腾讯门户网）来说，清新简洁是页面的要点，所以这种深色的设计显然不是明智的选择，要尽可能的避免。

　 三、深色背景在网页设计中的应用技巧

　与浅色背景的网站相比，深色背景的网站更具吸引力，因此也拥有着相当一部分的拥护者，他们喜欢深底色网站带来的时尚感。对设计工作者而言，这意味着在设计过程中，有更多的色彩可供选择，但同时，也要有能力解决使用这种深底色配色方法时所产生的问题，要为客户或用户群创建出更有效的深底色设计，那么，在使用这种色彩搭配时，应该注意哪些方面？

　 （一）注意文字的辨识度与可读性

　文字的辨识度是指文字在界面上出现时，用户能否顺利的进行正常阅读，在阅读的过程中是否会感觉到吃力或者眼部不适。

　在深底色设计中，容易造成眼睛疲劳，过高的对比度（如黑底白字）会刺激人的双眼，长时间阅读会造成用户眼睛不适，从而影响阅读。过低的对比度（如深灰色底与中灰色文字）由于背景与文本的对比不够强，会导致文字不够清晰，让人无法正常顺畅的浏览信息。所以，在使用深底色设计时，文字与底色的对比度成了重中之重，寻找到背景暗度与文字亮度的平衡点，是解决文字辨识度问题的关键所在。

　在通常情况下，为了提高文字的辨识度和可读性，设计师会尽量避免使用过高或过低的对比度，往往会用深灰色代替黑色，用浅灰色代替白色等方法来找到底色与文本之间的一个平衡点。

　 （二）合理使用留白

　国画中的“计白当黑”的方法在设计领域中也得到了广泛的认可和应用，此处的“白”并不是指白色，而是指“留白”或“空白”，有效的利用留白，在任何的艺术创作中都是重要的，尤其在深色背景的设计中，显得更为重要。

　深色背景给人神秘感的同时，也会让人感觉压抑、沉闷，在这种情况下，除了利用辅助色打破页面的沉闷感之外，留白的使用会更有效的解决这个问题。

　 （三）选择合适的辅助色

　由于深底色具有强烈的视觉冲击力，所以在为它选择辅助色的时候就要尽量使用简洁的色彩组合，使用一种或两种辅助色即可。如果为了产生更丰富的效果，可以选择同色系的颜色，这样的搭配方法，无论辅助色使用多少种不同明度或纯度的颜色，由于他们处在一个色调之中，所以也不会产生混乱之感。

　用过多的不同色相的色彩来做深底色的辅助色并不合适，过多的颜色会让页面显得花哨，杂乱无章，同时也不够沉稳大气。如果一定要使用多种色彩作为辅助色，那么务必要减少其在页面中的使用面积，以达到平衡画面的效果。

　 （四）适当的使用光影效果

　在一些较为时尚或现代的页面中，常会使用深底色的设计，与之同时出现的除了一些合理的辅助色之外，也经常会看到光影效果的使用，比如奢侈品牌Louis Vuitton的网站，背景色选用了高贵沉稳的深褐色，在页面的左下角使用了一点高光效果，这种设计方法使深底色页面产生了通透感。

　当然，光影的使用不仅仅局限于此，它可以是导航上的一个泛光，也可以是背景中某个局部的光晕，或者是一束淡淡的光线。它可以有无限多的表现形式，但目的只有一个，就是服务于页面。这种看似无关紧要的一个效果的使用，对整个页面视觉美感的提升却有着不可小觑的作用，在打破页面沉闷感的同时，也提高了网站的质感。

　由此可见，网页的设计离不开色彩，当用户第一次浏览网站的时候，给人们留下第一印象的不是网站的内容和布局，而是网站的色彩。色彩会影响到用户对内容的判断，可以说，一个网站设计的成功与否，很大程度上取决于设计者对色彩的搭配和使用。

　深底色背景的设计又是网页色彩搭配技巧中较为特殊的方式，它既可以让你的页面呈现出美妙的视觉效果，又会产生一些新的问题需要思考和解决，所以，这是一门学不完的课程。在使用深色背景设计时可以遵循一定的规律，运用色彩知识科学合理的设计网页的色彩。但同时，也要不拘一格，大胆创新，这样才能够使作品具有独特的艺术风格和良好的视觉效果。

说到排版，这是个大学问。网站上每一个元素都能影响浏览，排版设计的好坏绝对能考验一个设计师的基本功底，而短短的一篇文章并不能将排版介绍清楚，本文就先主要分享网站主题部分文字的排版，后期我们还会在不同系列文章中根据重点地穿插介绍排版技巧。

文字的排版需要考虑文字辨识度和页面易读性，本文就从最佳易读性规范和CRAP设计四原则的角度与大家分享怎样在网页中做出精彩的文字排版。

先想想，你觉得好的文字排版是什么样的？

在我们看来，好排版一定有着比较棒的阅读性，文字内容在视觉上是平衡和连贯的，并且有整体的空间感。

布局、内容摆放和栏目设计都会影响文字的阅读性。从易读性来看，需要设计师考虑字体、字号、行距、间距、背景色与文字颜色对比等。

我们在前面文章中已经重点介绍了字体和字号，以下最佳易读性规范则介绍行距和间距，分享适宜的行宽和行高，帮助浏览者保持阅读节奏，让读者拥有更好的阅读体验。

一、最佳易读性规范

1 行宽

我们可以想象一下：如果一行文字过长，视线移动距离长，很难让人注意到段落起点和终点，阅读比较困难；如果一行文字过短，眼睛要不停来回扫视，破坏阅读节奏。

因此我们可以让内容区的每一行承载合适的字数，来提高易读性。

传统图书排版每行最佳字符数是55—75，实际在网页上每行字符75—85更流行。中文在14号字体时，建议35—45个文字。

比如下图：

2 间距

行距是影响易读性非常重要的因素，过宽的行距会会让文字失去延续性，影响阅读；而行距过窄，则容易出现跳行。

网页设计中，文字间距一般根据字体大小选1—15倍作为行间距，15—2倍作为段间距。

比如12号字体，行间距是12px—18px，段落间距则是18px—24px。

另外，行高/段落之间的空白=0754。行间距正好是段落间距的75%是非常常见的。

比如16号字体，行间距27px/段间距36px=75%。文字字号本身比较大，所以行间距也不需要严格按照1—15倍的比例设置，不过行间距和段间距的比例符合75%，看起来很不错，这样的视觉效果让人在阅读时保持一种节奏感，这就是在实际情况中将规范的灵活应用。

3 行对齐

排版中很重要的一个规范就是把应该对其的地方对齐，比如每个段落行的位置对齐。

不论哪种视觉效果，精美的、正式的、有趣的还是严肃的，一般都可以应用一种明确的对齐来达到目的。

通常情况下，建议在页面上只使用一种文本对齐，尽量避免两端对齐。

4 文字留白

在排版文字时，在版面需要留出空余空间，留白面积从小到大应该遵循的顺序是：字间距、行间距、段间距。此外，在排版内容区之前，需要根据页面实际情况给页面四周留出余白。

二、CRAP 设计四原则在文字排版中的应用

CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密性（Proximity）,已经被设计师广泛应用。这四个基本原则在网页设计中对文字的排版也非常适用。

1 对比

我们将对比分为三类，主要是标题与正文的字体与字号对比、文字颜色对比，以及文字颜色与背景颜色的对比。

>标题与正文对比

在AnyForWeb网站案例页面中，标题使用18号的微软雅黑，正文使用12号的宋体，两种字体字号的对比让文字内容富有层次，很容易吸引读者眼球。

>文字颜色对比

在伽然官网中，一部分文字采用了与主要文字不同的另一种颜色，这种对比是增加视觉效果的有效途径之一，突出展示了段落的重点。

>文字颜色与背景颜色对比

这是非常常用的一种排版设计方式，正文文本与背景合适的对比可以提高文字的清晰度，产生强烈的视觉效果。

比如在埃森哲官网中，白色背景、红色标题、黑色正文的对比，以及红色背景与白色文字对比的应用，将文字内容清晰衬托出来，既有丰满的层次感，同时有具有很强的视觉冲击力。

设计师在使用这一原则时需要注意，必须确保文字是容易看清的，如果文字过小或过于纤细、色彩对比度不够，会适得其反，举个例子：

设计师如果对色彩的对比度还不够熟悉时，可以通过颜色对比检测工具（如Check My Colours、Colour Contrast Check）检测色差和亮度差，确保网页设计的易读性。

2 重复

设计中的元素可以在整个网页设计中重复出现，对文字来说，可能字体、字号、样式的重复，也可能是同一种类型的图案装饰、文字与整体布局方式等。重复给用户一种有组织、一致性的体验，可以创造连贯性，显得更专业。

比如HeyJuice网站在产品准则部分采用了统一的“+标题+正文”形式。内容不同，而布局方式统一，风格一致。用户一眼看过去，就能知道这是属于同一个版块的内容，这样的重复很容易有一种连贯、平衡美感。

比如土巴兔装修网的流程，标题文字在同样的位置、采用同样形式，既与背景颜色形成对比，又是文字样式的重复。

重复原则在网页设计上应用非常广泛，单一的重复可能会显得单调，设计师却可以根据不同网站的需求灵活使用，比如有变化的重复能增加创新，给网页设计增加活力。

3 对齐

在网页设计中，元素在页面上不能随意摆放，每一项都应与页面内容存在某种联系。对齐可对齐是网页设计必不可少的部分，它可以帮助设计师做出吸引人的设计，是优秀网页设计的潜在要求。

对齐的案例就非常多了，我们随意列举两个。

曼秀雷敦网站的左对齐：

Darry Ring网站的居中对齐：

左对齐和右对齐是文本看起来更清晰、效果分明；居中对齐显得更庄重、正式、稳重。

4 亲密性

位置的接近意味着存在关联，亲密性是指将相关项组织在一起让它们从整体看看起来和谐统一。

亲密性可以从两点入手：适当留白、以视觉重点突出层次感。

比如以下案例中图文搭配，这是多个元素在一起的组合排版。

人眼首先被Banner图和里面文字吸引，然后再向下移动到文字描述及链接文字，这些元素的亲密性与对比形成一种平衡。

以上就是本次分享的内容啦。如前文所言，排版的好坏考验一个设计师的基本功底，平时的功夫可是必不可少的哟，我们期待大家设计的精彩排版！

商品详情页是电子商务网站中最容易与用户产生交集共鸣的页面，详情页的设计极有可能会对用户的购买行为产生直接的影响

因此，商品详情页面的设计会涉及到运营层面，在美观实用的基础上，将要表达的信息尽可能用直观的视角展现出来，再有意识的避免设计与运营之间的冲突

一、商品展示图不宜过大，鼠标悬停展示细节商品详情页中的展示是用户进入该页面后的第一个视觉点，有设计师可能会因此认为这张的尺寸应该尽可能放大，让用户对商品概况一目了然

但作为设计师也应该考虑到右侧文字信息对于用户的重要性，两者之间的比例要避免很大的偏差，减轻用户在视觉上产生的不适

IKEA的网站就因为与文字之间的比例问题，让整体看起来轻重不明确，周围的留白更是与右边拥挤的文字形成了鲜明的对比

鼠标在上悬停时，右侧会出现关于商品的细节展示，这是一个在商品详情页中很常见的功能

但使用过程中会发现，就算用户的鼠标无意识的划过，细节展示依然会马上呈现，这或多或少会影响到用户体验，而IKEA的网站则很自然地解决了这一问题

IKEA的细节展示在点击后才会体现，不让“说来就来”的打扰用户的浏览体验

二、满足用户的比价心理“价比三家”是网络购物群体的消费习惯，因此，商品详情页的设计中也应该融入并满足用户选价的心理状态

在消费心理学中会提到，顾客买东西大多基于个人感受，可能并不是真正价格上的便宜，而是商家能让顾客觉得便宜

折扣或是优惠额度的显示能让消费者心理产生微妙变化，正如当当网的做法，让原价和折后价产生对比，再直接表明折扣，这种重复表达能加深用户对优惠的力度的感受

三、增加分享按钮社交媒体的力量在如今的营销中绝对不容小觑，所以分享按钮就变得必不可少

在大多数电子商务网站中我们可以看到：分享按钮被设置在展示或文字的下方，主要分享当前页面的商品

但其实，真正用于营销推广的分享并不应该仅限于商品本身

比如成功购买的记录，又或是买家和卖家之间的有趣互动评价，这些都可以成为分享的内容，这也许比商品本身更有吸引力

四、CallToActionCallToAction可以解释为用户行为召唤，也就是我们常说的用户引导

CallToAction一般从色彩和文案两个角度着手，而色彩是最直观的表现形式

用区别于页面大环境的色彩来强调突出，在吸引用户视线的同时让他们更乐于点击

价格、标签，以及“加入购物袋”按钮都使用了鲜亮的玫红色;“购物袋”相较于“购物车”也更加生活化

五、评价意见是必需板块对网络缺乏信任感是大多数用户存在的问题，而他人的评价和建议能对当时的购买行为产生很大的影响

因此，顾客在电子商务中不是可选项，而是必选项

天猫将顾客的进行了自动汇总统计，让用户在查看的时候更直观便捷

无印良品网站的商品详情页在这方面做得有所欠缺，也许是对自家的产品自信心爆棚根本不用让用户听取其他顾客的评价!但身为一个网站，还是尽量不要如此高冷了

六、导航跟随商品详情页的内容比较多，所以跟随性的导航设计很有必要

跟随导航在商品详情页的出现能为用户提供很大的便利，但在大小上还需要设计师来掌握，隐形全面的导航才是用户真正喜欢的导航

京东的商品详情页无论在导航的颜色还是大小上都比较符合用户体验，既让用户在浏览时更方便，也不影响用户的视觉体验

美丽说的跟随导航以两种形式出现，一开始是网站的主导航，翻阅到一定区域，导航自动变更为商品详情导航

这样的做法其实显得有些多余

当用户已经在翻阅一个页面的时候其实很少会出现跳转的需求

另外，在跟随导航中设计二级导航也没有什么必要，这样只会让用户的视线范围变狭窄

七、优先功能用途的描述很多商品详情页的品牌情节过于明显，这会让用户觉得商业色彩太过浓重，缺乏亲切感

商品详情页的描述第一屏通常会有新品或热门推荐，这种做法与商户最应该注重的用户体验完全背道而驰，这类行为会让用户产生反感

GAP的商品详情页几乎没有任何多余的部分，页面中的内容都围绕着一个商品而，为用户营造出良好舒适的购物环境

八、减少文案，善于显示关键词有研究表明，互联网上60%的文字信息用户是不会阅读的，我们由此可以得出，互联网上出现的文案必须达到最精简，应该善于抓取关键字

国美在线在商品详情页上首先列出一系列用户真正需要了解的关键点，再在接下来的部分中一一详细介绍

九、保持页面连贯性关于商品详情页，站在用户角度来说，他们需要清晰地认识到商品的全部信息，或者说该如何为自己带来好处，因此，商品描述的逻辑顺序变得格外重要，设计师可以基于商品描述的认知规律去考虑这一点

苏宁易购的网站在页面连贯性上表现得很顺畅，条理十分清晰，让用户能顺着线索找到自己需要的那一部分

十、页面不宜过长页面长度的掌握在商品详情页的设计中是一个很常见的待解决问题，页面长度过长不仅会导致网页加载速度变慢，也会让用户产生视觉疲劳

一般来说，PC显示在20屏以内，移动端控制在10屏，也就是4页以内

一号店商品详情页的页面长度控制比较恰当，尽量把相关事项交代清楚，不加入其他可有可无的成分

总结：商品详情页的设计体现的不仅仅是单纯的视觉效果而已，无论构思还是排版都是一个引导用户的过程

打动用户、刺激购买，设计师应该抱着这样的理念为用户传播一种幻想，而不只是设计一个页面而已