文章來源:站酷 作者:功夫UX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、項目背景
隨著精準醫療興起,實現個體化診療需大量生物樣本數據支撐 。然而現實中,生物樣本數據雖海量,卻無序且利用不充分,各醫療機構還面臨計算資源短缺、存儲共享難和安全風險高等問題。臨床生物樣本大數據中心網站為不同醫療機構、科研機構和企業之間的合作提供了一個平臺,促進了跨機構的生物樣本數據共享和合作研究,打破了數據孤島,實現了資源的優化配置和協同創新。
接到設計需求后,藍藍團隊專門去客戶現場面對面交流,更好地捕捉客戶的細節要求。該網站是國內首個開放式生物樣本數據中心。在設計過程中參考了很多國外設計,整體風格國際化。首頁提案設計過程中藍藍團隊嘗試了不同的視覺風風格以及交互方式,整體以“美觀、簡潔、易用”為主要設計目標。
二、項目概述
(一)產品定位
臨床生物樣本大數據中心網站是專業的醫學數據平臺。面向醫學科研人員、臨床醫生及生物醫藥企業,整合多源臨床生物樣本數據,涵蓋豐富疾病類型與人群特征。以嚴格的數據質量控制確保準確性與可靠性,提供強大數據分析工具。建立共享機制,促進合作交流。專注臨床數據領域,保障數據安全與良好用戶體驗,致力于成為醫學研究與臨床應用的有力支撐。
(二)目標用戶
臨床生物樣本大數據中心網站的目標用戶主要包括醫學科研人員、臨床醫生和生物醫藥企業。醫學科研人員可借助豐富的臨床樣本數據開展各類研究項目,提升研究效率與可靠性。臨床醫生能通過該網站獲取疾病信息,為診斷和治療決策提供參考,跟蹤最新研究進展以提高醫療水平。
(三)設計風格
網站主色調采用藍色,且與logo保持一致,藍色通常與專業、可靠、冷靜等特質聯系在一起。對于該網站來說,藍色的界面可以讓用戶(包括醫療專業人士、研究人員和患者等)感受到網站的專業性,仿佛在傳達 “我們是值得信賴的專業機構,能夠妥善處理和管理重要的生物樣本數據”。
三、設計前后對比
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。
在數字化時代,交互設計(Interaction Design)已成為產品成功的關鍵因素之一。無論是移動應用、網站還是智能設備,優秀的交互設計都能為用戶帶來流暢、直觀的體驗。今天,我想和大家探討交互設計的核心要素,以及如何通過創新思維提升用戶體驗。
交互設計的核心是“以用戶為中心”。設計師需要深入理解用戶的需求、行為和痛點,通過用戶研究、原型測試等方法,確保設計能夠真正解決用戶問題。例如,簡潔的導航、清晰的反饋和一致的操作邏輯,都是提升用戶體驗的基礎。
在追求創新的同時,設計師需要確保功能的實用性和易用性。過度復雜的設計可能會讓用戶感到困惑,而過于保守的設計則可能缺乏吸引力。如何在創新與功能之間找到平衡,是每個交互設計師面臨的挑戰。
交互設計不僅僅是功能的實現,更是情感的傳遞。通過色彩、動畫、音效等元素,設計師可以創造更具吸引力和情感共鳴的體驗。例如,微交互(Micro-interactions)的巧妙運用,能夠增強用戶的參與感和滿意度。
隨著用戶使用設備的多樣化,跨平臺設計變得越來越重要。設計師需要確保在不同設備和平臺上,用戶都能獲得一致且無縫的體驗。這不僅需要技術上的支持,更需要設計思維的全局觀。
通過數據分析,設計師可以了解用戶行為,發現設計中的不足,并持續優化產品。A/B測試、熱圖分析等工具,能夠幫助設計師做出更科學的決策,提升產品的整體表現。
交互設計是一門融合藝術與科學的學科,它需要設計師不斷學習、實踐和創新。無論是新手還是資深設計師,我們都應保持對用戶需求的敏感,以及對技術趨勢的關注。期待大家在評論區分享自己的見解和經驗,一起探討交互設計的未來!
希望能激發大家的討論和思考!如果你有更多想法或案例,歡迎留言交流
醫療UI界面設計是提升用戶體驗與醫療效率的關鍵。通過直觀性與易用性、個性化與定制化、情感化設計等方面的創新,可以顯著提升用戶對醫療服務的滿意度和忠誠度。同時,通過信息可視化、智能化交互和流程優化等手段,可以進一步提高醫療服務的效率和質量。然而,在設計過程中也需要面對數據安全與隱私保護、復雜性與簡潔性的平衡以及法規與標準的遵循等挑戰。未來,隨著技術的不斷進步和醫療行業的持續發展,醫療UI界面設計將不斷迭代升級,為用戶提供更加優質、高效的醫療服務。
在網頁布局上,將重要的圖像放在顯眼的位置,比如頭部區域。這樣可以迅速吸引用戶的注意力,并引導他們進入頁面。對于需要詳細解釋的內容,可以采用圖文結合的方式。先通過圖像吸引用戶的注意力,隨后用文字詳細闡述相關信息。
關注趨勢本質上就是關注未來可能存在的形態。很多營銷需求和優秀設計趨勢是相互關聯的,兩者之間的關聯更像是一種動態的同步。
很多時候趨勢并不一定是全新的東西,它們往往是服務于當下和未來的需求,有很多趨勢存在了一些年頭,它們在現在發揮著作用,但是在未來可能會發揮更大的效用。所以,當我們在查看這些設計趨勢的時候,需要注意,它們必須是服務于用戶,服務于品牌和企業。
更多設計趨勢:
的確,極簡主義一直在某種程度上流行,但是 2022 年出現的新極簡主義的浪潮,比起傳統的極簡主義設計更加在意用戶注意力的吸引。這種新極簡主義的設計會采用更加大膽、 生動、明亮的色彩來填補留白,這種設計使得設計保持簡約的同時,更加富有調性,在簡約的框架下制造一種別樣的華麗,營造令人亢奮的氛圍。
干凈清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎,大量的留白和跳脫的視覺焦點讓整個視覺更加抓人眼球,也使得品牌給人的感知更加新鮮獨特。
新極簡主義風格,對比度在深色主題下得到了進一步的提升。
這種設計并不意味著傳統的極簡主義已經被用戶拋棄,很多企業依然會青睞更加傳統的單色極簡主義設計,不過其中多少會增加一些明亮的色彩作為點綴。
從 1950 年開始,粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中,這種設計風格一直隨著時代的發展而自我迭代,新粗野主義更加強調創造力、 大膽前衛的新奇元素,而這也正好符合很多品牌對于新奇性的追求,它可以瞬間抓住用戶的注意力。不過,這種風格的使用需要控制好程度,否則很容易失控。
粗野主義經久不衰的秘訣是什么?是未經打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進它,這種未完成的原始感會在情感上吸引觀眾,這在營銷上是無價的優勢。
粗野主義在設計上并非看起來那么粗糙,相反它更加需要高度的專業性來控制它粗野的程度。設計師需要敏銳地感知到觀看者改進地欲望,讓設計粗野而不低級,原始而不拙劣。
新粗野主義柔糅合了極簡主義和大膽地排版,它依賴看似粗野地視覺沖擊:高對比度、粗糲地陰影,撞色、 簡約的背景、不對稱的布局、 未經修飾的照片,新粗野主義偏好基礎款的加粗字體,跟注重可讀性而不是舒適所制造的視覺吸引力。
這個網站就是一個典型的例子:
這一趨勢在絕大多數的趨勢排行榜當中,都占據首位。隨著技術的進步,用戶和數字媒體之間的交互正在增加,引人入勝的交互已經不僅僅停留在響應式設計當中,如今它已經開始關注心理和生理的邏輯,開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至于運動體感。
這種趨勢旨在幫助用戶體驗真實地感覺,在完成交互地基礎上,觸發用戶地情緒反應和生理反應,熱氣騰騰地餡餅視頻讓人垂涎,游戲中虛擬地對手讓人腎上腺素激增。
交互所制造地參與感,在某種程度上是實際地物理產品地替代物,用戶可以從不同角度來縮放查看產品,了解細節,選擇尺寸,挑選顏色。
交互過程中,手指和屏幕之間地觸摸交互開始變得豐富,開始變得有意味,它成為了用戶和虛擬世界之間溝通地橋梁,開始有游戲地樂趣,有更具設計感地交互環節。用戶也可以根據自己地喜好,對界面進行更多樣的個性化處理。
具有參與感的交互是我們的未來。
2022 年是疫情開始后的第三年,隔離使得人們對于照片所呈現出的故事和情感,有著更為強烈的情緒反應。在極簡主義設計當中,富有表現力的人物照片是最為流行的元素之一,這類照片搭配上簡短的文字,簡練的口號,一些帶有宏大敘事特質的文字引用,時常能夠更好地營造出故事感。
不用擔心主屏頁面太長沒人看,只要隨著用戶滾動,故事會隨之逐步展開,用戶可以在照片、 標題、視頻、動畫和文本地指引下,看到整個故事有步驟地呈現。
在這當中,富有表現力的人物照片是吸引用戶注意力的關鍵要素。
另外就是頁面的 Banner 的部分,強調主題和內容的標題文本,是用戶從屏幕上獲取的重要信息之一。
如今的用戶越來越偏好在詳細閱讀內容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動敘事:通過滾動觸發音頻、視頻、 動畫效果的一種技術)這種漸進式敘事方式,可以像電影一樣將故事呈現在用戶眼前。
Scrollytelling 適合大量的內容呈現,比如對于公司和產品的描述,對于數據呈現或者認知要求較高的內容,它適合學習和記憶性內容的呈現。
3D 圖形設計正在越來越流行,因為它確實是吸引用戶注意力的最主要的工具之一。3D 圖像無論有多么奇異,它本身都會被認為是有真實感的,明確的體積,精致的建模,所有的一切都令人著迷。很多時候,用戶停留在有3D元素的頁面上,是為了更細致的欣賞。
3D 圖形設計的趨勢從來都沒有減退,它正在進入更多的領域,甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用戶的注意力。
我們通常說的抽象插畫,指的是帶有明確幾何特征的插畫,它們被廣泛地應用于網站和 APP,在社交媒體和包裝設計中也越來越多的存在。
抽象插畫之所以會如此成功,是因為它們大多有著吸引人的生動色彩和良好對比度,視覺上的美感和極簡主義的風格特質,它們成為視覺的焦點,為整個設計提升視覺。
抽象插畫在品牌營銷場景下的應用也很多,它們在這個時候是貼合品牌推廣的訴求的:通過色彩和形式來吸引用戶來關注品牌的形象和名稱。
這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的,它們還充當著拉升頁面視覺效果的重要作用,它們結合動畫和交互,成為頁面中醒目的亮點。
超大字體的優點在于,它和很多設計風格是相得益彰的,加粗的大字體在極簡主義風格的頁面上不會顯得突兀,在元素豐富的頁面上,同樣可以起到優秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協同,而后者則襯托出它本身的醒目。
超大文本字體的另一個好處是有效地減少網頁上的圖像的使用,縮短加載時間,提升移動端的可用性。
這種設計元素最重要的,是選擇易讀且符合品牌調性的字體。
這么多年來,我們看到來這么多的趨勢,很多趨勢是一以貫之持續出現,有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級,并且持續存在,但是最重要的,始終是那些選擇合理的方案,并且堅持改進設計,讓趨勢服務于終端的產品和用戶的設計師。
讓趨勢服務于你,不要盲目地追趨勢!
作者:陳子木
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作,也請與我們聯系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
無論作為設計師還是普通瀏覽者,大家觀看一個網站時最先接觸到的就是網頁的頭部區域,這部分內容為網站的其他各個方面設定了基調,在網頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行,多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力,同時要兼顧創造力和實用性。根據一項Google的研究,用戶只需要短短數秒就可以形成對一個網站的看法,甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。
在通常網頁設計中,首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分,頭部信息起到了一種邀請作用,它應該提供有關網站的基本信息,以便用戶能夠在幾秒內了解網站的主要內容。
如果以招聘活動站點為例,整個頭部區域設計要明確傳達企業形象,及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象,企業已向你發出邀請,我們對人才十分渴求,等等信息… 如果有線上線下活動同時參與,那么在整體風格上盡量保持一致。
網頁頭部的任務是給用戶提供一些基本問題的答案:代表什么品牌,提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴,那么就是正確的設計。
那么主要元素通常包括:
在設計網站頭部內容時,從思維層面來講沒有任何東西會限制你的創造力,它應該是令人難忘的、簡潔和兼具實用性的,是一個可以展示創造性的開放領域。
下面讓我們一起來看看頭部內容設計的一些技巧。
1. 關于尺寸
對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字,但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同,分辨率也可能不同,因此用戶看到的內容也不一定完全一樣。
因此,我們不要拘泥于精確的像素概念,最好遵循經驗積累的常識規則。
頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面,較小的頭部區域是一個不錯的選擇,而對于落地頁或者企業客戶首頁,頭部區域可能會更大,而且多數大客戶會有主視覺單屏展示頁。
如果某些網頁,例如落地頁頭部內容較長的情況下,最好在首屏給下一屏內容露出一些空間,這樣用戶就可以意識到下一頁還有內容,引導用戶滾動。
2. Logo展現
當一個人發現自己在陌生網站上,總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果,但是多數用戶如果他們常規位置找不到預期的信息,將會不假思索地認為這個頁面是難用的和不規范的,需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化,我們今天主要說大多數受眾。
Logo ——與居中或右側放置相比,用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo,那么可以把它居中放置,盡管它的有效性仍然比放在左側要低。
3. 吸頂導航欄
吸頂導航,換句話說就是「粘性標題」,當你滾動頁面時,導航區在頁面中跟隨,現在成為一個網頁設計標準。如果不違反網站整體設計理念,請將導航欄吸頂固定。無論是PC端還是移動端設計,這都是一個好的選擇:
可根據頁面內容展示要求,向下滾動時調整導航背景透明度,盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度,使用戶能找到但又不過于搶眼。
總之,固定導航欄有助于提升用戶體驗,保持用戶導向并給予了他們更多控制權。
3. 關于圖片的應用
頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的,例如招聘類網站使用招聘場景圖片;也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容;
高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事,喚起用戶的情感,并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站,試著做一個透明的標題,它可以更好地顯示圖像,并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業業務的出色照片,這種方式就沒錯!企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網站的頭部圖片必須能引起讀者的共鳴,建立起人與人之間的聯系。如果圖片是獨特的且易于辨認,即使是從網站標題中剪切出來,效果也會很好,可以利用當今的插圖潮流來實現這一點。
4. 視頻或動畫
當然我們也不能只關注靜態圖片,添加視頻也是最有效的網站頭部創意之一。如果可能的話,嘗試著在頭部內容中添加主題視頻材料,很多網站利用在背景中添加短視頻來吸引用戶,盡可能以最好的方式展示他們的公司或產品。
△ 華夏幸福校招官網首頁動畫,撥云見日的效果加上中式剪紙風格的運用,將公司各業務線融合到幾個轉輪中,產生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非??帷R悦考拘@招聘企業站點為例,各大公司對應屆生群體的追逐,很大程度上體現在對該群體審美和喜好的迎合上,年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫,一般動畫越復雜面積越大占用流量越多,客戶打開延遲也影響觀感。這時候我們可以根據功能不同,設計一些交互性的動畫,去提升客戶使用感受,盡量不影響網頁打開速度。
5. 移動端頭部設計
網頁頭部不可能只顯示PC端的網頁上,還應該正確顯示在移動端的網頁上。因此,在近年的設計中,網頁必須具有響應性,并且能夠很好地適應各種移動設備,這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網站設計,即使在PC中,也有一些細節看起來像是面向移動設備的網站設計。例如,Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式,很多時候需要設計師在一開始就考慮到兩種界面的適應情況,比如在PC上頂部一條的導航,到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容,在移動端會向下層延伸,首層界面成為一個內容聚合頁。
網站是以頭部內容為先導的,它就像是一張獨特的名片。因此,我們在設計網站時,盡可能最大限度地關注該區域。
最后還要提醒大家,一定記得定期更新網站頭部內容哦!以校園招聘大客戶為例,大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格,以保持網站的新鮮感和時效性。
以上只是在工作中的一些點滴體會,微不足道。感恩能在UXD集體中不斷成長。
轉載請注明:優設網
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網站設計之一:怒馬!超實用的單頁網站設計指南(附大量資源)
網站設計之二:旅游網站設計分析!教你10個小技巧
網站設計之三:實例教學!如何將極簡風格的原則運用到網站設計中?
網站設計之四:另辟蹊徑談創新!提升網站設計形式的幾種方法
網站設計之五:經驗分享:移動網站設計應該避免的“七宗罪”
網站設計之六:4000 字快速回顧20多年的網頁設計發展史!
網站設計之七:騰訊出品!2021-2022設計趨勢報告:動態篇
網站設計之八:為什么千萬別隨便學國外的極簡設計?
網站設計之九:高手出品!2020~2021年UI界面設計趨勢
網站設計之十:如何做好網頁頭部內容設計?來看 58 設計師的總結!
設計趨勢可以塑造一切,從設計師的創作方式到用戶界面設計,再到從網站到包裝設計的未來迭代。
讓我們深入探討2022年的一些頂級網頁設計趨勢。我們將著眼于 2021年末開始出現的趨勢,這些趨勢是為來年奠定基礎的,以及一些即將流行的趨勢設計。
有趣、樂觀的設計
時尚的形狀、顏色,甚至是面孔都可以帶來很多樂趣。設計師正在使用網頁設計趨勢,為從網站的所有內容提供有趣、樂觀的設計。這些設計的共同點是它們為世界注入了一點額外的快樂。
充滿樂趣和樂觀的圖像具有面孔、較輕的字體,以及散發出積極情緒的顏色。為了充分利用這一趨勢,請考慮更輕的元素,并避免選擇較重的字體或顏色。
黑白配色方案
黑白配色方案是今年最鮮明、最美麗的設計趨勢。沒有顏色,你可以在限制范圍內思考和設計。
大膽和實驗性的排版
在2022年,沒有錯誤的排版方式。大粗體字體——甚至襯線字體——無處不在。在玩這種網站設計趨勢時,請考慮字體將如何響應以及如何最大限度地對訪問者產生影響。
三維設計元素
雖然2020年和2021年有很多設計師網站處理完整的3D 設計,但新興趨勢是將3D元素與更扁平的整體美感結合起來。
具有3D風格的元素可能包括陰影、動畫或圖層效果,以創建深度和維度。
三維設計也延伸到視覺敘事??紤]如何以突出景深和陰影的方式捕捉您的故事或產品。
近乎野獸派
野蠻主義是人們想要加入的網站設計趨勢,但對于大多數項目來說,它過于苛刻和尖銳。
這些設計使用了許多相同的鮮明效果。不是單色字體,更容易看到襯線是常態。即使有一些明顯的邊界和線條,元素之間也有足夠的空間。沒有太多的裝飾或其他視覺效果,只留下顏色和文字來真正承載這些項目。
滾動文本元素
雖然總是希望文本元素可讀,但它們也可以是動態的。滾動文本元素——通常使用超大字體、幾個詞、在一個位置——可以增加對關鍵詞的強調并激發用戶的興趣。
輪廓字體是一種流行的選擇,保持可讀性的關鍵是使用簡短、常用的單詞或短語。
玻璃態
玻璃態的第一個展示于2020年末和2021年初的新態,并演變成現在流行的更完整的玻璃效應。
正是您可能想的那樣:設計元素的外觀讓人聯想到玻璃??赡苡型该鞫?、冷淡或光澤的元素。
設計師們一直在Dirbbble上以一種主要方式使用這種風格,并找到了網站設計的方法。
更多漸變
漸變是不斷出現的設計趨勢。2021年,設計中的大部分漸變出現在背景中。
到 2022 年,漸變將采用兩種新形式:
1) 用于文本顏色填充(例如上面的示例)以提供最大的影響和強調
2) 作為用其他線條填充插圖或圖標以創建紋理深度效果
沒有圖像的主頁
無需圖像即可設計,您將在 2022 年緊跟潮流。
使用不同類型的用戶界面或設計技巧來充分利用沒有圖像的主頁。在此處的示例中,Kirifuda 使用了漂亮的黑白配色方案,在文本元素之間具有疊印效果。超大的排版和手寫風格的字體有助于將它們融合在一起。
分屏美學
分屏美學重新奏效。幾年前的趨勢當時出于可用性和響應的原因而起作用,現在它更像是一種新設計。
這些視覺效果可以包括水平或垂直分割的屏幕,每一切面有不同的功能。
交互式字體
在屏幕上與您一起移動的文本是交互式字體背后的支柱。在大多數情況下,這可以使用懸停狀態,盡管您可以嘗試一些其他更復雜的效果。
在考慮交互式文本元素時,請考慮可讀性和理解力。文本效果只有在其中的文字仍然可讀和可理解的情況下才有效。
包容性設計
設計師正在努力打造一個更具包容性的網絡,它幾乎在所有發布的內容中都有體現。從圖像到語言再到替代文本,沒有理由不嘗試讓您的項目更加包容所有人。
包容性延伸到種族、性別中立、文化、可及性和能力。共同的主題是您的網站應該以這樣的方式組合在一起,以便任何想要訪問內容的人都可以訪問內容,并且人們也可以在屏幕上看到他們可以與之相關的其他人。
結論
就網站設計趨勢而言,新的一年已經開始以非凡的方式爆發。如何將這些元素合并到現有項目中是作為設計師該考慮的問題。
藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
看完這一波網頁 UI 類設計,再也不愁接下來該如何做設計創新了。
這是今年出鏡率比較多的一種設計風格,不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風格設計最大特點:形式感、聚焦、簡約而不簡單。
當然還可以是將線圈與文字疊加圖片,有一種層疊縱深布局感受。
又或者說圖形只是作為裝飾作用。
純文字版式在今年版式中出鏡率也是相當之高,包括深圳設計周官網也幾乎都是幾個大字排版。其實我們仔細思考,將文字放大處理,有點圖形化的意思。
上圖是典型的文字圖形化,將文字轉化成線性設計。
圖文混合設計風格大膽、新穎,讓人眼前一亮。這種版式布局一般會出現在設計工作室網站居多一些,追求形式感與觀賞性。
圖文混合設計,不光只是圖片與文字混合排版,還可以是圖標與文字、粗字體與細字體之間的混合穿插。
圓形設計趨勢一直都存在,在網頁設計中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強親和力、聚焦。設計用它可以解決很多枯燥的版式,讓畫面瞬間活了起來。
還可以將文字處理成圓形,與圓形圖相呼應。
文字輪廓化版式今年出鏡率尤其之高,將文字輪廓化設計處理,減輕了文字的視覺重量感,更像是將文字線條化設計處理。
文字輪廓化設計還可以用在背景,作為設計裝飾效果。
玻璃質感設計趨勢,也是今年最火的設計風格之一。那么它在網頁出鏡率也是在下半年開始逐漸多了起來,也許是設計師發現這種質感細膩與折射光透露出的細節之美。
線無疑是圖形里面運用較多的,今年發現很多網頁中都加了線條作為版式裝飾,或者就是純線條版式設計,讓人眼前一亮,原來還可以這樣玩。
線條在這里作用明顯,除了美學設計裝飾之外,它還用作信息層級區分。
圖與線疊加
純文字版式
圖文混合
圓形版式
文字輪廓化
玻璃質感
使用線條
對于大多數網頁設計師來說,你的成品需要在各種類型和尺寸的設備上進行外觀和工作,這是顯而易見的。創建多個設計來實現同一目標的日子已經一去不復返了。
這一切都歸結為選擇響應式或自適應設計模型,以實現任何規模的一致網站設計。
但是響應式和自適應之間有什么區別?它們真的只是一回事嗎?讓我們來看看并解釋你需要知道的一切。喜歡記得關注UI范,每天更新,打造你的知識武器庫!
1.與設備無關的設計的兩種方法
2.響應式設計
現在比以往任何時候都更重要的是,我們正在設計旨在沿著不同體驗的梯度觀看的作品。響應式網頁設計為我們提供了一條前進的道路,最終讓我們能夠“為事物的潮起潮落而設計”。
而這正是我們目前關于響應式網站的思想學派的起點。
無論設備或瀏覽器如何,該設計都適用于任何視口尺寸。
響應式設計對搜索引擎友好(谷歌甚至推薦它)。
允許設計中的很多精確度,以便設計師可以調整任何或每一個細節。
高度移動友好的設計選項。
與你可能用于網站項目的大量主題、網站構建器和工具兼容的常見設計實踐。
該設計將具有統一和無縫的外觀,這將提升整體用戶體驗。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自適應設計最常見的用途是將舊設計轉換為更適合移動設備的設計。這并不是說它不會發生在新的開發中。
5.自適應設計的優點
由于配置錯誤,您在設計時可能會遇到一些不太常見的設備(例如平板電腦)的問題。
自適應設計可能是勞動密集型的,需要更多的開發時間和成本。
由于內容重復,搜索引擎在使用自適應網站時會遇到更多困難。
有一個偷偷摸摸的現實,你設計同一個網站六次。
文章來源:站酷 作者:UI范
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn