首页 > 建站资源 > 网站优化 > APP界面设计:关于卡片设计、分割线、无框设计的思考

APP界面设计:关于卡片设计、分割线、无框设计的思考

时间:2018-01-12    来源:人人都是产品经理

每年都会有一波又一波的设计趋势流行起来,被设计师们追随和模仿着。大家总觉得迎合着趋势做的设计肯定不会差。

比如,之前流行的卡片设计,很多设计师都采用这种形式,来区隔内容模块;今年流行的无框设计,一窝蜂的开始去分割线、去边框,做大面积留白的设计。

然而,你有没有反问自己是在被趋势牵着鼻子走,还是真正深思熟虑后,选择更符合自己产品定位和内容传达的表现形式?

最近我也在思考这个问题,对不同产品界面的布局样式进行分析和梳理,下来分享给大家。

界面布局样式有哪些?

在做界面设计时,我们为了区分信息结构及层次,通常采用以下 3 种布局样式:

卡片式设计、分割线、无框设计

界面布局样式有哪些?

在做界面设计时,我们为了区分信息结构及层次,通常采用以下 3 种布局样式:卡片式设计、分割线、无框设计。

1. 卡片式设计

自从Android4. 1 上Google Now登台亮相之后,卡片式这种设计思路/风格慢慢就流行了起来,被大家所关注和使用。

Google将它称之为“Inside Out design(由内而外式)”,它的本质是更好的处理信息集合,那么卡片式设计适合运用在什么地方呢?

(1)增加空间利用率

相比于传统列表式布局,卡片式设计能更好的打破原有的框架。

比如,在传统列表下,内容一般为纵向滚动操作,展示的内容有限,而采用卡片式的布局,在纵向的内容流里,还可以很好的增加横向滑动的内容区域,而且看起来很整体。

比如,知乎feed流里增加知乎live的横向滑动内容。


相关推荐
探探和Linkedin都用的卡片设计 怎样才有好的体验?
有效提高网站销售转化率的16个UI设计秘诀
32条优秀UI设计建议 助你提升网页易用性及转化率(1)
32条优秀UI设计建议 助你提升网页易用性及转化率(2)
网页设计必读!125个小优化提升网页可用性(三)
国内人气最高的百度首页,原来背后的设计过程是这样的!
Axure实例:制作一个通用的移动端内容滚动区
以简书的网站改版为例,浅谈产品如何完成友好迭代
想要设计一个完美的搜索框 你需要注意这9个要素
制作完美搜索框的9个要素设计原则
2017版“我的淘宝”可能是迄今为止最懂你的设计
想让网页可读性更强?你得善用这个 F 式布局
iOS 11 设计中的几个 UI 设计细节
UI设计规范:单选按钮vs复选框要怎么用?
APP设计教程:特殊情况下如何处理加载页面?
老年用户的体验思考:如何保证界面适合阅读
APP设计教程:UI界面中的版式设计理论
APP设计:移动端下拉表单的更好选择
交互设计入门:全面看懂尼尔森十大可用性原则!
UI界面设计:空心图标是否比实心图标难以识别?
怎么做才能防止用户对界面优化的不满?
交互设计优化:什么是界面设计?
干货:移动端响应式的7种UI布局解析
9个UI界面设计灵感来源的网站推荐
网页设计:如何使登录页更完美与高效?
UI设计:如何实现完美的文本排版设计?
从iOS 11看怎样设计APP图标
5种技巧教你如何提高移动端用户体验
APP设计:如何打造优质移动页面提高用户体验?
如何设计出正确的搜索模式?
移动用户体验设计之列表视图与网格视图
APP设计:内容呈现更友好易用的5种常见导航设计模式
那些方法可以让搜索框的体验更好?

精彩推荐

热门教程