请选择 进入手机版 | 继续访问电脑版

移动设计联盟 | UI设计平台 - MobileUI莫贝网

登录  |  注册

QQ登录

只需一步,快速开始

搜索
返回列表
查看: 31121|回复: 1

UI布局欣赏:文章列表与内容详情页设计

[复制链接]

26

主题

26

帖子

115

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
115
发表于 2017-3-24 09:07:34 | 显示全部楼层 |阅读模式
信息内容几乎是每个新闻、博客、摄影、社区等类型媒体常用的功能,所以他们一般都会拥有信息的列表页和内容详情页面的设计,可是这些UI布局的设计往往是差不多样子,也许因为用户体验而不敢做太多的UI修改,可是这样一成不变的布局样式已经看厌了吧?怎么办?
今天我们精选了50+优秀的文章列表与详情页布局设计,这些界面的排版都是比较新鲜独特,但要注意,有些UI设计的界面只是概念设计,你在做移动 APP 或网页设计时应该考虑到程序员能否实现!

Newsfeed V2
设计师:Al Rayhan
193700qM6.jpg
1937015nt.jpg
Bookmark IOS — Folder Menu
设计师:Goutham
1937010L1.jpg
Newsfeed Experiment
设计师:Ales Nesetril
193701n65.jpg
Newsfeed & Cards Screens
设计师:Alex Ds Karera
193702O1W.jpg
Feed Screen For Spare Pixels
193702NPw.jpg
Live Stre.Ams
设计师:Ionut Zamfir
193702DFI.jpg
My Life App
设计师:Zhao Legs
极简风的「我的朋友」列表及内容详情页 APP UI设计。
193702mIV.jpg
^_^
设计师:Tice
193702283.jpg
Desktop
设计师:Thanh Quach
193703kvC.jpg
社交类的展示列表
Share 设计师:Gray
193704ujX.jpg
Twitter Usability Redesign | Version 02 (UX)
设计师:Masum Parvej
193704qJr.jpg
Jong Heng App Concept
设计师:Riko Sapto Dimo
193704tzr.jpg
Tourism Share App
设计师:Yucheng
193704xbU.jpg
Insurance App — UI/UX Design
设计师:Nimasha Perera
193704wiZ.jpg
REM APP BY BSTY
设计师:beasty
193705jwK.jpg
Smart City IOS App Redesign
设计师:Ghani Pradita
193706xvz.jpg
19
设计师:Leeslie
Hangout App #Feed
设计师:Rify
19370630e.jpg
Social Posts #2
设计师:Andrea Boi
展示很好看,文字的色块是根据图像来配色的,所以整体看起来很融合。
193707EvS.jpg
Resturent App Concept
设计师:Zihad
193707kLR.jpg
Interface
设计师:Shan Zi
193708Zd6.jpg
Horizon News
设计师:Daniel Sandvik
左侧是头条,右边是列表,视觉不错,如果在 iPad 上显示应该很适合。
193708dmv.jpg
News Blocks
设计师:Artyom Khamitov
193708qkW.jpg
Infinity Photo IOS App
一个照片社区类的 APP,赞和赞的用户在照片的下方排列。
193709e1c.jpg
Group App Mobile
事件使用流布局,模块使用多种彩色背景。
193709uVC.jpg
Ease UI Components
设计师:KK UI Store
193709ClU.jpg
Travel/Moment
设计师:Gale
旅游类的 APP,配色以蓝色系为主,搭配很好,但头像占了左边很多空位,感觉有点浪费空间哦。
193710Fky.jpg
Practise 3
设计师:REETIME
193710Eo9.jpg
栅格类文章列表界面
Discover SmartUp 设计师:Szilard Nagy
193711xU8.jpg
Video Software
设计师:Regan Jiang
193711k01.jpg
附近社交类 App
设计师:Masudur Rahman
最大特色是,列表的那个图像战满左右屏幕。
193711k17.jpg
Wayfarer — Explore The World
设计师:Alim Maasoglu
图像展示类的 APP,好简约,并且找不到任何线条,几乎是使用空间、留白来解决版式上的视觉设计问题。
193711jeA.jpg
Daily Inspiration App Concept
设计师:Stefan Hiienurm
设计师做了两种视觉展现,分别是亮色和暗调,都很不错呢。
193712Agl.jpg
My Feed + Notifications
193712Xm0.jpg
Fubiz Mobile Terminal Design
设计师:Zhao Legs
宫格式排版,文章一边带图,一边是不带图的,也就是说,一边看图一边只能看标题,额……这个不知道算不算是问题,但如果全部也使用了带图像的,这个版式可能就太花……
193713Xgc.jpg
会员个人主页界面设计
设计师:Grégoire Vella
193713AX9.jpg
Daily UI #005 — Singing App
设计师:zuonx
193713c8g.jpg
Daily Ui 03
设计师:Tingting
193714n3S.jpg
Weekly Layup #9 — Voicey Profile Page
设计师:followilko
Rpple — Dashboard (WIP)
设计师:Jan Losert
Home + Feed For Medical App (WIP)Activity Feed — Day 04
设计师:Ennio Dybeli
Manstand Feed
设计师:Megan Fox
Manstand Continued
设计师:Megan Fox
这种栅格排列挺好看哟,不像普通的统一列表排发,当前程序员的代码量也增加了:)
Side Menu & Home Screen
设计师:Iftikhar Shaikh
渐变背景,但不会很花哨。
好了,下次设计文章列表页,文章详情页等相关的UI项目时,这里将是很好的灵感来源,记得 mark 起来,下次来这里取灵感~!

点评

海!外直播 bitly.net/hhbbhh 禁闻视频 bitly.net/xx4xx “国家”的真面目?当你看不起病时候,国家不见了;当你捡到古物时候,国家出现了;当你被欠血汗钱时,国家不见了;当你举牌示威讨要血汗钱时候,国家又出现了   发表于 2024-3-19 07:35
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表