美文网首页
界面布局之_关于无框设计的思考

界面布局之_关于无框设计的思考

作者: 拾叶姑娘 | 来源:发表于2018-01-10 10:08 被阅读16次

3. 无框设计

无框设计是近两年流行起来的的一种新的趋势,是去除界面中的边框,分割线,用间距来区分内容。

它适合运用于:a.大图为主;b.内容有规律,c.小众且垂直产品

a.大图为主

大图为主指的是以图片为主的产品,每张图片本身就可以起到分割的作用,因此,不需要采用多余的线或边框进行分割。

比如:instagram,发布图片前,用户被强制对图片进行正方形截取,才能保证图片在feed流里的宽度,撑满全屏,从而看起来很整体。 

图片起到分割的作用

可能有的同学会问,为什么国外的产品就这么高大上,微博怎么就不能去分割线,做减法,搞的洋气一些呢

instagram只支持发送固定尺寸的图片和视频,而你想人家微博支持发送图片、文章、视频、纯文字、签到、点评...等等的内容。

同时微博feed流里的图片,支持1张-9张不同情况的排版,而且1张图片时,为了更好的呈现出用户的原图比例,还要处理成4:3,16:9,正方形,以及特殊尺寸的缩略样式,同时还有gif图的情况,还支持你在自己状态下添加不同话题。那么你想只用间距留白来区分?场面会像刚地震完的样子...(认真脸) 

重体量产品

b.内容有规律

内容有规律指的是,留白间距上下的内容,最好是相对一致的、重复的、亲密的,这样用户会下意识的将其分为一组

比如,Airbnb采用的无框设计,原因是它们的信息元素很统一、重复,才给人营造出比较整体的感觉。同时,合理的运用大标题也起到关键性作用。

内容有规律

而同样采用无框设计的“下厨房”APP,首屏由于每个模块信息元素不一致,而且模块内元素的左右间距也不一样,字号种类过多,导致界面看起来相对有些杂乱。

每个模块信息元素不一致

c.小众且垂直产品

小众且垂直的产品,一般情况下目标用户聚焦,功能简洁。因此,能够比较好的运用无框设计,跳出传统的规范做出创新的设计

比如:轻芒杂志,采用无框设计的同时打破传统的移动端浏览体验,更符合它们自己的产品调性。 

符合它们自己的产品调性

下面是FOOTAGE,一款小众且文艺的产品,由VUE的团队设计的。他们采用无框设计的前提是,每个界面元素有限,功能内容简洁。

功能内容简洁

但如果你是像微博,淘宝,微信等体量的产品,用户群体广,内容繁杂且层级较深。那么,你需要找到一个效率更高的信息呈现和交互的基础隐喻,无框设计可能就不太适合了。

总的来说,任何表现形式都应该是为了更好的呈现功能及内容,而不是盲目的追随趋势。

自成一派的优秀设计师并不需要受到任何风格的局限,因为他知道风格并无好坏之分,而是探索更适合自己产品的处理方式。

相关文章

  • 界面布局之_关于无框设计的思考

    3. 无框设计 无框设计是近两年流行起来的的一种新的趋势,是去除界面中的边框,分割线,用间距来区分内容。 它适合运...

  • 界面布局之_关于卡片设计的思考

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

  • 【用户体验要素】框架层

    界面设计、导航设计、信息设计——更加清晰的一个层级 界面设计是我们熟知的关于“按钮、输入框和其他界面控件”的领域;...

  • 2017/01/10

    技术 凭什么断言「无框界面」将成为2017年的主流UI设计风格?

  • 无框界面

    什么是无框界面 纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块…),但界面设计的进化历程...

  • 《瞬间之美》读书笔记

    《瞬间之美-Web界面设计如何让用户心动》------Robert Hoekman,Jr. 1.布局 布局是内容组...

  • 界面布局之_关于分割线的思考

    2. 分割线设计 在UI设计中,最传统也是最常见的的分隔方式是“线”。它能起到分隔、组织、细化的作用,帮助用户了解...

  • 设计随笔

    界面组成分为功能性元素和感知性元素 功能性元素主要指交互层面,包括按钮,文本框的设计,完成的是界面的功能布局。 感...

  • <S-Blog> 博客首页界面设计

    在设计完了登录界面以后,继续使用flex布局设计一下博客首页。 首先,来设计一下首页的界面。 圣杯布局 在css ...

  • 关于卡片设计、分割线、无框设计的思考

    转自:大牙的设计笔记 每年都会有一波又一波的设计趋势流行起来,被设计师们追随和模仿着。大家总觉得迎合着趋势做的设计...

网友评论

      本文标题:界面布局之_关于无框设计的思考

      本文链接:https://www.haomeiwen.com/subject/dswnnxtx.html