厨娘ui设计文档

厨娘ui设计文档

一、概述

中国的饮食文化从古到今源远流长。在生活日益丰富的今天，人们对饮食的要求不仅仅是温饱，更讲究健康和美味。近年来，饮食甚至成为娱乐的一部分，关于吃的流行用语层出不穷，可见在当今社会，饮食文化成了必不可少的一部分，多少人以吃货自居，渴望有朝一日能尝尽人间美味佳肴。但生活质量的日益提高并没有伴随着大多数人的健康理念和健康知识的同步提高，这主要是大多数人没有途径去了解更多的饮食知识和文化。因此，我们的团队希望开发一款以饮食社区为主题的APP，为“吃货”们提供饮食交流的平台。

二、设计样式

1、尺寸：UI元素的尺寸以及中间的间隔

2、约束：布局的哪些部分是允许拉大的，哪些不允许

3、颜色：字体的颜色，边界，背景等等——给他们一个名字+RGB/HSB值

4、字体：按钮，标签等等的字体——包括重量（粗体斜体之类的）以及尺寸，你在设计中用到的所有字体，使用TTF格式

5、图片资源：所有的单独的UI元素图片，@1x（正常分辨率）以及@2x（分辨率翻倍）版本，png格式

参数等相关内容做成图表分类好

尺寸参考

三、设计要点总结

1、依从

以内容为主角，其他都是配角。所使用的元素应当作为内容的补充，不要使用会分散人注意力的视觉元素与内容争抢目光。

2、简化

将用户界面简化到只保留最核心的美感。每次在你要添加新元素时都应自问：是否必要？如果你的应用不属于游戏或者没有特定的主题，那么请慎重使用大量的材质、3D效果和多重阴影，将关键放到功能性颜色、协调渐变和美观的文字上。

3、内容最大化

内容应占满整个屏幕，给内中的元素留出最大的空间。不要使用多重容器，将滚动区域最大化以便给交互留出更多空间。

4、颜色

使用显眼的颜色表现能够点击或需要突出的元素。颜色和中性色调选择的正确与否将决定你设计的成败。

5、文字即时内容

为了简化用户界面以及突出内容，应该将重点突出，放在最显眼的地方，如图

6、图标状态

用于导航的图标有两种状态：轮廓及填充。使用轮廓的好处是不分散注意力。如果对图标进行填充，就会转移人的注意力。另外其还可能表示当前页面为活动页面。如图：

7、明晰

让一切显然易懂。按钮应当表现出自己的功能，文字应该方便阅读并留出舒适的间距。你的内容应当明确表现出应用的功效。例如，如果是有关咖啡的应用，则应当能让人联想到咖啡豆、浓缩咖啡和咖啡的棕褐色。

8、使用作用明确的图标

图标不能含混不清，应当明确表现出自身的作用。在可能的情况下，尽量使用文字辅助。如果你使用了图标，那就一定不能在其他地方使用与当前图标类似的其他图 标，否则会让用户看不懂。同样，不要使用“后退”或者“提交”这种太泛泛的文字，而应尽可能明确，例如“返回首页”或者“注册新账号”等。更多细节请阅读 图标部分。

9、描述性画面

每个页面都应说明自己的用途。尽量减少杂乱的东西，代以明确的画面，如果采用了标签栏，则还应使用高亮的当前标签状态。

四、心得与体会

经过一学期的UI设计的学习，我发现ui设计确实很有趣，但是也比较有难度图画得好的 UI 未必做得好（没有美术功底也没有很好的都很美能力也不行。同时很多人说“做 UI 不是光画漂亮图标那么简单”，其实对于我这种新手来说把图标画好了也完全不容易。

兴趣是最最最最最重要的，你想做好移动互联网产品的设计的就得多玩 App，你想做好电商类产品的你就得多网购，结合自己的兴趣去决定是不是要真的花时间学设计然后入 UI 设计这行或者慢慢培养兴趣

临摹、练习等最好能结合一个实际的项目或者课题，这样除了学习别人的技巧之外也能遇上一些真实项目中的问题，思考、解决这些问题是 UI 设计里最有意思的部分