亚洲国产成人精品久久久国产成人一区二区三区综合区精品久久久中文字幕一区 ,日本东京热在线观看视频,国产色午夜九色视频在线观看,亚洲免费高清视频在线,一区二区三区四区五区日韩

首頁

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

清陽

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

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

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

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

3. 設(shè)計(jì)與體驗(yàn)亮點(diǎn)

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

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

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

imgi_521_b54a2c228930055.685bea4883f26.jpg

imgi_525_b2b378228930055.685bea4883446.jpg

imgi_527_76b8d4228930055.685bdef28d499.jpg

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

 

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

清陽

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

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

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

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

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

Eric Miller的移動可視化流程圖

為什么我更喜歡線框和 UI 設(shè)計(jì)流程?

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

我如何制作流程?

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

步驟1

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

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

步驟2

流程包括 5 個組件:

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

步驟3

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

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

問題

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

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

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

樸素的交互設(shè)計(jì)原則

清陽

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

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

 

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

界面設(shè)計(jì)案例分享 | 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. 項(xiàng)目背景 & 設(shè)計(jì)目標(biāo)

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

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

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

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

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

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

3. 界面設(shè)計(jì)(UI/UX & Website)

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

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

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

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

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

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


總體評價(jià)與亮點(diǎn)

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

 

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

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

清陽

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

深刻理解國土局需求

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

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

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

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

清陽

當(dāng)美好的愿望遭遇現(xiàn)實(shí)

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

改變一切的研究

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

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

我們不需要要求團(tuán)隊(duì)適應(yīng)我們的系統(tǒng),如果我們的系統(tǒng)適應(yīng)他們呢?

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

新的文檔架構(gòu)

組件標(biāo)題

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

視覺規(guī)格

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

情境指導(dǎo)

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

注意事項(xiàng)

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

應(yīng)用內(nèi)示例

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

最終結(jié)果

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

結(jié)果

建立在成功的基礎(chǔ)上

教訓(xùn)

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

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

清陽

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

伊莉扎維塔·比利亞耶娃

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

樸宰范

注意事項(xiàng)

應(yīng)該做的

注意事項(xiàng)

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

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

清陽

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

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

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

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

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

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

1. 為什么選擇 Google Gemini AI

2. 提供用戶文本

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

3. 設(shè)置輸出令牌和溫度

步驟 4:連接到 Google 文檔

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

附錄

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

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

2. 對回應(yīng)進(jìn)行盡職調(diào)查。

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

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

 

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

【游戲界面設(shè)計(jì)分享】《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概念設(shè)計(jì)看游戲界面經(jīng)驗(yàn)

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


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

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

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

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

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

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


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

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

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

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

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

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


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

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

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

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

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


4. 交互與引導(dǎo):清晰的操作提示

底部的操作提示很細(xì)致:

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

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

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


5. 作品展示方式:完整體驗(yàn)

Behance 項(xiàng)目整體除了界面,還展示了:

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

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

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

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


總結(jié)

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

  1. 決策型界面要突出焦點(diǎn),用對稱和光效增強(qiáng)層級。

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

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

  4. 操作引導(dǎo)要考慮不同層級的玩家。

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

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

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

 

 

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

清陽

適用對象

本指南非常適合:

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

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

您所需要的只是好奇心、學(xué)習(xí)興趣和額外的奉獻(xiàn)精神。

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

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

工作需求和機(jī)會

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

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

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

另外,遠(yuǎn)程工作怎么樣?這是此字段的默認(rèn)設(shè)置。

技能優(yōu)勢

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

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

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

用戶體驗(yàn)的影響

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

想象一下您上次在線購買披薩或預(yù)訂機(jī)票的情況。

良好的用戶體驗(yàn)讓這些任務(wù)變得毫不費(fèi)力,而糟糕的用戶體驗(yàn)會讓你對著屏幕尖叫。

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

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

了解基礎(chǔ)知識

第一個月的主要任務(wù)是奠定堅(jiān)實(shí)的基礎(chǔ)。

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

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

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

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

資源:

  • 在 YouTube 上觀看簡短的 YouTube 視頻來掌握基礎(chǔ)知識。
  • 閱讀唐納德·諾曼的《設(shè)計(jì)心理學(xué)》,它將徹底改變我們理解設(shè)計(jì)“為什么”的方式。
  • lawsofux.com看看那些緊湊原理,比如希克定律和菲茨定律。(你可能不信,但我有時(shí)還是會去看看這個網(wǎng)站,我想你應(yīng)該知道這沒什么問題。)
  • 為了使學(xué)習(xí)更容易,嘗試玩Method.acIt's Centered That等交互式設(shè)計(jì)游戲。

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

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

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

學(xué)習(xí)設(shè)計(jì)工具和實(shí)踐

現(xiàn)在是時(shí)候動手實(shí)踐了。第二個月的重點(diǎn)是學(xué)習(xí)工具并將其應(yīng)用于實(shí)際場景。

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

練習(xí),練習(xí),再練習(xí):

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

資源:

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

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

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

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

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

與他人合作:

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

投資組合開發(fā):

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

資源:

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

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

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

關(guān)鍵習(xí)慣

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

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

可用性怎么樣?為什么是這個顏色?如何改進(jìn)?

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

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

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

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

最后的想法

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

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

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

設(shè)計(jì)行業(yè)正在尋找您獨(dú)特的見解。

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

 

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

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.minlechaoshi.com

存檔