性做无码视频在线观看_国产精品爽爽ⅴa在线观看_婷婷丁香社区_亚洲av无码男人的天堂在线男人扒开添女人下部免费视频_国产JIZZJIZZ麻豆全部免费_国产精品天堂avav在线_

首頁

極簡界面設計案例 | lgm/ – 創(chuàng)建極簡力量的品牌窗口

清陽

2025 年 6 月,法國設計師 Pierre Patrault 出品“lgm/”網(wǎng)頁設計項目。該作品以 Web UI/UX、品牌識別、落地頁面為設計主軸,旨在通過最簡結(jié)構(gòu)與視覺語言,打造清晰直觀的線上品牌窗口。

本項設計秉持“少即是多”的原則:簡潔的版式結(jié)構(gòu)、統(tǒng)一的視覺元素與留白設計,讓每一個視覺焦點都直指品牌核心;用戶在瀏覽中自然而然地獲得信息層級,引發(fā)情感共鳴。

項目由 Pierre Patrault 主導創(chuàng)意設計與用戶界面;Teddy Vermeulin 負責開發(fā)落地頁面,并與品牌與視頻代理 Advitam 合作完成整體傳播支持。三者協(xié)作默契,將創(chuàng)意、技術(shù)與品牌傳播融為一體。

“lgm/”的發(fā)布,不僅是一次視覺嘗試,更是一次品牌線上表達的新實踐:精準、高效、富有引導性的設計語言,助力品牌與用戶間建立清晰、信任與溫度兼?zhèn)涞臄?shù)字連接。
創(chuàng)意理念
“基于簡潔現(xiàn)代的視覺語言,lgm/ 項目以極簡主義為核心,將品牌形象與用戶體驗無縫融合,致力于在首屏即傳達品牌精髓,賦予每一次交互以直觀引導。”

3. 設計與體驗亮點

結(jié)構(gòu)清晰:落地頁布局明晰、信息層級分明,讓用戶輕松抓住核心內(nèi)容。

極致簡約:利用充足留白、統(tǒng)一調(diào)性、統(tǒng)一視覺元素,降低視覺干擾,提升品牌溝通效率。

交互細節(jié)(若有):如鼠標懸停動畫、滾動觸發(fā)效果等,可寫出“精致微互動增強用戶參與感”。

imgi_521_b54a2c228930055.685bea4883f26.jpg

imgi_525_b2b378228930055.685bea4883446.jpg

imgi_527_76b8d4228930055.685bdef28d499.jpg

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

 

交互設計邏輯 | 關(guān)于線框和 UI 設計流程(經(jīng)驗向)

清陽

每個設計師都有自己獨特的設計呈現(xiàn)方式。根據(jù)項目的不同,設計師會使用不同的方式展示他們的設計。Clickdummy 原型是展示屏幕流程最常用的方式,方便簡潔。通常情況下,設計師會以“編號+標題”的格式為所有屏幕命名,并通過導出結(jié)果中 JPG 文件的順序來表達屏幕之間關(guān)系的邏輯。

我很高興能使用像 Invision App 這樣的工具來理清我的設計。然而,ClickDummy 原型在構(gòu)建大型復雜的軟件項目和功能性應用程序時并不理想。有時,我們會將屏幕放在 Sketch 文件中的不同頁面中,以使結(jié)構(gòu)更清晰,但卻失去了整體的視覺效果。當你向項目經(jīng)理、客戶和開發(fā)人員展示你的設計時,你會發(fā)現(xiàn)這個過程效率低下。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
英維申

我們需要一個高效、流暢的流程來優(yōu)化演示和交接。我的經(jīng)驗是線框圖和UI的流程。這是一種非常新穎的方式,但效果很好。

我們知道 Behance 和 Dribbble 上有很多精美的線框和 UI 流程。其實很多設計師也在做同樣的事情。我在上海MINGLabs工作的時候,我的法國設計師同事 Lucas 教給我一個方法,它不僅易于理解,而且美觀高效,可以作為交接的 UI 呈現(xiàn)流程。后來,這個方法在我的遠程自由職業(yè)中得到了運用,并不斷改進。這對降低溝通成本非常有幫助。

Eric Miller的移動可視化流程圖

為什么我更喜歡線框和 UI 設計流程?

  1. 幫助設計師鞏固他們的想法
  2. 顯示屏幕之間關(guān)系的邏輯
  3. 使與客戶的溝通更加輕松,呈現(xiàn)的內(nèi)容更加清晰可見
  4. 使與開發(fā)者的溝通更加便捷,降低溝通成本。
  5. 有利于與其他設計師合作
按 Enter 鍵或單擊即可查看完整尺寸的圖像

我如何制作流程?

當然,我的應用和網(wǎng)站都是用 Sketch 設計的。我建議從第一個線框圖開始設計流程。之后再設計主頁和兩三個輔助頁面。

步驟1

您可以創(chuàng)建一個新的畫板。畫板大小要足夠大,能夠覆蓋所有屏幕。這樣做的目的是為了更容易添加線條和注釋,也方便在最后時刻導出完整流程圖的概覽。不過,現(xiàn)在沒必要添加屏幕數(shù)量。等您心中有了概覽之后,再添加也不遲。

按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟2

流程包括 5 個組件:

  1. 屏幕
  2. 畫面名稱,格式為“ 數(shù)字+字母+標題”或者“ 數(shù)字+標題”
  3. 動作和位置(紅點)
  4. 筆記
按 Enter 鍵或單擊即可查看完整尺寸的圖像

步驟3

流程的結(jié)構(gòu)是從左到右組織的。頁面位置越靠右,層級就越低。我的習慣是把首頁之類的第一頁放在左側(cè)。設計流程如下:

按 Enter 鍵或單擊即可查看完整尺寸的圖像
樹形結(jié)構(gòu)
按 Enter 鍵或單擊即可查看完整尺寸的圖像
沃達豐 WLANoMeter 用戶界面流程

問題

線框和 UI 流程改善了溝通。但它并不完美,實際上有時甚至有點令人毛骨悚然。

  1. 每次增加屏幕,數(shù)字就會亂。我的命名方法可以避免這種混亂,但不是最佳方法。
  2. 一旦移動了屏幕,連接的線就必須重新繪制。
  3. 導出的概覽 pdf 無法顯示每個屏幕的名稱。

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計、UI咨詢、高端網(wǎng)站設計平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

樸素的交互設計原則

清陽

基本原則
清晰、簡潔、一致、可操作暗示以及隱喻(可供性)、反饋、容錯、高效、易記憶易學習。

1. 清晰
內(nèi)容、結(jié)構(gòu)、界面效果都是清晰可見的,加強情感的修飾,注意只使用文字與排版來表達頁面,以字體、字號、顏色、版式,精妙動畫效果來增加界面的精致性與設計不夠。盡量避免平滑、陰影。
2. 簡潔
為了用戶聚焦,限制明確頁面唯一的或者最重要的目標性,不讓用戶讓焦鈦的選擇感。
3.一致性
界面元素的標準控件化:問題使用系統(tǒng)交互元素,以及界面和用戶之間對話風格的統(tǒng)一:標準文本風格、口吻、語氣、統(tǒng)一話術(shù)。
4.可操作暗示隱以及喻意
讓用戶看到這個就是可以交互的,按鈕要像按鈕,與文本內(nèi)容以及其他界面元素有所區(qū)別。另外可增加操作引導,在操作時給予引導,而不是獨有的一股腦引發(fā)引導。隱喻本可以單獨做一個原則,但這里與可操作暗示大約類似,隱喻指的是虛擬界面可以做到讓用戶經(jīng)驗類似的喻,確實是現(xiàn)實物理世界的隱喻還是虛擬數(shù)字世界。讓用戶無成本遷移感。5
. 反饋
任何操作都要給予可感知的操作反饋,當點擊或者其他時,被操作交互的要素要給予短暫的強調(diào),另外通過動畫給予進度提示,
6.容錯與安全感
降低用戶犯錯成本,做到高危操作可恢復。應用應該通過使用熟悉的、可預見的交互元素,確認重要的操作、可回溯的取消手段等方式,來讓用戶覺得自己處于被保護的狀態(tài)中。此外還有防錯原則,采用本質(zhì)的安全設計方式(固有)安全),比如表單未完成按鈕不可用...
7.高效
兩個方面,用戶高效使用的性以及高效開發(fā)的性,要關(guān)注網(wǎng)頁技術(shù)新功能,快速迭代那些優(yōu)秀且通用改裝的新功能。
8.易學習易記憶
這是最后一條,在做到前面的原則之后,這條應該是取締的,但是由于技術(shù)性平臺的特殊性,涉及專業(yè)性技術(shù)術(shù)語等等的東西,所以對于一些非技術(shù)人員或者不太懂行的技術(shù)人員,需要提供提醒文檔嵌入,方便用戶學習。

 

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

界面設計案例分享 | ComplyContro品牌&UI

清陽

imgi_214_9f0c73226297935.683f29f07b819.png

imgi_775_146bae226297935.683f1fcc7bea5.png

imgi_784_ef7ed4226297935.683f29f07b253.png

imgi_789_2e8849226297935.683f1fcc7a7d5.png

imgi_794_02439d226297935.683f1fcc7a01b.png

imgi_801_e002ed226297935.683f29f0799dc.png

imgi_808_89d252226297935.683f28f9eb07f.png

imgi_817_b4ccb4226297935.683f289fc694a.png

imgi_821_90ae54226297935.6840132c29038.png

 

1. 項目背景 & 設計目標

  • 項目名稱與內(nèi)容:這是為 ComplyControl——一個專注金融領(lǐng)域的前沿 AI 合規(guī)模塊(具備實時監(jiān)控、智能檢測與欺詐發(fā)現(xiàn)功能)的品牌形象與網(wǎng)站界面設計項目 Behance+1

  • 完成時間與平臺:發(fā)布于 2025 年 6 月 4 日,整合品牌設計、網(wǎng)站 UI/UX 及用戶界面,使用 Figma 與 Webflow 等工具進行創(chuàng)作與實現(xiàn) Behance。

2. 品牌視覺識別(Brand Identity)

  • 標志設計:圖中展示了簡潔現(xiàn)代的標志(logo),結(jié)構(gòu)緊湊且具識別度,呈現(xiàn)強烈的科技感與專業(yè)感 。

  • 配色策略:項目運用了對比鮮明的暖色(如橙紅)與冷色(藍色),輔以深色底調(diào),強化視覺沖擊力,同時展現(xiàn)了兼具活力與穩(wěn)重的品牌氣質(zhì) 。

  • 字體風格:在字體展示中可見清晰可讀的無襯線體,搭配簡潔的數(shù)字表現(xiàn),進一步傳達專業(yè)且現(xiàn)代的品牌語言 。

3. 界面設計(UI/UX & Website)

  • 移動界面布局:圖中呈現(xiàn)了移動設備上的 UI 布局,包括導航菜單與交互按鈕,采用扁平化設計,按鈕與圖標配色清晰,對焦用戶操作體驗 。

  • 數(shù)據(jù)可視化:圖表或百分比數(shù)據(jù)顯示以清晰簡練的方式呈現(xiàn)關(guān)鍵指標(如 95%、40% 等),輔助用戶快速理解核心內(nèi)容 。

  • 整體風格語言:整體風格簡潔、科技感強烈,布局邏輯清晰,強調(diào)功能與信息可視化,有助于金融產(chǎn)品的信息傳遞與可信感建立。

4. 工具與創(chuàng)作流程

  • 設計工具:項目中使用了 Figma 進行界面與原型設計,利用 Webflow 實現(xiàn)響應式網(wǎng)頁開發(fā)與交互效果。同時還運用 After Effects、Photoshop 以豐富視覺表現(xiàn)與動畫效果 。

  • 多方協(xié)同:項目由 Embacy Design 領(lǐng)銜,聯(lián)合多位設計師及機構(gòu)參與,展現(xiàn)了團隊協(xié)作的深度與創(chuàng)意整合能力 。


總體評價與亮點

優(yōu)點 描述
清晰品牌定位 通過色彩、字體與視覺元素的統(tǒng)一,傳達了“科技 + 合規(guī)”的品牌主旨。
現(xiàn)代化視覺表現(xiàn) 配色對比強烈、界面干凈、排版有序,符合金融科技產(chǎn)品的使用場景。
信息表達精準 數(shù)據(jù)視覺化突出、界面交互明確,提升用戶理解與體驗效率。
專業(yè)工具運用 Figma、Webflow、AE 等工具的融合使用提升了設計的實施效率與表現(xiàn)力。

 

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

蘭亭妙微案例分享 | 國土空間大數(shù)據(jù)可視化界面設計

清陽

數(shù)慧時空(全稱:北京數(shù)慧時空信息技術(shù)有限公司)是以空間信息技術(shù)為核心、國內(nèi)領(lǐng)先的國土資源行業(yè)解決方案提供商,具有業(yè)務咨詢、自主軟件研發(fā)、數(shù)據(jù)加工和信息服務的全業(yè)務綜合服務能力,是國土資源部最重要的信息化合作單位之一。數(shù)慧時空基于多年的研發(fā)理論與實戰(zhàn)經(jīng)驗,藍藍設計基于多年的gis地理信息/大數(shù)據(jù)可視化界面設計實戰(zhàn)與理論,強強聯(lián)合。
融合西方先進的系統(tǒng)設計方法與中國互聯(lián)網(wǎng)的快速迭代方法,形成了獨有的系統(tǒng)性與敏捷性兼具的工作方法。國土一張圖軟件項目是數(shù)慧時空公司從2012年開始研發(fā)的重點產(chǎn)品,此次在國土資源部展會上以大屏的形式展示給國家各部委領(lǐng)導,界面設計及研發(fā)實力獲得一致好評。

深刻理解國土局需求

數(shù)慧時空公司從創(chuàng)立公司開始,就一直在國土資源領(lǐng)域做產(chǎn)品,公司所有的產(chǎn)品都是轉(zhuǎn)繞著國土資源開展的,可以說在這個行業(yè)中的資深專家了,公司近年來發(fā)展的越來越好,頻頻接到大的單子,對各身各個產(chǎn)品的要求也越來越高,所以,第一次把這么重要的展覽會上向各級重要領(lǐng)導演示的產(chǎn)品交給了外部的設計公司。這個項目完畢之后,基于客戶的客戶的認可和彼此的欣賞,又繼續(xù)和藍藍設計簽下三個項目的整體設計合作協(xié)議。
在和數(shù)慧時空研發(fā)團隊的配合中,他們給我們印象最深的是通情達理,積極的推進項目,充份的理解和傾聽。開始的時候,需求會不斷的修改或推翻或補充,會不知道客戶想要什么樣的風格,以什么為美,在即有布局的原型和元素的基礎上如何創(chuàng)新,換一種完全不同的方式去展現(xiàn)有的內(nèi)容。工作十天左右以后,視覺工作有了新想法,推倒重來也不會怕麻煩。

快速的設計迭代 現(xiàn)場配合

為了共同的目標--讓軟件產(chǎn)品更卓越,在展會上贏得充份關(guān)注,過程中的需求變更、研發(fā)、設計難度工作量增加,都不是問題。前一個月完成整體設計,后二個月,我們的前端工程師基本上每天都在現(xiàn)場,實現(xiàn)前端制作的代碼實現(xiàn)和程序工程師的對接,互通有無,互相學習,誰會的誰就做,怎樣快捷 怎么來,不分彼此,晚上一起加班到十一二點,周未繼續(xù)。雙方工作態(tài)度和積極性都極好。最終平等的對話、充份的理解和傾聽,快速的設計迭代和現(xiàn)場配合是項目成功的關(guān)健。
 
 

從無人閱讀的文檔到生動的設計系統(tǒng)

清陽

當美好的愿望遭遇現(xiàn)實

按 Enter 鍵或單擊即可查看完整尺寸的圖像
我們用來記錄 Notion 上的設計系統(tǒng)組件的模板

改變一切的研究

按 Enter 鍵或單擊即可查看完整尺寸的圖像
按 Enter 鍵或單擊即可查看完整尺寸的圖像

將文檔重新想象為一種生活工具

我們不需要要求團隊適應我們的系統(tǒng),如果我們的系統(tǒng)適應他們呢?

我們的新理念:展示,而不是講述

新的文檔架構(gòu)

組件標題

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Accordion 組件的新標題

視覺規(guī)格

按 Enter 鍵或單擊即可查看完整尺寸的圖像
組件文檔的第一個面板:組件本身及其所有變體

情境指導

按 Enter 鍵或單擊即可查看完整尺寸的圖像
表格組件的上下文指南

注意事項

按 Enter 鍵或單擊即可查看完整尺寸的圖像
選擇卡組件的注意事項部分

應用內(nèi)示例

按 Enter 鍵或單擊即可查看完整尺寸的圖像
在應用程序中使用 Accordion 組件的示例

最終結(jié)果

按 Enter 鍵或單擊即可查看完整尺寸的圖像

結(jié)果

建立在成功的基礎上

教訓

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

5 個優(yōu)秀的 UX UI 作品集,供您參考(2025 年)

清陽

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Diego Rappi 產(chǎn)品設計師
按 Enter 鍵或單擊即可查看完整尺寸的圖像

伊莉扎維塔·比利亞耶娃

按 Enter 鍵或單擊即可查看完整尺寸的圖像
按 Enter 鍵或單擊即可查看完整尺寸的圖像
Jay Park 作品集

樸宰范

注意事項

應該做的

注意事項

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網(wǎng)站設計平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

如何使用 AI 實現(xiàn) Figma 工作流程自動化

清陽

步驟 1:連接 Figma 以獲取評論

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Figma 組件的設置

第 2 步:在將評論輸入 AI 之前對其進行格式化

按 Enter 鍵或單擊即可查看完整尺寸的圖像
工具組件的設置
按 Enter 鍵或單擊即可查看完整尺寸的圖像
Figma 組件的直接輸出

步驟 3:使用 AI 對 Figma 評論進行分類、總結(jié)和格式化

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Gemini AI組件的設置

1. 為什么選擇 Google Gemini AI

2. 提供用戶文本

以下是來自設計文件的 Figma 評論列表。- 嚴格根據(jù)內(nèi)容將其分為最多 **4 個類別**。- 使用**Figma 評論中的確切措辭**,無需修改或編造內(nèi)容。- 每個類別應包括:  - 使用 `<h2>類別名稱</h2>` 的**標題**。  - `<p><b>此處為摘要文本</b></p>` 內(nèi)的**加粗摘要**。  - `<ul><li>“實際 Figma 評論”</li></ul>` 內(nèi)的**真實示例列表**,列表前有空格。  - **每個類別最多限制 4 個要點**。- **請勿添加新示例。僅使用格式化注釋中提供的內(nèi)容。**- 如果評論不屬于這 3 個類別之一,請將其放在“其他”下。- **您只能以 HTML 格式回復**并且必須使用以下標簽:  `<h2>`、`<p>`、`<ul>`、`<li>`、`<b>` 和 `<a>`。---### **Figma 評論(從文件動態(tài)提取):**{{formatted_comments}}

3. 設置輸出令牌和溫度

步驟 4:連接到 Google 文檔

按 Enter 鍵或單擊即可查看完整尺寸的圖像
Google Docs 組件的設置

附錄

1. 文本解析器不再是必要的。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
文本解析器組件的設置

2. 對回應進行盡職調(diào)查。

3. 調(diào)度功能很有用。

按 Enter 鍵或單擊即可查看完整尺寸的圖像
日程設置

 

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制用戶體驗設計、交互設計UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

【游戲界面設計分享】《DUNE|Personal Work》

清陽

imgi_34_3db6b6213486985.6747309f530b9.png

imgi_35_773966213486985.6747309f52652.png

imgi_36_9a1e76213486985.67585eae083fc.png

imgi_90_456a13213486985.67585eae07f18.png

imgi_91_80499a213486985.67585eae08911.png

從《沙丘》UI概念設計看游戲界面經(jīng)驗

前幾天在 Behance 上刷到一個《DUNE|Personal Work》的 UI 概念項目,整體完成度很高。作為設計師,我覺得這類作品不僅是視覺享受,也能總結(jié)出一些值得借鑒的經(jīng)驗點。這里就結(jié)合其中的陣營選擇界面和整體展示,整理一些觀察和思考。


1. 版式與結(jié)構(gòu):焦點與對稱

這類「陣營選擇」場景,本質(zhì)上是一個決策界面。作者采用了很經(jīng)典的結(jié)構(gòu):

  • 中央突出:當前選中的陣營(走私者)放在正中間,卡片更大、更亮,帶有金色光暈。

  • 對稱排布:左右陣營呈對稱分布,層級自然清晰,符合玩家的瀏覽動線。

  • 信息分區(qū):上半部分是角色立繪和陣營徽記,下半部分是機制說明和操作提示。模塊分明,不容易迷失。

經(jīng)驗點:在決策型界面中,居中放大+光效高亮,是非常直接有效的焦點策略。


2. 視覺語言:氛圍與辨識

《沙丘》的世界觀強調(diào)沙漠、貴族與荒涼感,UI 也延續(xù)了這一氛圍:

  • 材質(zhì):背景有金屬與沙塵質(zhì)感,帶來厚重感。

  • 色彩:每個陣營配有主色(綠色、棕色、藍色、金色、紅色),既強化辨識,又有“品牌”味道。

  • 徽記:幾何化的陣營符號,簡潔且容易記憶。

經(jīng)驗點:大型世界觀游戲的 UI,最好在顏色、圖形符號和氛圍感上形成自洽體系。


3. 信息呈現(xiàn):符號化與層次感

在陣營說明區(qū),信息拆解得很合理:

  • 優(yōu)缺點:紅色 V 表示劣勢,綠色 ▲ 表示優(yōu)勢。非常直觀,不需要額外解釋。

  • 敘事與機制結(jié)合:不僅給數(shù)值效果,還加了劇情描述(例如與弗瑞曼的沖突),讓選擇更有代入感。

經(jīng)驗點:把理性信息(數(shù)值)和感性信息(劇情)結(jié)合,能讓玩家在選擇時既動腦又動情。


4. 交互與引導:清晰的操作提示

底部的操作提示很細致:

  • A 選擇 / B 詳情 / X 故事,分別對應不同層級的操作需求。

  • 玩家既可以直接做決定,也可以深入劇情,滿足不同類型的用戶。

經(jīng)驗點:關(guān)鍵節(jié)點上提供“淺 → 深”不同層級的操作選項,能兼顧快進型玩家和沉浸型玩家。


5. 作品展示方式:完整體驗

Behance 項目整體除了界面,還展示了:

  • 不同場景的 UI(例如主菜單、HUD、資源界面)。

  • 色彩與符號系統(tǒng),確保整體一致性。

  • 工具說明(Photoshop / Midjourney / 后期合成),透明展示流程。

經(jīng)驗點:在作品集展示中,不僅要秀界面,還要展示系統(tǒng)性思考和設計過程。


總結(jié)

這份《DUNE》個人 UI 概念作品給我的幾點啟發(fā):

  1. 決策型界面要突出焦點,用對稱和光效增強層級。

  2. 色彩與符號體系是陣營/角色類 UI 的關(guān)鍵資產(chǎn)。

  3. 信息既要數(shù)值化,又要敘事化,提升代入感。

  4. 操作引導要考慮不同層級的玩家。

  5. 作品集展示不僅是炫圖,還要有系統(tǒng)設計思路。

如果你正在做游戲 UI 或作品集,這些經(jīng)驗都值得借鑒。

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

 

 

如果必須重新開始,我將如何在 3 個月內(nèi)學習 UI/UX 設計

清陽

適用對象

本指南非常適合:

  • 年輕的 UI/UX 設計師正在尋求進入該行業(yè)。
  • 希望進入設計領(lǐng)域的職業(yè)轉(zhuǎn)換者(例如開發(fā)人員或營銷人員)。
  • 想要實踐設計技能并提高專業(yè)水平的專業(yè)人士。

沒有經(jīng)驗?沒問題。

您所需要的只是好奇心、學習興趣和額外的奉獻精神。

為什么 UI/UX 設計是一個很好的職業(yè)選擇

按 Enter 鍵或單擊即可查看完整尺寸的圖像

工作需求和機會

UI/UX 設計正在蓬勃發(fā)展,數(shù)據(jù)也印證了這一點。美國勞工統(tǒng)計局預測,從 2021 年到 2031 年,數(shù)字設計專業(yè)的需求將增長 15%,領(lǐng)先于其他行業(yè)。

從 IT 公司到醫(yī)療保健初創(chuàng)企業(yè),每個行業(yè)都需要設計師設計清晰且具有視覺吸引力的產(chǎn)品。

無論您想成為 UI 設計師、UX 研究員還是產(chǎn)品設計師,您跨工作和跨領(lǐng)域合作的機會都是無與倫比的。

另外,遠程工作怎么樣?這是此字段的默認設置。

技能優(yōu)勢

您可以通過字體和調(diào)色板發(fā)揮您的創(chuàng)造力,解決用戶流程方面的挑戰(zhàn),并精通原型設計等技術(shù)技能。

結(jié)果如何?一份有趣又令人滿意的工作。根據(jù) Glassdoor 的數(shù)據(jù),UX 設計師的全球平均薪資在 8 萬至 12 萬美元之間,頂級職位的薪資甚至更高。

智能布局生成器等人工智能解決方案旨在提高生產(chǎn)力,而不是取代人類的技能。

用戶體驗的影響

UI/UX 設計除了賺錢之外,還旨在讓人們的生活更輕松。

想象一下您上次在線購買披薩或預訂機票的情況。

良好的用戶體驗讓這些任務變得毫不費力,而糟糕的用戶體驗會讓你對著屏幕尖叫。

作為一名設計師,你將通過構(gòu)建既簡潔又鼓舞人心的數(shù)字體驗來應對現(xiàn)實世界的問題。這種影響力會讓你欣喜地說:“這是我設計的。”

第 1 個月:奠定基礎,培養(yǎng)核心技能

了解基礎知識

第一個月的主要任務是奠定堅實的基礎。

首先,區(qū)分 UI(視覺界面,例如按鈕、顏色和布局)和 UX(整體體驗,例如易用性和滿意度)。

我花了數(shù)周時間平滑按鈕的漸變,卻發(fā)現(xiàn)用戶根本找不到它,這真是太慘了。

需要重點關(guān)注的關(guān)鍵技能:

  • 基本設計原則:了解排版、色彩理論、網(wǎng)格和布局。這些是任何優(yōu)秀設計的基本組成部分。
  • 以用戶為中心的設計:培養(yǎng)思考用戶需求的實踐能力。他們是誰?什么會讓人感到沮喪?設計一些小型的用戶畫像進行實踐。
  • 線框圖和原型設計:開始采用低保真線框圖(應用程序屏幕的草圖)來規(guī)劃用戶流程。

資源:

  • 在 YouTube 上觀看簡短的 YouTube 視頻來掌握基礎知識。
  • 閱讀唐納德·諾曼的《設計心理學》,它將徹底改變我們理解設計“為什么”的方式。
  • lawsofux.com看看那些緊湊原理,比如??硕珊头拼亩伞#憧赡懿恍?,但我有時還是會去看看這個網(wǎng)站,我想你應該知道這沒什么問題。)
  • 為了使學習更容易,嘗試玩Method.acIt's Centered That等交互式設計游戲。

專業(yè)提示:不妨從日常事物入手,比如你的咖啡機、銀行應用程序或自動售貨機。“為什么要這樣設計?”“還有什么更好的選擇?”這種態(tài)度可以提升設計師的創(chuàng)造力。

第二個月:培養(yǎng)真正的技能

按 Enter 鍵或單擊即可查看完整尺寸的圖像

學習設計工具和實踐

現(xiàn)在是時候動手實踐了。第二個月的重點是學習工具并將其應用于實際場景。

設計軟件一開始可能看起來很嚇人,但是一旦你掌握了它的感覺,它就像騎自行車一樣簡單(而且膝蓋不會擦傷)。

練習,練習,再練習:

  • 重新設計現(xiàn)有的應用程序或網(wǎng)站:選擇一個熱門應用程序(例如你最喜歡的外賣服務),并使用第一個月的設計理念來改進其界面。重點在于提升價值和外觀。
  • 建立作品集:使用這些重新設計的作品集來創(chuàng)建一個簡單的作品集。即使只有一個完成的項目也是一個好的開始。
  • 關(guān)鍵技能:響應式設計(適用于移動設備和桌面的設計)、用戶流(通過創(chuàng)建用戶旅程)以及使用 Figma 或 Framer 進行高保真原型設計的技能。

資源:

我的第一次重新設計是為一個復雜的電商網(wǎng)站做的。我花了幾個小時修改按鈕的顏色,結(jié)果發(fā)現(xiàn)結(jié)賬流程簡直像個迷宮。那時我才意識到,吸引人的設計固然好,但真正能讓你被雇傭的,是解決用戶問題。

第三個月:建立投資組合和應對現(xiàn)實挑戰(zhàn)

按 Enter 鍵或單擊即可查看完整尺寸的圖像

你已經(jīng)進入最后沖刺階段了!第三個月,你將用實際項目證明你的技能,并打造一個讓你眼前一亮的作品集,讓你“快來雇傭我!”

正是在這里,我從“我認為我能做到”轉(zhuǎn)變?yōu)?ldquo;我一名 UI/UX 設計師”。

與他人合作:

  • 從事真正的項目,例如重新設計本地企業(yè)的網(wǎng)站或為 GitHub 上的開源項目做出貢獻。
  • 從設計社區(qū)獲取反饋,例如Instagram、XLinkedIn、Dribbble、BehanceReddit 的 r/userexperience。在我職業(yè)生涯的早期,一位導師的誠實評價(“你的字體選擇太瘋狂了”)拯救了我的作品集,使其免于受損。

投資組合開發(fā):

  • 在流暢的網(wǎng)絡作品集上展示 2-3 件您最出色的作品(Notion 或 Webflow,或Framer(我個人使用)是免費選項)。
  • 為每個項目撰寫案例研究,解釋你的流程:調(diào)研、構(gòu)思、測試和迭代。這能向公司表明你是一位思考者,而不僅僅是一個像素推手。
  • 關(guān)鍵技能:學習用戶測試(讓朋友嘗試您的想法并記錄任何問題)、修改(根據(jù)反饋進行改進)和演示(練習有效地表達您的工作)。

資源:

  • Behance 的熱門設計師作品集可能會給你帶來啟發(fā)。
  • Medium 上的 UX 設計社區(qū)提供免費的案例研究模板。

使用 AI 驅(qū)動的 Figma 插件(例如智能布局工具和調(diào)色板生成器)提升您的工作效率。就像擁有一個永不休眠的設計助手。

我建議您開始在工作流程中使用 AI,這樣您的工作速度就可以比其他設計師快 10 倍!

關(guān)鍵習慣

按 Enter 鍵或單擊即可查看完整尺寸的圖像

養(yǎng)成日常觀察的習慣。分析實體和數(shù)字事物,例如健身追蹤器、新聞應用和餐廳菜單。

可用性怎么樣?為什么是這個顏色?如何改進?

這可以幫助您像設計師一樣思考,并且您很快就會發(fā)現(xiàn)用戶體驗(和解決方案)的問題隨處可見。

專家建議和專業(yè)提示

  • 建立人脈網(wǎng),就像你的職業(yè)生涯全靠它一樣。我的第一份自由職業(yè)工作來自一次偶然的機會,當時我緊張地遞上了我的作品集。在領(lǐng)英和Instagram上直接聯(lián)系你尊敬的設計師。
  • 堅持是關(guān)鍵。即使每天只花30分鐘學習新事物,或者讀一讀尼爾·埃亞爾的《Hooked》,也能帶來顯著的變化。
  • 接受反饋:反饋雖然令人難受,但卻是改進的最快途徑。我曾經(jīng)因為一些評論刪除了一個完整的項目,但這次返工讓我贏得了一位客戶。

雇主希望設計師能夠加快結(jié)賬流程或提高客戶參與度,而不僅僅是讓事情變得有趣。

最后的想法

成為一名 UI/UX 設計師只需要策略和奉獻精神,而不是設計學位或多年的經(jīng)驗。

在三個月內(nèi),您可以通過了解基礎知識、創(chuàng)建真實世界的項目并自信地展示您的工作,從初學者進步到可以投入工作的水平。

現(xiàn)在邁出第一步:選擇一個應用程序,重新設計一個屏幕,并與好友分享,并且不要忘記在社交媒體上分享它以獲得反饋。

設計行業(yè)正在尋找您獨特的見解。

感覺受到啟發(fā)了嗎?關(guān)注我的 Instagram (@rehan.designs),獲取每日見解、作品集點評以及我的設計幕后花絮。

 

蘭亭妙微(www.chenguixiang.net )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設計、B端界面設計桌面端界面設計、APP界面設計圖標定制、用戶體驗設計交互設計、UI咨詢、高端網(wǎng)站設計、平面設計,以及相關(guān)的軟件開發(fā)服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

日歷

鏈接

個人資料

藍藍設計的小編 http://www.chenguixiang.net

存檔