火星網(wǎng)校
UI設(shè)計之:文章列表與詳情頁布局運(yùn)用
發(fā)布時間：2024-04-16 14:25:55 瀏覽量：206次
信息內(nèi)容幾乎是每個新聞、博客、攝影、社區(qū)等類型媒體常用的功能，所以他們一般都會擁有信息的列表頁和內(nèi)容詳情頁面的設(shè)計，可是這些UI布局的設(shè)計往往是差不多樣子，也許因?yàn)橛脩趔w驗(yàn)而不敢做太多的UI修改，可是這樣一成不變的布局樣式已經(jīng)看厭了吧？怎么辦？
今天我們精選了50+優(yōu)秀的文章列表與詳情頁布局設(shè)計，這些界面的排版都是比較新鮮獨(dú)特，但要注意，有些UI設(shè)計的界面只是概念設(shè)計，你在做移動 APP 或網(wǎng)頁設(shè)計時應(yīng)該考慮到程序員能否實(shí)現(xiàn)！
Newsfeed v2
by Al Rayhan
Newsfeed Experiment
by Ales Nesetril
Newsfeed & cards screens
by Alex Ds Karera
Feed screen for Spare Pixels
by Prakhar Neel Sharma
Live Stre.ams
by Ionut Zamfir
My Life App
by Zhao Legs
有些極簡風(fēng)的「我的朋友」列表及內(nèi)容詳情頁APP UI設(shè)計。
^_^
by Tice
Desktop
by Thanh Quach
社交類的展示列表
Share by Gray
Twitter Usability Redesign | Version 02 (UX)
by Masum Parvej
Jong Heng App Concept
by Riko Sapto Dimo
Tourism share App
by Yucheng
Insurance App?—?UI/UX Design
by Nimasha Perera
REM APP BY BSTY
by beasty
Smart City iOS App Redesign
by Ghani Pradita
19
by Leeslie
Hangout App #Feed
by Rify
Social Posts #2
by Andrea Boi
展示很好看，文字的色塊是根據(jù)圖像來配色的，所以整體看起來很融合。
Resturent App Concept
by Zihad
interface
by Shan Zi
Horizon News
by Daniel Sandvik
左側(cè)是頭條，右邊是列表，視覺不錯，如果在 iPad 上顯示應(yīng)該很適合。
News Blocks
by Artyom Khamitov
Infinity Photo iOS App
by Aleksandar Nikcevic
一個照片社區(qū)類的 APP，贊和贊的用戶在照片的下方排列。
Group App Mobile
by Agung Krisna Wijaya
事件使用流布局，模塊使用多種彩色背景。
Ease UI Components
by KK UI Store
Travel／Moment
by Gale
旅游類的 APP，配色以藍(lán)色系為主，搭配很好，但頭像占了左邊很多空位，感覺有點(diǎn)浪費(fèi)空間哦。
practise 3
by REETIME
柵格類文章列表界面
Discover SmartUp by Szilard Nagy
Video Software
by Regan Jiang
附近社交類 App
by Masudur Rahman
最大特色是，列表的那個圖像戰(zhàn)滿左右屏幕。
Wayfarer?—?Explore the World
by Alim Maasoglu
圖像展示類的 APP，好簡約，并且找不到任何線條，幾乎是使用空間、留白來解決版式上的視覺設(shè)計問題。
Daily Inspiration App Concept
by Stefan Hiienurm
設(shè)計師做了兩種視覺展現(xiàn)，分別是亮色和暗調(diào)，都很不錯呢。
My Feed + Notifications
by Prakhar Neel Sharma
Fubiz mobile terminal design
by Zhao Legs
宮格式排版，文章一邊帶圖，一邊是不帶圖的，也就是說，一邊看圖一邊只能看標(biāo)題，額……這個不知道算不算是問題，但如果全部也使用了帶圖像的，這個版式可能就太花……
會員個人主頁界面設(shè)計
by Grégoire Vella
Daily UI #005?—?Singing App
by zuonx
Daily Ui 03
by Tingting
Weekly Layup #9?—?Voicey Profile Page
by followilko
Rpple?—?Dashboard (WIP)
by Jan Losert
Home + Feed for medical app (WIP)
by Prakhar Neel Sharma
Activity Feed?—?Day 04
by Ennio Dybeli
Manstand Feed
by Megan Fox
Manstand Continued
by Megan Fox
這種柵格排列挺好看喲，不像普通的統(tǒng)一列表排發(fā)，當(dāng)前程序員的代碼量也增加了：）
Side Menu & Home Screen
by Iftikhar Shaikh
漸變背景，但不會很花哨。
好了，下次設(shè)計文章列表頁，文章詳情頁等相關(guān)的UI項目時，這里將是很好的靈感來源，記得 mark 起來，下次來這里取靈感~！
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設(shè)計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設(shè)計的尺寸規(guī)范嗎？這里為您詳細(xì)介紹iPhone6的UI設(shè)計尺寸規(guī)范，包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設(shè)計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計師的...
-
3. 移動端UI設(shè)計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設(shè)計中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設(shè)計的基本知識
-
4. 移動端列表頁和表單頁設(shè)計秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
-
5. 10個免費(fèi)學(xué)習(xí)UI設(shè)計的網(wǎng)站 提升你的設(shè)計能力
怎樣可以提升你的UI設(shè)計能力!第一個:站酷站酷想必是設(shè)計師都知道的一個網(wǎng)站,里面不止有UI設(shè)計的資源,還有其他設(shè)計的,不如:平面設(shè)計、網(wǎng)頁設(shè)計、字體...
-
6. 推薦10本適合UI設(shè)計師看的書籍，輕松掌握技能!
對于想要提高自己的設(shè)計能力和創(chuàng)造力的小白和UI設(shè)計師來說,這本書是一個很好的選擇。4.《設(shè)計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 零基礎(chǔ)學(xué)UI設(shè)計要多久？培訓(xùn)完能拿多少工資？
探索零基礎(chǔ)UI設(shè)計培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程，以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
-
8. 物聯(lián)網(wǎng)APP UI設(shè)計:創(chuàng)造智能硬件領(lǐng)域的沉浸式體驗(yàn)
ui設(shè)計應(yīng)該讓用戶一目了然,能夠快速找到所需的信息和功能。在設(shè)計過程中,應(yīng)盡量使用簡潔的圖標(biāo)、文字和色彩,避免過多的視覺干擾。符合用戶習(xí)慣:ui設(shè)...
-
9. 設(shè)計中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計中的重要性以及新興技...
-
大家今天走運(yùn)了,我就把自己總結(jié)出來的學(xué)習(xí)UI設(shè)計的一些經(jīng)驗(yàn)與大家一起分享吧。想做一個好的UI設(shè)計師除了應(yīng)該具有一定的審美能力,還要了解整個產(chǎn)品的...
最新文章
