个人技术博客

由于我在团队里负责的是美工的版块，所以咱们就说说

UI那点事儿

~

0.关于UI

我是在结对编程才开始接触原型设计，接触UI的，发现有很大的兴趣，才开始慢慢学习和了解~

以下是百度百科对UI的定义：

UI即User Interface（用户界面）的简称。泛指用户的操作界面，包含移动APP，网页，智能穿戴设备等。UI设计主要指界面的样式，美观程度。而使用上，对软件的人机交互、操作逻辑、界面美观的整体设计则是同样重要的另一个门道。好的UI不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由，充分体现软件的定位和特点。

我对UI的定义：

一款软件的颜值！所以要好看！功能清楚！用户体验友好！毕竟这是个看脸的世界

UI设计就像是在创造软件的美丽的外表，而编程设计就像是在塑造软件有趣的灵魂。软件有了美丽的外表和有趣的灵魂，谁不喜欢呢?

1.UI学习

1.1 新手入门

俗话说巧妇难为无米之炊，所以新手入门第一件事就是了解界面设计的工具，根据自己的需求和能力，找到适合自己的工具~现阶段UI设计产品层出不穷，种类繁多，功能各异，让我这初学者无从下手，经过一番研究和咨询，我尝试用了几款比较初级的原型设计软件，以下是我的用户体验?

No.1: 墨刀（MockingBot）

• 版本 ：Mac os & iOS
• 用户体验：

  傻瓜式操作

  ，基本上都是拖拽式操作，不需要看教程，你就能够上手。多按几个按钮，多试几下，你就大概知道要怎么操作了，

  非常适合新手入门！

  素材库不算多，但是对于刚入门的新手来说，已经是打开新世界，耳目一新了！也可以进行团队协作，交互性也不错，手机ios端可以预览界面设计的效果（手机端也就是这个功能，不过用了其他软件以后觉得墨刀这个功能真的很良心了！！！）也可以生成网页预览版本，还可以二维码分享预览，交互性真是良心！总体来说，新手用墨刀应该是最合适不过了，操作简单，功能完备，交互性好~
• 适合：新手入门，UI初步设计草稿~
• 安利指数：⭐️⭐️⭐️⭐️⭐️

No.2: Balsamiq Mockups3

• 版本：Mac os
• 用户体验：手绘风的界面很好看！手绘的画风也有点是打草稿的意思，貌似开发者就是这个意图。操作让我觉得在做一页页的ppt?，操作不难。界面全英文的，得看懂这些英文，知道你要用的东西在哪找得到。交互性不是很好，要想看到界面转换的效果，就要求对方的电脑也要有这个软件，否则只能导出每个界面的pdf图片，预览效果不直观。（当时听说可以产生网页预览效果，开心了一下子。下了Napkee，效果可以说是一言难尽。以后想用Napkee的小伙伴可以放弃了?）为了让别人预览到页面转换关系，迫使我用OmniGraffle画了一晚上的各页面关系图（orz）毕竟是一款小众的原型设计软件，如果你对交互性没有要求，maybe为了颜值可以一试？但是对交互性稍微有点要求的小伙伴，就不要为难自己了（认真脸）
• 案例教程：Balsamiq Mockups3中文教程 全英文软件，咱们还是看看教程吧。
• 适合：（英语好）新手入门，UI（不要求交互性）的草稿
• 安利指数：⭐️⭐️⭐️（可能完全为了手绘风安利？？？）
• 画风：

  

原型设计的工具很多，找到一款好用的你喜欢的软件的捷径是——多试！探索期间，我也下了很多其他的软件，因为不同得人安利的软件可能都不一样。下下来，试试，看看画风是不是合胃口，不喜欢就卸掉呗，你终究会找到适合你的~

新手入门至此大概就了解了UI设计是怎么一回事，也能够设计一个比较简单的作品出来了~

1.2 新手进阶

完成前期界面初步设计（草稿），PM说接下来你们该去学习ps了，要学会切图，切不同像素的图。

（一脸懵逼?）什么是切图？？？听说ps很难？？？

从这里开始，我才觉得可能才真正接触UI吧，所以在知乎搜了这么一个问题从零基础如何自学 UI 设计？里面安利很多素材~很多教程~很多干货！值得一看！

进阶工具：Sketch

在知乎里探索发现，Mac做界面设计可以用Sketch，比ps做界面友好，功能也不逊于ps？那就试试呗~

• 用户体验：Sketch确实名不虚传啊！真心强大~功能完备，操作不难，界面友好。就单纯他比ps轻量级就能完胜ps?，我启动和退出ps都要好久（可能我的电脑比较不给力）。而且Sketch有很多超级好用的插件，极大的方便界面设计——sketch measure（标注插件，一键标注所有，不要太良心！）等等，虽然sketch原版是英文的，但是也有汉化插件，反正就是各种好！上手也不难，看几个视频教程就会了~~
• 教程：这个网上还是蛮多的~毕竟sketch很热门！
• 安利指数：⭐️⭐️⭐️⭐️⭐️ （良心软件！）

其他工具：真的要设计出前端人员可用的UI还是需要用到很多工具的，好的工具也能减轻你的工作量~这里有一个工具安利网站，个人觉得还不错~工具-UI中国

进阶素材

在设计UI的时候还需要用到许多的素材：图标、图片、网页模板等，有的是要放入你的作品中的，有的也是需要激发你的设计灵感的~

图标素材：Iconfont

图片素材：花瓣网、优界网

UI设计学习网站：UI中国、站酷网、优阁网等

这些干货网站都可以在上面提到的知乎的那个问题里找到~~~

这些是我在UI设计学习过程中的一些收藏

其实在这些网站里还能找到很多教程、设计规范等等很多干货，很多需要学习的东西！

2.经验总结

完成我们产品的UI设计的过程，是边学习边完成的过程，这就是所谓的

Doing by Learning

吧~

学习了很多关于UI的知识，也激发了我的兴趣（毕竟不喜欢编程，也许以后会走UI这条路也不一定呢~）

在写这篇博客的时候，想写的东西很多，但是交叉的内容有很多，不知道该怎么排版才能让读者真正能收获一些东西呢，亦或是让以后的自己想起当年这些前车之鉴，maybe I‘m not a good writer~

如果我有幸让你看到这篇思路有些乱的技术博客，原谅我的词穷和乱七八糟的逻辑?

我是个新手，UI的路还很长~有幸我们可以一起学习~

转载于:https://www.cnblogs.com/perhap-s/p/7830043.html