《蚂蚁闲置》UI的设计

北京/设计爱好者/4年前/136浏览

版权

《蚂蚁闲置》UI的设计

先来看一下效果~

Collect

Collect

整套UI体系所有页面

Collect

在正式开始UI页面设计之前，我会先尝试着做几个Demo页面来规划版面，版面在UI上绝对是很重要的，我会很认真的去考虑数值问题，因为这不仅关系到布局，还关系到尺寸变更时倍率缩放问题。在这套750x1334设计尺寸的版面上我使用了8栏布局/间隔宽度16/列宽72，你会发现它们皆为8的倍数（在这套界面元素上大部分使用到的数值我都使用了8的倍数），以此规范来进行设计，即使要将小程序做成APP开发，这套设计图依然可以直接拿过来就用

在正式开始UI页面设计之前，我会先尝试着做几个Demo页面来规划版面，版面在UI上绝对是很重要的，我会很认真的去考虑数值问题，因为这不仅关系到布局，还关系到尺寸变更时倍率缩放问题。在这套750x1334设计尺寸的版面上我使用了8栏布局/间隔宽度16/列宽72，你会发现它们皆为8的倍数（在这套界面元素上大部分使用到的数值我都使用了8的倍数），以此规范来进行设计，即使要将小程序做成APP开发，这套设计图依然可以直接拿过来就用

Collect

《蚂蚁闲置》使用的版面间距与分栏

《蚂蚁闲置》使用的版面间距与分栏

Collect

版面在《蚂蚁闲置》UI中的应用

版面在《蚂蚁闲置》UI中的应用

Collect

在平台的设计中，我设计并使用了大量的扁平卡通元素，使平台体现出色彩分明、简洁明快的风格，这符合我们平台年轻化、轻量级、有趣的特性。同时，在使用平台卡通吉祥物与动画动效的应用场景上，扁平卡通元素都更容易与之结合使用。整个平台的UI控件以简约、轻快、功能清晰为基本原则进行设计，以扁平的形式把页面想体现与表达的内容快速地传达给用户

在平台的设计中，我设计并使用了大量的扁平卡通元素，使平台体现出色彩分明、简洁明快的风格，这符合我们平台年轻化、轻量级、有趣的特性。同时，在使用平台卡通吉祥物与动画动效的应用场景上，扁平卡通元素都更容易与之结合使用。整个平台的UI控件以简约、轻快、功能清晰为基本原则进行设计，以扁平的形式把页面想体现与表达的内容快速地传达给用户

Collect

一级页面-我的

Collect

Collect

Collect

Collect

Collect

Collect

Collect

Collect

Collect

为了节省小程序前端开发的内存使用，绘制出来的所有ICON我都传到了ICONFONT（阿里巴巴矢量图标库）上，这样前端就可以使用ICONFONT生成的的CSS代码来代替切图，减少前端内存占用

为了节省小程序前端开发的内存使用，绘制出来的所有ICON我都传到了ICONFONT（阿里巴巴矢量图标库）上，这样前端就可以使用ICONFONT生成的的CSS代码来代替切图，减少前端内存占用

Collect

应用图标式ICON

Collect

0

Report

|

声明

收藏

Share

原创Works UI APP界面

相关推荐

评论

in to comment

Add emoji

喜欢TA的作品吗？喜欢就快来夸夸TA吧！

相关收藏夹

IP形象设计

IP形象设计

IP形象设计

IP形象设计

3254

作品集

作品集

作品集

作品集

4092

餐饮案例

餐饮案例

餐饮案例

餐饮案例

1250

IP形象及IP内容

IP形象及IP内容

IP形象及IP内容

IP形象及IP内容

IP形象及IP内容

7331

站酷推荐设计师

109

中国风元素插画

中国风元素插画

中国风元素插画

中国风元素插画

中国风元素插画

481

站酷推荐设计师

大家都在看

Log in

推荐

收藏

评论

分享