UI设计基础知识

1、.目录，UI简介，UI设计的原则，UI设计的工作流UI设计的界面布局UI设计的颜色和网站UI手机UI软件UI，UI简介，即UI界面的简称。 UI设计是软件交互、操作逻辑和接口美观的总体设计。 好的UI设计不仅使软件个性、品味，还使软件操作舒适、简单、自由，充分表现软件的定位和特征。 迄今为止，PS设计的发展分为PS侧PS (网站和软件)、移动PS、游戏PS。 3大领域看起来相似，但在重点、设计构想、制作规则等实际操作上，实际上差异很大。 重点放在网站UI、软件UI和手机UI上。1、个性化视觉过程的现状2、方便的交互体验3、统一的整体风格4、精致的细节诉求、UI设计原则。 分析、UI设计的工作流

2、程，了解产品的市场定位、产品定义、客户小组、运营方式等，并提交可用性设计建议。 的双曲正切值。 架构创建交互方式、操作和跳转过程、结构、布局、信息和其他元素。 界面设计前面所有的工作，色调、风格、界面、窗户、图标、皮肤的表现是最重要的。 输出与开发者合作完成相关的接口耦合。 完善可用性循环研究、用户体验反馈、测试反馈，UI员工完善可行性建议。1 .接口组件、互联网和传统媒体的最大差异在于，除了文字和图像之外，还包括语音、视频、图片等新的多媒体元素，从而增加了web界面的动态性。 UI设计界面布局、文本要素作为网站内容传递的主体，具有不能替换其他要素的重要作用。 首先，文字信息符合人的读书习惯，

3、其次文字访问的空间少，所以可以节省下载和阅览时间。 网页文字主要包括标题、信息、文字链接等。 文字作为占据页面重要比例的要素，同时是信息的重要载体，其大小、字体、颜色和配置对页面整体设计有很大的影响。 以文字配置为中心的web界面，只要文字配置恰当，布局也生动，洒水，分类条例清晰，不给人单调感。 在.网页上常用的图形格式是JPG，GIF，BMP。 的双曲正切值。 图形元素有四种类型：标题、背景、主图和链接图标。 图形往往能引起人们的注意，激发读书兴趣，合理地运用图形，把设计主题生动直观、形象地表现出来。 图像与标题链接可以提高网页的视觉效果，并可以调整文字的强调，以符合生动的形象性。 主图和背

4、景虽然装饰性小，但背景突出主题，主图强调表现主题。 主图是整个网页的视觉中心，能给单调的文字信息带来活力，给予强烈的视觉信息。网页构成的多媒体元素主要包括音频、视频和动画。 这些是界面结构中最有魅力的要素，好的多媒体要素不仅可以增加网站活力，还可以有效地增加网站与阅览者的交流。2 .界面的布局、网页的设计虽然来自平面设计，但与平面设计不同，在同一设计中多使用平面构成的基本原理，不同的是其大小比较固定，所搭载的介质被限制在电子显示器上，这也让设计者知道UI设计的界面布局、计算机显示器、手机显示器、平面视觉影响力强，左强右弱，上部和中央上部被称为“最佳视域”，在web设计中，主题、每天更新的内容等

5、强调的信息总是在这个地方在电脑上分割画和面，决定在哪里配置怎样的栏和大小等。 实现了粗糙的布、布局、颜色、标志、指南、内容照片等一个一个的实现。、布局细致化，在网页设计中，同样是离开画面设计中最基本的点、线、面的运用。 点线面、的运用、UI设计的颜色的组合、颜色的基础知识、低温色、补色、对比度色、相似色和接近色、色和心理感情、是适合项目的颜色方案，能让用户更好地使用网站是很酷的事。 颜色有冷温色的区别，巧妙地运用冷温色会给网站带来意想不到的效果。 颜色与人的心理感觉和情绪有一定的关系，一般来说，各种颜色给人的感觉，红色代表热情、活跃、热闹、温暖、幸福、吉祥，橙色代表光、华丽、兴奋、甜、快乐，黄

6、色代表明亮、快乐、高贵、希望代表青春的蓝色代表深远、永远、沉默、理性、正直、寒冷，紫色代表优雅、高贵、魅力、骄傲。白色代表纯洁、纯真、朴素、神圣、明亮。灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞。黑色代表崇高、严肃、刚健不仅要考虑界面设计本身的特征，还要遵循一定的艺术规则，设计色彩鲜艳、性格独特的网站。 应该注意到，颜色的组合的问题，通过调整颜色的彩度和透明度，亮度发生变化，使网站变得不单调。单、颜色，如绿和蓝、红和黄，颜色是相互邻接的颜色。 使用附近的颜色设计网页，不会使网页颜色变得杂乱，容易协调网页。 使用领子、近色，能产生强视觉效果，突出网站特色，突出重点。 以一种颜色为基调，彩色

7、对比度，起着描绘龙点眼的作用。对、比色、黑色是特殊的颜色，往往会产生强烈的艺术效果，黑色一般用作背景色，与其他纯度色结合使用。 黑色，使用，一般采用朴素高雅的颜色，图案复杂的图像和纯度高的颜色不作为背景色，背景色必须比文字的颜色强。 背景色、的使用一般被控制在3色以内，通过调整颜色的各种属性而变化。颜色的数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、数量、

8、数量、数量、数量、数量、数量、数量然后是表布局、Flash和基于CSS的网页设计。 迄今为止，我们可以将网站建设的发展分为四个阶段。 这四个阶段分别代表着互联网、技术的发展历史。，第一纯粹的静态网站，第二数据库世代管理，第三智能的建设网站，第四代，设计细节的发展，初期的网站完全由文本构成，接着出现了表的布局，文字和茂的纯粹的静态网站参加视频、音频等多媒体动画的网站，最后基于web2.0技术，设计了CSS中虽然有视觉上的冲击，但加载速度更快的网站。 在此期间，文字、链接、图像、按钮、动画和背景发生了很大变化。，单一英语字体，各国的文字，文字的各种文字，百种字体，单一文字链接，链接，flash动画

9、，链接，图像，静止图像，按钮，文字按钮，图标按钮，动态按钮，按钮。 文字、图像GIF动画、FLASH动画、动画3D动画和视频、背景、颜色背景、动画背景、未来的趋势和网站的UI设计风格从刷新开始无论是版面设计还是设计要素，用新立异这个词来表现都不为过。 web2.0技术的支持使网站的程序更有人情味，在设计上也追求官能化，网站的UI设计继续发展为以下设计。 技术上1、响应的网页设计2、全屏的网页设计3、滚动设计、布局1、欧美简洁的风(平坦化) 2、韩国华丽的风3、中国的风、响应的网页设计、能适应不同尺寸的显示器的网页在现在的潮流下响应的网页设计是为了解决这个问题。 这样的特殊开发方式，保证网页能适

10、应不同的分辨率、分辨率，重新组织网页的要素，无论是垂直的平板电脑还是智能手机都能实现最佳的视觉、视觉效果。全屏网页设计，精心选择了设计的美丽背景，加上合理的页面布局，视觉冲击力很强，引人注意。 主要以照片展示为主，少量文字加上美丽的布局，更有魅力。 像这样，孩子的网站多用于照片团队和个人作品集的展示，很容易养眼，但是搭载的信息有限，公司部、部门的主页很少见。滚动设计、滚动设计分为视差滚动设计、滚动检测设计和无限滚动模式(瀑布流)三种。 视差滚动是以不同的速度滚动多个背景以形成三维立体的运动效果，给观察者提供独特的视觉感觉。 鼠标滚轮的平滑体验，在用户观看这样的网站时有控制感，简单来说，是具有响

11、应性的交互式体验。 时，滚动检测web设计使用CSS将导航栏固定在web页面的顶部、侧面或底部，将布局内容按导航顺序纵向或横向排列，当用户单击相应的导航标签时，该页面将自动显示这样的页面设计的页面几乎不跳跃，各标签指定的页面内容也几乎完全显示在画面上，因此页面内容的表现有限制。 无限滚动模式(瀑布流)大幅减少了页数，几个网站的内容很多，但是他们没有简单的页面，只要将这些内容纵向排列，用户纵向滚动，内容就看起来总是更新。 这样的信息量多的情况下，每天更新区块的网站是个好方案。欧美简洁的风(平坦化)，提供了新的设计思考，设计只采用二维要素，从复杂的设计美学中，去除所有装饰性的设计影，斜面，突起，渐

12、变，拒绝特殊效果，从图像框到按钮，然后导航必须极力避免阴影这一特殊效果，重视布局和色彩，可以说是之前推荐的拟人化设计的霸权。韩国华丽的风格，韩国商业网站具有代表性，色彩丰富独特，但不杂乱。 韩国设计师使用色彩非常合适，是给人淡淡的魅力，还是给人不同的大胆？ 网络、网站各字段在表达主题时，喜欢改变色调。 灰色是他们最容易使用的颜色，颜色，灰色看起来中庸，但是可以和任何颜色组合，大大地改变颜色的味道，增强对比度。 正文文字也是灰色的，部分喜欢用颜色鲜艳的丝带和颜色块来区分。中国式、中国式的网站，气势磅礴，气质高雅，被很多人所喜爱，近年来大量应用于传统文化、历史人文观光地、房地产项目等网站。 几千年

13、的文明传承下来，中国人具有独特的构图审美能力。 对称美是中国传统美学中重要的一部分，网页因为特殊性，一般使用最多的是左右对称，文字的纵向排列和国画、空白的活用，画面整体有平衡、和谐、庄重的美。、，网站设计的注意事项，网站设计的尺寸，Web命名规则，Web制作规范，Web布局，网站设计的注意事项， 网站设计尺寸目前流行的电脑显示器尺寸为800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024、1366*768、1920*。 1080当前主流设计站点的页面宽度通常为950、1002、1190、1260、1900，设计宽度总是比显示

14、器的实际尺寸窄20像素，但页面的高度可以根据内容而调整。 这是为了在右侧滚动条上确保一定的空间。图中所示的文字、Web命名规则、文件命名原则：用最小的文字达到最容易理解的意思。 常用文件和目录命名规则：每个目录包含默认的html文件，文件名以index.htm统一，文件名以小写字母、数字、下划线的组合统一，尽可能以单词英语翻译成名称。 aboutus (关于我们)。 相同类型的多个文件用字母数字命名，字母和数字用_分隔。 news_01.hm。 请注意，数字的位数与文件数成比例，不足的用0来补充。 例如有200条新闻，其中第18条命名为news_018.htm，图像命名规则：名称分为头和尾两部

15、分，用下划线分隔。 第一部分代表了这张图像的大类、性质。 交互相关的要素名称：交互相关的要素通常有正常、悬停、点击、阅览等不同的样式，命名为以下规则：鼠标悬停：hover，点击： click，阅览： visi :搜索按钮：btn-search、btn-search-hover、btn-search-visited、web制作规格、图中表现、文字、图像设计规格：以标志标准色为主体颜色，采用web安全色内的颜色。 标准字体：原则上有两种，一种中文字体，一种英语字体(不包括文本内容字体)，内容编辑规范：内容必须遵守我国计算机信息网络国际联网安全保护管理办法的规定。 标题短，醒目，新颖，吸引人。 本文

16、要消除错字别字自造字，不要简体字而要交叉繁体字，名字要遵循我国的规范。 新技术使用规范：与浏览器兼容，保证下载速度，照顾最多用户。 导航规范：简单、明确、建议3级以下的链接。 导航的文字必须简洁简洁. 连续性页面的上一页、下一页的按钮，如果页面太长，请在底部添加go top按钮。，文字和透明性，Web排版，标志是网站最重要的部分之一，可以使用与主题颜色相反的颜色。 图中选择纯度低的背景，强调了文字用的明亮的颜色。 链接对网站是不可缺少的，链接的文字应该很清楚。 页面标题是网站的指标，必须清晰、清晰、层次清晰。web链接网页、标志、网页、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符、字符文字、文字等设计风格的发展用户界面的发展趋势，手机UI的设计尺寸，设计规范的注意事项，手机UI的发