首页>资讯>正文
UI设计原则是什么 观速讯
2023-02-08 08:09:41    来源:互联网

UI设计原则是什么


(相关资料图)

使用PhotoShop或Firework设计页面,然后用ImageReady或Firework切割页面的图片后直接生成HTML网页,再把相应的内容填入网页中,最后加上各种Java和表单效果完成网页的制作。以下是小编整理的UI设计原则是什么,欢迎来阅读!

UI设计原则是什么 篇1

而这一系列的工作全部由“网页美工”一人完成。这种做法从1997年网页制作热潮延续至今,面对日新月异的网络,各种网络技术的突起,陈旧的做法已不能适应当前的形势,网站建设发展至今已经不再是一人包揽的局面,网站建设正朝着项目化、流程化的方向科学发展。在一个完整的网站建设团队中,每角色都有明确的分工。

从网站项目成立,到网站结构策划,网站结构设计,网站页面布局,页面脚本处理等一系列与美术设计无关的任务全部从“网页美工”身上解放开,在这个流程中原来 “网页美工”的角色被更专业化的定义,赋予一个更贴切的名称——网页美术设计师。从而,网页美术设计师能充分地发挥特长,在平面美术设计的基础上进行专业的网页美术设计。

很多人常常把平面美术设计与网页美术设计混淆,以为平面美术设计师一定会做网页美术设计,实际上,网页与印刷品有很多差别,因为它提供了更多功能,这一点与软件比较类似。网页设计近似于软件设计,网页美术设计则相当于软件UI设计,更准确的说,网页美术设计是图形化人机介面(Graphics User Interface,或简称GUI)的一种。因此,网页美术设计师也可称为——网页UI设计师。

部分网页设计原则

规划目录结构时应当遵循的几个原则:

1.不要将所有文件都存放在根目录下;

2.按栏目内容分别建立子目录;

3.在每个主目录下都建立独立的images目录;

4.目录的层次不要太深;

5.切忌使用中文目录;

6.不要使用过长的目录;

7.尽量使用意义明确的目录。

除创意之外,在网站设计时还需要考虑以下基本原则:

1.网页内容要便于阅读;

2.站点内容要精、专和及时更新;

3.注重色彩搭配;

4.考虑带宽;

5.要适当考虑不同游览器、不同分辨率的情况;

6.提供交互性;

7.简单即为美。

网页设计的通用规则:

1.网站的设计目的决定设计方案;

2.浏览者的需求第一位;

3.页面的有效性;

4.页面布局的保持统一性;

5.使用无语意标签DIV和适当的结构来设计网页;

6.谨慎使用图片;

7.减少Java Applet和其他多媒体的使用

在页面进入草图设计后,需要确认很多细节,我在检查页面设计稿是否可以进入切页面和制作时候,遵循以下原则:

1 界面统一性。一样的功能在一样的地方。一个页面无非由一些基本模块组成,每一种基本模块在UI设计上,不同的应用实例是否元素一致,包括字型、字号、颜色、按钮颜色、按钮形状、按钮功能、提示文字、行距等。说来容易,执行的时候很多设计师会有一些随意的想法,可能某些想法是挺好的,但是我们必须执行统一的界面标准。设想windows里面,如果不同的窗口关闭按钮在不同的地方,并且颜色还不一样,这会是什么样混乱的状况。

2 留住用户而不是骚扰用户。引导,不是强制。国内的网站对于骗取点击量是很有心得,记得有一段时间sina的新闻标题都是危言耸听,结果点进去一看不是那么回事情,这样的用户体验就不好了。除了进行角色用户模型分析用户关心的内容以外,我这次也采用了比较极端的做法来避免用户对于点击的处理。弹出新页面恐怕也是中国互联网特有的现象,向前向后这些按钮在中国用处不大。好在我们有各类多选项卡的浏览器,不怕,但是,良好的连续性体验被破坏了。你愿意看一本每页印两个字的书吗?用户感兴趣才看某个网页,我们要做得是引导用户看到他想看的内容,既不能硬塞,也不能骗取。

3 安静的浏览器。曾几何时,我在看网站的时候,是选择不显示所有图片的,这样的干净在某些领头羊的带领下,已经不复存在了。诸多的flash闪烁,一碰就显示的层,甚至还有不请自来的视频,这些都不是NI自然界面理论能允许的,我们要的是一个给用户安安静静阅读内容参加互动的网页。根据NI第二原则:网站设计要满足人们的需要,包括个人化的和社会化的。用户到网站上来有个人的需求,尽可能简洁的版式,容易阅读的内容,方便的导航,这些对于用户来说都是容易接受的,从web2.0风潮开始,有一点至少是好的,就是国内网站也开始注意这些方面,而不是将内容一股脑的堆砌在那里。如果还是没有很明白的话,大家可以发现绝大多数国外网站在点击一个链接的时候,是在本页打开,而国内的网站基本上都是新开页面。

以上这些归纳为设计时候要注意的要点如下:

1 每一个模块的边框,标题,按钮(如果有的话),“更多”“详细”功能,这些元素的颜色、大小尺寸、位置、对齐方式、字体、字号、行距等都要一致。

2 整个页面的基调颜色要一致,不同的模块除非有很大意义的差别,颜色应该一致。

3 可以点击的文字、按钮、图片,鼠标应该呈现出统一的可点击样式,区别于不可点击区域。

4 呈现的日期格式的统一,比如都用长日期格式“2007-2-1”或者都用短日期格式“07-3-1”,样式不同的日期呈现方式还不如不呈现。

5 可以点击的图片最好用不同的样式显示,比如鼠标滑过时候的辉亮效果。因为网页会大量的使用图片做修饰效果,区分可以点击和不可以点击的图片是值得去做的。

6 有没有不必要的弹出窗口。(从netscape开始这个设计真的很糟糕,ie也完全继承了,解决的办法是用js方式来呈现弹出窗口。)

7 文字描述。很多时候会忽略这个问题,在我们做demo的这个项目中有很多的文字描述,各有其用,统一描述的方式,统一人称,统一语气,都是给用户带来良好体验的途径。

8 图片风格。我不是这方面的专家,从欣赏的角度,图片应该是尽可能的统一风格,素描样式和点阵样式共存总不是太好的事情。

9 图标。很多时候会用图标来描述功能,漂亮的带点阴影和倒影的图标是非常抢眼的,使用图标的话要注意风格、透视角度、分辨率、辨识度的一致性。

UI设计原则是什么 篇2

UI设计已经成为一门专门性交叉学科,通过对视觉思维、心理学、人体工程学等不同学科的研究,设计者从各个方面不断的改善用户的操作体验。早期的软件界面曾经通过“拟物化”设计(skeuomorphism)试图通过模拟真实物体的质感来让人机交互更趋向于人与现实世界的交互方式而“去虚拟化”;而21世纪以来,随着UI设计中对视觉传达规律的运用,“扁平化”设计(flat)成为更为主流的设计趋势。扁平化设计更为现代主义,通过简洁、单纯的色块的组合与运用帮助用户更好地理解与使用产品本身。

1 UI设计中色彩的功能

色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用,可以归纳为以下几个方面。

1)显示界面的整体架构

一个UI界面总是借助图形化的"外观直接作用于客户的视觉系统。用户接触一个UI界面,看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏,按钮等构成元素,并显示出UI界面的逻辑架构。

2)明确视觉层级关系

UI设计中不同的内容属于不同的层级关系,如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系,还可以通过色彩间的强对比突出关键内容。

3)营造界面整体风格

UI界面虽然是个复杂的视觉图形系统,但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系,可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系,女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。

4)基于人体工程学的色彩运用。

由于色温会影响到光源显示的颜色,大于 6500K 就会偏冷(白蓝),小于 6500K 就会偏暖(黄红)。而蓝光大量存在于电脑显示器、荧光灯、手机、数码产品、显示屏、LED等光线中,由于蓝光是一种高能量的短波光线,因而会较为严重的伤害视力。基于人体工程学保护视力考虑,苹果手机Iphone7和iphone7plus手机背光显示设计了Night Shift 的屏幕去蓝光保护功能,开启后会在晚间自动将屏幕显示调成暖黄色调,减少视觉疲劳。

此外,UI界面中,考虑到电子设备的显示特点。背景色要与图标色彩之间至少有5.38以上的对比差,才能够易于区分。而在此差值范围内的配色则会因为过于接近而在显示环境中对辨认造成困扰。

还有一些特殊人群,如红绿色盲人群,由于特殊视觉需求而需要进行特别的配色设计。

2 UI色彩设计方案

在进行UI设计时,要通过对产品及用户体验的分析确定明确的色彩搭配反感,形成“标准色彩规范”,在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号,方便设计师的设计稿的色彩统一。

1)主色调

主色用量基本占据全部用色的75%,基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律,可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。

根据色彩在视觉中的能量值,一般主色倾向于选择饱和度高、明度低的色彩,往往会在在同一界面中占据较大的面积或明显的凸现于背景。

2)辅助色

辅助色起到辅助主色的作用,在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果;而用主色邻近色作为辅助色可以让界面有丰富的变化,产生活泼感;用主色调对比色作为辅助色可以让主色更为突出。

3)装饰色

占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别,一般在明度、饱和度上要有明显差异,一般会用明度或饱和度高的颜色。

3 UI设计中对色彩三要素的运用

色相、明度、饱和度是色彩的三要素,对这三个色彩要素的理解和运用体现在UI设计中整个色彩方案中。

色相是色彩的首要特征,是不同色彩相区分的重要因素。色相也是色彩搭配中进行色彩对比的主要因素。对主色色相的选择往往决定了一个UI界面的整体风格与气质,或奔放活泼,或冷静深沉,或淡雅清新,或浓郁艳丽。其他辅助色则起到对比或调和的作用。因而一个UI界面的主色选择要符合产品本身的特质。以手机APP为例,淘宝、百度外卖、大众点评等许多电商类APP常常用容易让人兴奋、热烈的红色、橙色作为主色调;而主打探索与求知的“知乎”APP则使用理性、冷静的蓝色作为主色。

色彩的明度是色彩的明亮程度,是对色彩进行调和的主要因素。同色相色彩的明度变化可以在同色系中呈现一种调和统一的变化关系,协调而具有层次感。常常用于配合主色进行图标、菜单、导航等设计。明度变和也会带来色彩性格上的差异,明度升高会让色彩变得明亮、呈现清凉感;而明度降低则会让色彩变得暗淡,呈现温暖感。

饱和度是指色彩的鲜艳程度,也是色彩进行调和的主要因素。饱和度的改变同样会让色彩呈现从浓烈活泼到安静深沉等不同的“色彩性格”。此外饱和度的改变还会让色彩呈现不同的质感,如金属的不透明、坚硬、光泽感;糖果色的清新甜美感等等。

4 UI设计中的色彩心理学运用

色彩具有非常强的联想性。不同的色彩会在味觉、空间、冷暖、情绪等不同方面引发人们不同的综合感受。UI界面在主色调的选择中往往会利用人们对于色彩的联想习惯突出产品的定位。仍以ios系统手机APP为例;以介绍美食菜谱的“香哈”APP,主色采用最容易诱发食欲的红、橙色系;而具有丰富中国民俗传统的万年历APP则采用了充满中国传统文化涵义的中国红作为主色并配合这一气质采用篆书字体作为文字标识。

综上所述,由于色彩的重要性,对色彩的理解和驾驭对整个UI界面的设计产生着巨大的影响。

关键词: 界面设计原则

UI设计原则是什么 观速讯

UI设计原则是什么使用PhotoShop或Firework设计页面,然后用ImageReady或Firework切割页面2023-02-08

racing into the night_racing

1、竞态行动,作用疯狂,狂热racing还可能是race的现在进行时态race的意思是竞赛。2、比赛。本文到此2023-02-08

天天短讯!京东白条开了有什么后果 好坏处有哪些

【导语】现在先消费后还款的软件实在太多了,其中京东白条也是非常受欢迎的,很多人都喜欢在京东购买东西使用京东白条的,但是很多人对京东白2023-02-08

我去B站看美女,结果被“啊哈哈”洗脑了_当前视讯

你可能即将发现《后街女孩》的造型原型怪物马戏团|文啊~哈!AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH!!!以上,是我过去三天网上冲2023-02-08

世界快讯:恐龙的种类

恐龙的种类,肉食龙钟敏类、虚骨龙次亚目、原蜥脚次亚目、蜥脚次亚目、鸟脚亚目、剑龙亚目、甲龙亚目、角龙类、肿头龙亚目等。肉食龙类具有巨2023-02-08

葛优诉B站侵权案将开庭

驱动中国2023年2月6日消息,据天眼查App显示,2月4日,北京互联网法院向B站关联公司上海幻电信息科技有限公司公告送达起诉状副本、开庭传票等2023-02-07

环球动态:加拿大鹅(GOOS.US)公布五年期展望:预计28财年收入将达30亿美元

加拿大鹅(GOOS US)于当地时间周二投资者日活动前,公布了最新的增长计划及业绩指引。展望未来,加拿大鹅预计将在28财年实现30亿美元的收入,复2023-02-07

关于华硕A84S_全球速看

关于华硕A84S,1、华硕A84s采用15、6英寸显示屏,1920乘1080的屏幕分辨率,屏幕比例为16比9;2、内置4GB内存和500GB硬盘,配备DVD刻录光驱;32023-02-07

顾不如蜀鄙之僧哉的顾是什么意思_顾不如蜀鄙之僧哉-环球速讯

1、这句话出自《为学一首示子侄》,是清代彭端淑的作品,这篇文章收录于《白鹤堂文集》,其中第一句:“天下事有难易乎?为之,2023-02-07

沁阳市西万镇:整治“软弱涣散”,村民乐啦|每日资讯

今年春节期间,河南省沁阳市西万镇七里桥村村民刘某生出门再也不用走土路了,干净的水泥路面,宽阔的街道,让刘某生逢人就夸党的好政策,这一2023-02-07

VP-ITC等温滴定微量热仪 快看点

1、VP-ITC等温滴定微量热仪是一种用于信息科学与系统科学、物理学、化学领域的计量仪器。2、于2013年6月26日2023-02-07

30海里等于多少千米

30海里等于多少千米,30海里(nmi)=55 56千米(km),因为一海里等于1 852千米(km),所以30海里等于55 65千米。海里:航海上度量距离的单位。没有2023-02-07

世界观速讯丨女兔大男蛇2岁合适吗 属兔男和属蛇女的婚配状况

每个人适合的结婚对象不同,原因在于每个人拥有不同的个性特点,而不同个性的人在一起之后,会产生不同的结局,大多数人都希望自己的爱情能够2023-02-07

冥王神话第二季动画在线_冥王神话第二季

1、动漫第二季早就出了,圣斗士星矢冥王神话是13集为一季的,第三季还没出来。2、漫画也出了,百度一下就有了。本文到此分享2023-02-07

每日时讯!嫌的组词的组词

1、嫌弃2、避嫌3、嫌疑4、涉嫌5、嫌犯6、前嫌7、嫌隙8、嫌恶9、讨嫌10、弃嫌11、嫌怨12、嫌厌13、憎嫌14、怨2023-02-07

讯飞放心课_迅飞_焦点快看

1、讯飞输入法没用过,以搜狗输入法为例观察原来输入法字体颜色。2、2、右击工具栏输入法图标--选择设置属性。3、3、选择2023-02-07

美媒:印度这样“倒手”将俄油卖给欧美_今日观点

美媒:印度这样“倒手”将俄油卖给欧美,印度,欧盟,美国,原油,美媒,俄罗斯,战略石油储备2023-02-07

世界快讯:如何调制鸡尾酒_鸡尾酒怎么调

解答:1、玛格丽特:龙舌兰酒、君度橙汁和酸橙汁混合在一起,在摇壶里摇一摇就完成了。2、深水炸弹:用8%的啤酒装满一个啤酒2023-02-07

三极端理论 全球消息

1、三极端理论则是领导行为理论的一种。2、领导者应该怎么做,即领导者的行为。文章到此就分享结束,希望对大家有所帮助。2023-02-07

幻书启世录同人轻小说(第十三话)

约定海边的黄昏是寂静的,残阳被海平面慢慢吞没,海鸥的叫声和潮汐偶尔会划破这片寂静。在那片被寂静的海边,女孩抱着双腿坐在沙滩上,她一言2023-02-06

40岁女人适合的发型_40岁女人剪啥发型好看_焦点快报

1、适合波浪发、齐肩发、中长卷发、波波头短发、中长直发。这些发型都很年轻,适合四十多岁的女性。波浪卷发发型波浪卷发发型从2023-02-06

泰康人寿学平险报销范围_人寿学平险报销范围_世界视讯

1、学平险的理赔范围:  意外人身保险。2、包括意外事故和意外伤残,其保险责任为学生、幼儿(被保险人)因遭受意外伤害导致2023-02-06

焦点快播:烟悦网评分高的烟_烟悦网

1、骗人的。2、正常事。本文到此分享完毕,希望对大家有所帮助。2023-02-06

每日聚焦:1毫升等于多少克_等于多少克讲解

解答:1、如果是水,1毫升水等于1克水。毫升是体积单位,克是重量单位,体积和重量,不能相互等同。2、毫升是体积单位,对应2023-02-06

【聚看点】海藻花

1、常绿椰子类原产地非洲加拿利岛植株特征单干。2、高10-15公尺。3、粗状而具波叶痕。文章到此就分享结束,希望对大家2023-02-06