UI世界的星辰大海-组件化设计

128天前发布

原创文章 / UI / 观点
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

之前写了一些UI界面方面的文章,今天做一个简单的总结,谈谈UI组件的作用及制作。

之前写了一些UI界面方面的文章,今天做一个简单的总结,谈谈UI组件的作用及制作。


1.使用组件有什么好处?


1、提高设计效率,让设计师花更多的时间专注于设计上的创意。

2、提升团队的沟通效率 。

3、利于开发适配。


2.常见组件有哪些?


UI世界的星辰大海——常见的组件有:标题栏、搜索栏、导航栏、筛选(下拉选项)、banner、金刚区、瓷片区、标签、按钮、卡片、Tab 栏、输入框、Toast、Feed 流(列表流、文字流、视频流)等。


页面举例:

  


3. 组件制作实例


在实际设计过程中我们可以发现颜色、文字、icon这三大元素在界面中使用频率是最高,因此我们将其作为组件库的最基础元素。

然后由基础元素构建其他UI组件,比如搜索框、输入框、按钮、Tab栏等,最后通过组件样式构建我们的UI界面。  

下面以颜色、文字、icon这三大元素为例简单介绍一下Sketch Libraries 制作。


1、文字

注意:影响文字层级的三要素有字号、字重、颜色


2、颜色

         

3、图标

注意:图标命名一般用icon/**,比如icon/取消。



4、组件制作:

注意:制作组件时应该把各种状态都列出来,设计样式尽量保持统一性。

以商品售卖为例: 基础卡片的不同状态有正常、售磬等,应该在制作组件时都列出来。



以金融产品为例:每个卡片的设计样式尽量保持统一性,方便负责不同模块内容的设计师复用同一个组件,提升项目的设计效率。


UI组件导入Sketch Libraries  库的方法:


1、选择要导入的文件:




2、导入之后点左侧加号找到刚刚的组件库,选择要的控件。


3、之前导入的组件库有更新,右侧会有提示,点击即可同步。


4.组件制作注意事项


在设计的过程中我们要根据实际项目情况调整Llibraries。一般来说可以先出一些主界面的样式,确定我们的风格及相关规范,然后在后续绘制页面时慢慢完善我们的UI Libraries。 

 

之前写的文章总结了部分组件及页面内容,后面会继续更新,希望能帮助到大家。



UI组件篇:


1、超详细的图标风格总结-线性图标

2、UI顶部栏设计,那些你不知道的秘密!

3、关于Tab设计的一些小秘密你知道吗?

4、UI底部Tab 栏设计总结

5、UI界面中的按钮设计总结

6、UI界面标签设计总结

7、UI界面配图怎么做?

8、间距在UI界面中到底有多重要?

9、如何设计瓷片区,看看这篇文章!

10、Feed流设计:这些知识你知道吗?

11、这些输入框的设计细节你知道吗?

12、如何更好的使用弹窗?

13、关于进入首页前的授权弹窗那些事


UI页面篇:


1、如何设计登录页,试试这几种方法!

2、启动页/闪屏/引导页-你还傻傻分不清?

3、三步快速上手UI搜索页设计

4、UI筛选页面设计总结


Banner篇:


1、图片类Banner设计套路

2、六招教你搞定插画类banner画面主体元素构成!

3、这些banner文案层处理方法你知道吗?

4、十一种banner背景处理方式,给设计加一点思路!


图片素材来源于网络和应用截图,仅用于学习交流

更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】


- END -


31
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息