每日一貼

中臺組件設計指南:系統布局


本篇文章將分享 Web 端系統布局,從基本布局初識、網(wǎng)格、布局模塊到柵格進(jìn)行完整鏈路內容整合,以簡(jiǎn)單易懂的案例與大家進(jìn)行探討。

這份上萬(wàn)字的指南,幫你學(xué)會(huì )用柵格系統構建響應式設計


今天,90% 的媒體互動(dòng)都是基于屏幕的,通過(guò)手機,平板,筆記本電腦,電視和智能手表來(lái)與外界產(chǎn)生聯(lián)系。多屏設計已成為商業(yè)設計中不可或缺的一部分,響應式設計正迅速成為常態(tài)。作為 UI 設計師,我們希望為我們的產(chǎn)品在不同尺寸下都能為用戶(hù)提供良好的用戶(hù)體驗,柵格系統可以幫助我們做到這一點(diǎn)。

B端web表格設計總結


在B端的UI設計過(guò)程中經(jīng)常要接觸到大量的表單設計,且要展示海量數據,因此如何展示更清晰且讓用戶(hù)使用起來(lái)更便捷是設計師主要需要考慮的。結合自己在實(shí)際工作中遇到的列表類(lèi)型總結了 web 表格設計的常用基礎列表模式,并進(jìn)行匯總以便后續使用。

版式不夠活躍?試試這幾個(gè)方法!


在日常的設計工作中,版式即一個(gè)畫(huà)面的骨架,也是視覺(jué)傳達的重要組成部分,版式整體的活躍程度也能起到改變畫(huà)面基調的作用,這也就是為什么很多作品看似很「簡(jiǎn)單」,但卻不失設計感的原因。如何把原本比較中規中矩的版式結構通過(guò)設計手法將其差異化、提升設計感、增強活躍度,這樣做的目的是為了打破墨守成規的形式,提升用戶(hù)停留時(shí)間,以及畫(huà)面的趣味性,所以本期就和大家一起總結一些常用增強版式活躍度、提升版式設計感的設計手法。

怒馬!超實(shí)用的單頁(yè)網(wǎng)站設計指南(附大量資源)


單頁(yè)設計,是一項處理小型網(wǎng)站的絕佳技巧,甚至有些網(wǎng)站你可能認為一張頁(yè)面搞不定,也同樣適用。從易于維護,到減少帶寬占用,使用單頁(yè)網(wǎng)站的好處不勝枚舉。 假如你應對的是個(gè)小型網(wǎng)站,通常只有幾個(gè)頁(yè)面的那種,可以考慮使用單頁(yè)設計,看看它是否能簡(jiǎn)化項目,對用戶(hù)更加友好。繼續閱讀,你將了解它的益處,何時(shí)使用(或不該使用),還有一些你該遵循的絕佳慣例。

旅游網(wǎng)站設計分析!教你10個(gè)小技巧


進(jìn)入酒店預訂網(wǎng)站或是板塊的用戶(hù)一般來(lái)說(shuō)目的性很強,他們心里其實(shí)已經(jīng)有了很完整的設想,而來(lái)到網(wǎng)站只是為了完成計劃。因此,讓用戶(hù)在首頁(yè)就直觀(guān)的看到他們需要的內容,并且盡可能的減少其他不重要內容的出現,這是一個(gè)提升用戶(hù)體驗的好方法。

實(shí)例教學(xué)!如何將極簡(jiǎn)風(fēng)格的原則運用到網(wǎng)站設計中?


扁平設計、英雄形象和漢堡包菜單等等許多這些現在流行的設計趨勢,都是于2000年開(kāi)始逐漸受到極簡(jiǎn)風(fēng)格的影響才誕生的。 「這里的英雄形象指的是:在網(wǎng)站首頁(yè)上使用的大尺寸圖片。在日本,作為視覺(jué)的關(guān)鍵,也被稱(chēng)為主視覺(jué)。在Bootstrap中也有命名為「Hero unit」的組件而被大家廣泛使用著(zhù)?!?

網(wǎng)站設計之三:實(shí)例教學(xué)!如何將極簡(jiǎn)風(fēng)格的原則運用到網(wǎng)站設計中?


@喪心病狂十六夜貓 :極簡(jiǎn)風(fēng)格能幫助用戶(hù)簡(jiǎn)化操作,兼容性好,載入頁(yè)面快等等優(yōu)點(diǎn),不過(guò)雖然看起來(lái)簡(jiǎn)單,我們需要考慮的東西可一點(diǎn)都不少。這一次,就讓我們一邊學(xué)習簡(jiǎn)約風(fēng)格的原則,一邊將它應用到實(shí)際網(wǎng)站制作中去吧。 詳細從以下開(kāi)始。

網(wǎng)站設計之四:另辟蹊徑談創(chuàng )新!提升網(wǎng)站設計形式的幾種方法


提到網(wǎng)頁(yè)設計,最先想到的是當今主流的韓國設計和扁平化設計,當然個(gè)性化排版、視頻代替文本、全屏大視野、滾動(dòng)視差、多平臺全適應等設計形式已經(jīng)進(jìn)入了我們的視野。西方簡(jiǎn)單、功能性的美學(xué)精神”少即是多”這一設計理念攻占了我們的大腦,很多時(shí)候,在開(kāi)始做設計之前腦子里會(huì )來(lái)回浮現這些風(fēng)格的設計。那么,怎樣在主流設計方式中做出有自己特色的網(wǎng)站呢?我們從以下幾點(diǎn)介紹在大環(huán)境下提升網(wǎng)站設計形式的方法。

網(wǎng)站設計之五:經(jīng)驗分享:移動(dòng)網(wǎng)站設計應該避免的“七宗罪”


移動(dòng)端網(wǎng)頁(yè)在今天雖然已經(jīng)變得越來(lái)越重要,但我們在日常使用中依然會(huì )遇到一些糟糕的頁(yè)面。近日,開(kāi)發(fā)者Umer Mansoor就總結了開(kāi)發(fā)移動(dòng)網(wǎng)頁(yè)時(shí)應該避免的“七宗罪”。

網(wǎng)站設計之六:4000 字快速回顧20多年的網(wǎng)頁(yè)設計發(fā)展史!


20 世紀末到 21 世紀開(kāi)始,宣傳品牌與產(chǎn)品的陣地不再局限于印刷品,電視、電臺及現場(chǎng)活動(dòng),而是出現了網(wǎng)站,網(wǎng)站可以鏈接更多陌生人,而且沒(méi)有時(shí)空限制。

網(wǎng)站設計之七:2021-2022設計趨勢報告:動(dòng)態(tài)篇


動(dòng)態(tài)設計(Motion Design)有助于創(chuàng )建令人愉悅且直觀(guān)的用戶(hù)界面。好的動(dòng)態(tài)設計,不僅能引導用戶(hù)對數字產(chǎn)品的體驗,還可傳達有關(guān)產(chǎn)品的品牌信息。本文將介紹近來(lái)最流行的動(dòng)態(tài)設計趨勢,這些令人驚艷的動(dòng)效表現手法,在不久的將來(lái)勢必席卷所有人的目光。

網(wǎng)站設計之八:為什么千萬(wàn)別隨便學(xué)國外的極簡(jiǎn)設計?


很多人很喜歡國外的極簡(jiǎn)設計,先不看 Dribbble 上五花繚亂飛機稿,哪怕是博客編輯器 Wix.com 上的模板看著(zhù)都很令人羨慕。為啥國外的網(wǎng)站都那么極簡(jiǎn),國內就學(xué)不來(lái)呢? 十年前,我以為這是因為國民審美和設計師水平?jīng)]上來(lái)?,F在,我發(fā)現這件事情沒(méi)那么簡(jiǎn)單??!假想一下,你去下一個(gè)國外的極簡(jiǎn) UI 模板來(lái),把文字改成中文,評審時(shí)能過(guò)稿嗎?

網(wǎng)站設計之九:高手出品!2020~2021年UI界面設計趨勢


2020年已經(jīng)過(guò)去一大半,這些時(shí)間以來(lái),我一直在關(guān)注數字設計領(lǐng)域未來(lái)的設計趨勢。從年初就開(kāi)始收集,到今8月份了,我想是時(shí)候將發(fā)現的一些趨勢風(fēng)格分享出來(lái),這些風(fēng)格很有可能繼續延續到2021的產(chǎn)品設計上。 對于UI界面視覺(jué)趨勢,同樣需要我們高度重視。畢竟每年改版方向,視覺(jué)風(fēng)格研究是必不可少的一個(gè)環(huán)節,下面正式開(kāi)始。