UI设计之:文章列表与详情页布局运用
信息内容几乎是每个新闻、博客、摄影、社区等类型媒体常用的功能,所以他们一般都会拥有信息的列表页和内容详情页面的设计,可是这些UI布局的设计往往是差不多样子,也许因为用户体验而不敢做太多的UI修改,可是这样一成不变的布局样式已经看厌了吧?怎么办?
今天我们精选了50+优秀的文章列表与详情页布局设计,这些界面的排版都是比较新鲜独特,但要注意,有些UI设计的界面只是概念设计,你在做移动 APP 或网页设计时应该考虑到程序员能否实现!
Newsfeed v2
by Al Rayhan
![](https://img.haomeiwen.com/i294184/fdeaaee4161f5daf.png)
![](https://img.haomeiwen.com/i294184/07acba319aec5895.png)
Bookmark iOS — Folder Menu
by Goutham
![](https://img.haomeiwen.com/i294184/1b7b52ffe4ac1766.png)
Newsfeed Experiment
![](https://img.haomeiwen.com/i294184/9338c3f2b8ed8ef3.png)
Newsfeed & cards screens
![](https://img.haomeiwen.com/i294184/75d0a29b8b8e20c1.png)
Feed screen for Spare Pixels
![](https://img.haomeiwen.com/i294184/1bfa432477f4ad72.png)
Live Stre.ams
by Ionut Zamfir
![](https://img.haomeiwen.com/i294184/2dfca0ccbaeca076.png)
My Life App
by Zhao Legs
有些极简风的「我的朋友」列表及内容详情页APP UI设计。
![](https://img.haomeiwen.com/i294184/8edc3e08661c9d3e.png)
^_^
by Tice
![](https://img.haomeiwen.com/i294184/f1527616b018f772.png)
Desktop
by Thanh Quach
![](https://img.haomeiwen.com/i294184/881cfa1b2e3109c8.png)
社交类的展示列表
Share by Gray
![](https://img.haomeiwen.com/i294184/3e274d594d0c0513.png)
Twitter Usability Redesign | Version 02 (UX)
by Masum Parvej
![](https://img.haomeiwen.com/i294184/41404cc517bf99af.png)
Jong Heng App Concept
![](https://img.haomeiwen.com/i294184/d9165ddeb4ff81ec.png)
Tourism share App
by Yucheng
![](https://img.haomeiwen.com/i294184/5f56752ff1ff5c4f.png)
Insurance App — UI/UX Design
![](https://img.haomeiwen.com/i294184/cc9a8d2fcfd9d84c.png)
REM APP BY BSTY
by beasty
![](https://img.haomeiwen.com/i294184/729e87d4cb1767c0.png)
Smart City iOS App Redesign
![](https://img.haomeiwen.com/i294184/97308106b73faa03.png)
19
by Leeslie
![](https://img.haomeiwen.com/i294184/717dc69a95067995.png)
Hangout App #Feed
by Rify
![](https://img.haomeiwen.com/i294184/4c59f0d7cf02eea5.png)
Social Posts #2
by Andrea Boi
展示很好看,文字的色块是根据图像来配色的,所以整体看起来很融合。
![](https://img.haomeiwen.com/i294184/4b8a989f1495f86a.png)
Resturent App Concept
by Zihad
![](https://img.haomeiwen.com/i294184/db04b29d2c6674f5.png)
interface
by Shan Zi
![](https://img.haomeiwen.com/i294184/81d92756ce32bf0e.png)
Horizon News
左侧是头条,右边是列表,视觉不错,如果在 iPad 上显示应该很适合。
![](https://img.haomeiwen.com/i294184/03de839cfdb31a78.png)
News Blocks
![](https://img.haomeiwen.com/i294184/3182e93119075da9.png)
Infinity Photo iOS App
一个照片社区类的 APP,赞和赞的用户在照片的下方排列。
![](https://img.haomeiwen.com/i294184/275eca5f2ef06445.png)
Group App Mobile
事件使用流布局,模块使用多种彩色背景。
![](https://img.haomeiwen.com/i294184/30c6d66391e2406c.png)
Ease UI Components
by KK UI Store
![](https://img.haomeiwen.com/i294184/7574e4ecfa2a2312.png)
Travel/Moment
by Gale
旅游类的 APP,配色以蓝色系为主,搭配很好,但头像占了左边很多空位,感觉有点浪费空间哦。
![](https://img.haomeiwen.com/i294184/5dfe75afc34cf1ae.png)
practise 3
by REETIME
![](https://img.haomeiwen.com/i294184/9b7b3cbd3280d45b.png)
栅格类文章列表界面
Discover SmartUp by Szilard Nagy
![](https://img.haomeiwen.com/i294184/c57218729c855d26.png)
Video Software
by Regan Jiang
![](https://img.haomeiwen.com/i294184/7903943a06927feb.png)
附近社交类 App
最大特色是,列表的那个图像战满左右屏幕。
![](https://img.haomeiwen.com/i294184/9d258d6da697a091.png)
Wayfarer — Explore the World
图像展示类的 APP,好简约,并且找不到任何线条,几乎是使用空间、留白来解决版式上的视觉设计问题。
![](https://img.haomeiwen.com/i294184/3dfe6be551eac042.png)
Daily Inspiration App Concept
设计师做了两种视觉展现,分别是亮色和暗调,都很不错呢。
![](https://img.haomeiwen.com/i294184/b8d2ec50cbf5273b.png)
My Feed + Notifications
![](https://img.haomeiwen.com/i294184/16c0c4ec9121af37.png)
Fubiz mobile terminal design
by Zhao Legs
宫格式排版,文章一边带图,一边是不带图的,也就是说,一边看图一边只能看标题,额……这个不知道算不算是问题,但如果全部也使用了带图像的,这个版式可能就太花……
![](https://img.haomeiwen.com/i294184/50c46493d31b6ed3.png)
会员个人主页界面设计
![](https://img.haomeiwen.com/i294184/fee148c642d27bd0.png)
Daily UI #005 — Singing App
by zuonx
![](https://img.haomeiwen.com/i294184/c48859ca3747af53.png)
Daily Ui 03
by Tingting
![](https://img.haomeiwen.com/i294184/e3007e7669dc2edc.png)
Weekly Layup #9 — Voicey Profile Page
by followilko
![](https://img.haomeiwen.com/i294184/4936abbdcbb843b2.png)
Rpple — Dashboard (WIP)
by Jan Losert
![](https://img.haomeiwen.com/i294184/442bad0a730ed479.png)
Home + Feed for medical app (WIP)
![](https://img.haomeiwen.com/i294184/dc4c55186e96dc48.png)
Activity Feed — Day 04
by Ennio Dybeli
![](https://img.haomeiwen.com/i294184/95519f943cc0fc33.png)
Manstand Feed
by Megan Fox
![](https://img.haomeiwen.com/i294184/1e67ccc435cbabbc.png)
Manstand Continued
by Megan Fox
这种栅格排列挺好看哟,不像普通的统一列表排发,当前程序员的代码量也增加了:)
![](https://img.haomeiwen.com/i294184/3861ff28a987d66e.png)
Side Menu & Home Screen
渐变背景,但不会很花哨。
![](https://img.haomeiwen.com/i294184/cea53393b756ac0f.png)
好了,下次设计文章列表页,文章详情页等相关的UI项目时,这里将是很好的灵感来源,记得 mark 起来,下次来这里取灵感~!