UI界面设计 ·

APP设计课程:手机APP图文列表设计【大图一列】

APP ui设计或是APP 视觉设计这些都是大家现有的Ui设计基础可以做到的。然而一些好的APP设计布局思维和排版技巧,是25学堂一直传授给大家的真正的干货。

这节讲的重点是:如何设计手机APP图片列表或者是手机APP图文列表。

下面几个参考图是25学堂的老谭童鞋,从目前国内比较大的旅游APP当中的截图。截图的内容就是各个APP图片列表或者是APP图文列表。

 

第一种手机APP图文列表设计效果:同程旅游网APP图文列表设计

同程旅游APP 图文列表

手机APP图文列表设计分析:

这是一种大图一行一个布局。优点:视觉冲击力很强,很适合旅游、电商类的APP。

而且文字放居中,文字有大有小,错落有致。文字即代表了图片的主题内容。

 

第二种手机APP图文列表设计效果:途牛旅游网APP图文列表设计

途牛旅游APP 图文列表

手机APP图文列表设计分析:

同样采用大图的背景设计,把图片的主题和出发信息放置在左上角。价格信息放置在右下角。这样的设计比较难的设计。目前途牛的这个APP列表设计页面不能说是很美观,只能说一般。 有点打补丁的视觉效果。

 

第三种手机APP图文列表设计效果:国外经常采用的APP图文列表设计

app图文列表设计

APP图片列表2

上面这2个案例国外优秀的APP列表设计。有点偏社交元素的APP图文列表。APP设计也是非常精美。文字区域是有半透明的浮层背景。更显得文字的表达 更有空间感。圆角的合理运用使得整个界面非常的有逼格。

 

第四种手机APP图文列表设计效果:阿里去啊app列表设计

阿里去啊 APP 图文列表

我们一看到这样的APP列表设计风格,就知道是电商APP。必要的元素都排列的很条理。也是国内电商界最常用的一种图文列表排版。规规矩矩。25学堂也希望大家结合自己的产品特性来设计一些有个性的app图文列表界面。如下图:

类似于支付宝钱包的app界面设计

国外的一个类似于支付宝钱包的app界面设计-生活-灰色-列表,搜索,个人信息,详细内容-App设计分享。

 

第五种手机APP图文列表设计效果:图片和文字区域是相等的布局设计

APP图文卡片化设计

这一类APP图文设计采用了1:1的对称区域设计原则。 同时留白技巧使用合理。更像APP卡片化设计布局。扁平化的设计风格更具时尚感和小清晰感。

以上五个手机APP图文列表设计【大图一列】案例的欣赏和学习。希望各位看完有比较清楚的怎么去设计自己APP的图文大图一列的布局排版设计。

下一节课程。我们将一行多列的APP图文列表设计。 不知道大家有没有发现,APP列表就是一张张卡片堆积而成的。这就是谷歌公司所倡导的移动卡片化设计的潮流。

参与评论

  • 夏希

    [叹气]

    2年前 (2016-03-06)
    回复
    回复夏希
  • 夏希

    [叹气]

    2年前 (2016-03-06)
    回复
    回复夏希
  • Vic

    不抢个沙发那还是我嘛 签到

    3年前 (2016-01-27)
    回复
    回复Vic
  • Vic

    不抢个沙发那还是我嘛 签到

    3年前 (2016-01-27)
    回复
    回复Vic