恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计小白到大神的进阶之路—入门基础篇
0.0°
2018-09-29 原创文章 教程 举报 2366 6 7 1

UI即User Interface(用户界面)。那什么是用户界面呢?

什么是UI设计?


UI即User Interface(用户界面)。那什么是用户界面呢?我们现在用的电脑,手机,iPad等等电子设备都有操作界面,那么这些可以和人进行信息交互的界面都是用户界面。所以衍生出的UI设计就是指对软件的人机交互、操作流程、界面美化的整体设计。说白了就是你通过界面去操作软件或设备,设备通过UI界面显示出你要的信息。这里需要特别强调的就是UI界面一定是人与机器之间是可交互的。好的UI不仅是让软件变得有个性有品味,还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。

Image title


我们还记得传统的打字机或者电报吗?那些虽然也是与信息相关的设备,但由于那个年代科技水平尚不发达,所以没有界面呈现给我们,所以我们与机器之间的交互是通过输入设备完成的。随着科技的发展,计算机等硬件开始有了屏幕,并且人们可以通过鼠标和键盘对软件实施操作,实现了人与机器之间的交互。那么我们本课程要学习的就是如何设计UI界面以及应该掌握哪些基础知识。


UI设计发展史


UI设计到今天大致经历了三个时期。在早期的操作系统中,图形和色彩相对简单,主要通过简单的渐变和阴影来绘制交互界面。我们可以看PPT这张图就是早期计算机的交互界面。


那个时候的计算机内存和CPU的效能和今天都没办法比拟,所以人们的审美也受到技术的限制,我们只能设计出这种相对简陋的UI设计元素,现在看起来相对单调乏味,不过在当时呢,已经算是里程碑式的跃进了。(见下图)

Image title


随着计算机成像能力的发展,在中期UI设计发展出了以拟物化为风格的界面设计。就是PPT这张图上所呈现的。设计师可以设计出色彩更加丰富细腻,更加真实的UI设计元素。在中期主要以写实的设计风格为主。让UI界面看起来更加生动贴近现实。(见下图)

Image title


到了后期随着网络的普及但受到带宽的限制,计算机软件界面要求能最快时间加载并呈现给用户,拟物化风格界面显然加载会很慢并大量消耗流量,人们也看腻了拟物化的界面。根据现实需求,扁平化图标问世了。就是我们现在依然在用的扁平化设计风格。(见下图)

Image title


UI设计风格


拟物化


拟物化的优点:更加真实的还原了生活中的物品作为功能的象征和体现。让人们能够快速理解图标的含义,说白了就是看图说话。


拟物化的缺点:但是拟物化除了看起来逼真它本身有什么缺点呢?第一就是对设计师的手绘能力要求相对较高,如果你没有扎实的绘画基础,你很难用软件绘制出高保真的图标。第二呢,就是工作效率相对低下。因为绘制一个高保真的拟物化图标需要很多图层和样式进行叠加,可能一天也就能画一两个,那么就相对延长了开发时间。现在是一个讲究工作效率的年代,敏捷开发为主。花费太长时间去扣细节已经过时了。第三呢,就是随着移动设备的普及,我们更愿意用手机进行浏览网页。但是高保真的拟物化图标占据的空间比较大所以会消耗我们更多的流量而且页面加载会变的很慢,人机交互变的不太友好。那么为了解决这一问题,扁平化设计风格的图标问世了。一个风格的出现绝对不是凭空出现的,一定是有所需求。对吧。扁平化图标由于色彩单一,样式简单,占据的空间较小,加载快,流量消耗小。所以成为了现在的主流设计风格。

Image title


那么扁平化呢,又可以细分出这种线性的图标,块面类图标和2.5D伪3D图标。

Image title


UI设计的分类


我们将UI设计可以细分出以下三种,分别是GUI  WUI  MUI。


GUI  即图形用户界面(Graphical User Interface,简称 GUI)是指采用图形方式显示的计算机操作用户界面。你可以把它理解成就是专攻画ICON的设计同学,GUI要求设计师有扎实的美术功底,将具象的实物抽象成简单的ICON。需要我们在绘制之前在纸上绘制出简单的草图。GUI的难点就在于你有可能要为一个产品画一整套的ICON,那就非常考验设计师的整体设计风格的把控能力,做到统一当中求变化,变化当中有统一。(见下图)

Image title


WUI 即网页端用户界面(Web User Interface,简称 WUI)是专指网页端人机交互界面的设计。从事WUI的设计同学以后要更多的接触PC端的网页布局设计。要求设计师对网页的开发和设计流程要熟悉和了解。尤其是网页的过去 现在 和未来都有哪些变化,应该怎么布局更合理。WUI设计师要掌握的知识非常多,比如网页的常规尺寸,字体字号,配色等内容,还需要WUI同学会一点HTML及CSS的知识。所以网页UI设计师的身价目前普遍要高于平面设计师。

Image title


MUI  手机端用户界面(Mobile User Interface,简称 MUI)是专指手机端人机交互界面的设计。手机端用户界面的设计有点类似网页端设计,但是由于显示媒介不同,造成的尺寸和交互方式也不同,WUI是通过鼠标和键盘和界面进行交互,而手机端页面主要是通过手指进行点击 长按 滑动 晃动等方式。所以设计的风格也截然不同。但设计的原理是相通的。手机端由于受到屏幕尺寸的限制,所以方寸之间每一像素都很珍贵,所以我们在设计手机端的UI界面的时候一定主要像素对齐等细节。

Image title


UI设计的基本原则


我们在设计任何产品的时候都可以从三个维度去考虑如何设计,哪三个维度呢,就是产品的形,色,质。


形:说的就是产品的页面布局风格,图标类型风格等。一个产品里的UI设计元素应该是统一的。在其他设计分类中,形还可以指代产品的造型等。

Image title



色:就是指一个产品的主色和辅助色都是什么。在用色的时候一定要考究,颜色不要过于多显得杂乱。应该定义一个产品的主色和辅助色即可。一个产品里的UI设计元素其颜色应该是统一的,有主次之分。

Image title


质:质就是指产品的整体设计风格,也叫调性。是清新风格,还是商务风格,还是卡通风格等。质还可以理解成产品的品质。

Image title

Image title

黑马设计答疑解惑交流群:172178479


以上内容均附视频教程:《网页UI设计-零基础入门篇》--可试学

更新:2018-09-29

收藏

6人已收藏

黑马UI

设计交流Q群172178479

  • 37

    作品

  • 57

    粉丝

  • 2

    关注

  • 干货分享!平面版式设计必修课!大厂设计师13年经验总结分享!
  • 图标icon设计必修课-零基础入门
  • 网易设计大咖带你学万能排版技巧
  • 13年设计总监带你了解配色原理!

    猜你喜欢

      2018-09-29 原创文章 教程 举报 2366 6 7 1

      UI设计小白到大神的进阶之路—入门基础篇

      0.0°

      你确定要举报UI设计小白到大神的进阶之路—入门基础篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年08月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      6
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录