UI 設計師的 Midjourney 詠唱素材描述詞符咒學林育正 Riven21 min read·Jun 22, 2023--
Share
AI 繪圖可以怎麼幫設計師設計網站和 App 使用者介面😶🌫️
Press enter or click to view image in full size在當代 UI 使用者介面設計中，視覺表現的重要性無可否認。一個吸引人且易於使用的網站使用者介面（User Interface）能有效提升閱覽者的體驗。
而在今年 AI 技術的進步為 UI 設計帶來了新的可能性，各種以人工智慧為技術的工具軟體不斷出現；本文將整理設計師可以怎麼使用 Midjourney AI 繪圖，將其用於生成網站或 App 的 UI 設計會用到的素材。
而這些素材我會在最近正在籌備的 AI 覺醒！UI 設計詠唱學 線上課程裡，將其應用在 Figma 設計 UI 介面，並透過新的 AI 做網站軟體來做開發，目前正在問卷調查階段，有興趣的同學可以協助填寫，並會收到開課通知與優惠券：
AI 覺醒！UI 設計詠唱學｜與 AI 同行，零程式基礎就能搞定網頁設計＆開發AI 發展是危機？轉機？林育正 Riven 帶你學會 AI 詠唱技巧，讓 AI 變成你的 UI 設計好夥伴，提升介面設計流程與效率、解救設計眾生脫離趕稿苦海＆無法與開發團隊溝通的困境，成為炙手可熱的 UI 設計師！go.rar.design
Midjourney 要怎麼做 UI 素材Midjourney 提供了強大而直觀的繪圖功能，使用者可以輸入簡單的語句，描述他們想要的圖像樣式，Midjourney 的 AI 將根據這些指令產生相應的圖像。這種基於語義的圖像生成方式能極大地節省設計時間，並為非專業設計人員提供了生成專業級圖像的可能性。
將 Midjourney 的繪圖功能整合到網站 UI 設計中有多種方式。設計師可以直接使用 Midjourney 生成的圖像作為網站的背景、按鈕、插圖等元素，或是直接做出 UI 排版的靈感這種方式不僅能節省設計時間，還可以確保網站的視覺風格保持一致。
為了方便查閱和應用，我有將每張素材圖的 prompt 描述詞貼在圖片底下的註記裡，讓大家可以直接複製貼上到 Discord 使用；並因為每個設計專案所需要的風格與用途並不同，可以試著拆解其中的關鍵字，來拼貼出適合自己要用的描述詞。
Press enter or click to view image in full sizeUI Design of a Space Game, Inspired by Star Wars, Sci-Fi, Clean, Neon Color Palette, Mobile App, High Resolution — ar 16:9 — v 5.1科幻感網頁背景這套UI素材的設計靈感來自於科幻電影和未來主義設計，透過動態元素、流線形圖形和獨特的色彩配置，創造出一種超現實且深度的視覺體驗。
科幻感網頁背景 UI 不僅在視覺上引人入勝，而且易於使用和理解。包括圖形化的數據顯示、光滑的過渡和多維度的互動設計，都有助於讓使用者感覺像是進入了一個新的數位世界。
在 Midjourney 使用上可以利用的技巧有：若要當作背景可以加上參數 ar 16:9 拿到 1920:1080 這樣比例的素材；另外就是如果出圖上有文字，建議透過 Photoshop 內容感知去除即可。
使用的顏色和形狀選擇在傳達一種科技感和未來感，並以此增強使用者的網站或應用程式體驗。無論你目標用戶群是科技愛好者、遊戲玩家、或是對新型數位產品感興趣的人群，這套科幻感網頁背景都能迎合他們的需求。
科幻感 UI 背景素材不僅適用於網頁設計，同時也能用於移動應用、桌面軟體、遊戲介面等許多場合。
Press enter or click to view image in full sizePress enter or click to view image in full sizelanding page design, futuristic, highly detailed, sharp, featured on Dribbble — ar 16:9 — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizeUi ux soft 3d modern chill Web site Page design — ar 16:9 — v 5.1而搭配這樣的素材，網頁整體 UI 視覺可以使用以下設計元素：
抽象的幾何圖形：這些圖形可以包括流線形線條、多面體、網狀結構等，為網頁背景添加一種科技感。數據視覺化：數據圖表、數字和代碼等元素，可以強化網頁的科技感，讓使用者覺得他們正在使用一種高科技產品。光線和霓虹色彩：鮮艷的藍色、綠色、紫色以及光線和光暈的使用，能創造一種未來和科幻的視覺效果。空間和深度：透過圖層和透視感，以及3D元素的使用，可以為你的網頁背景創造出一種空間感。動態元素：動態效果、變換的背景、滑動效果，這些都能讓你的網頁看起來更生動和現代。未來主義的視覺感：包括但不限於機器人、星球、太空船、雷射光線等元素，都能加強網頁的科幻風格。Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeabstract illustration clean flat minimalistic, vivid colors, in colors purple white and orange — ar 16:9 — v 5.1使用以上這些元素時，要確保網站仍然易於閱讀和導航。要注意不要過度使用這些元素以至於分散使用者對內容的注意力，或使使用者感到困惑。最終，網頁設計應該與品牌或產品的目標和目的保持一致。
isometric 等距 2.5D 插畫或素材等角投影（Isometric）風格是一種在 2D平面上描繪 3D 物體的技術，具有獨特的視覺特點和表現力。在這種風格中，所有的物體都是按照一定的角度（通常是 30 度）來描繪，並且在大小和比例上保持一致，讓物體看起來就像是從等角視角來觀察的一樣。
使用 isometric 在 UI 設計上有以下優點：
立體感：等角投影風格能夠在 2D 平面上創造出強烈的立體感，讓物體看起來就像是在空間中浮動的一樣。規範性：在等角投影風格中，所有的物體都是按照一定的比例和角度來描繪，這種規範性使得設計看起來更加的統一和協調。簡潔性：等角投影風格避免了過多的細節和陰影的使用，這使得設計看起來更加的簡潔和清晰。重點關鍵字有 isometric, low poly 等，並加上要製作的場景，如露營地、樂園；而渲染類關鍵字可以用 oc render, best quality 等；使用 version 建議為 5 即可，v 5.1 容易讓場景細節過多。
露營地場景素材Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizecamping, tent, camper, barbecue Game asset style in low poly mockup, isometric, tilt shift, 16 bit pixel art, trendy IP for pop market, mockup, blind box toy, fine glossy, white background, flat, 3d render, oc render, best quality, 4k, super detailed — v 5Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeCamping site, 3d, front view, isometric, octane renderer, orange light, Miniature diorama, minimal object, A landscape in an object — v 5樂園場景素材Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizePlayground, ferris wheel, candy, flowers, Game asset style, isometric, tilt-shift, 16-bit pixel art, astrology, sepia roof, trendy IP for pop mart in low poly mockup, model, blind box toy, fine glossy, white background, flat, 3d render, oc render, best quality, 4k, super detailed — v 5Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeAmusement park, Ferris wheel, carousel, Character bicycle, isometric 45 degree angle tilt angle, 3d render, Blind box, a soft color, super many details, 8k — v 5除了網站設計、介面設計，等角投影風格也被廣泛用在許多領域，如視覺藝術、視覺設計、遊戲設計、產品設計等。例如，在遊戲設計中，很多策略遊戲和模擬遊戲都使用了等角投影風格來創建遊戲的世界和角色。在視覺設計中，等角投影風格被用來創建視覺識別設計、平面海報等。
Holographic Design 全像攝影視覺全像設計（Holographic Design）是一種視覺藝術風格，其主要特點是使用反射、折射和分散光線的方式來模仿全息影像所產生的獨特視覺效果。這種設計風格常常使用鮮豔且充滿活力的色彩，並具有從不同角度觀察時會產生變化的特性。
全像設計（也有稱全息）在數位藝術、產品包裝、時尚、內部設計，甚至是網頁和使用者介面設計中都有應用。在數位藝術和設計中，全像效果通常是用數位工具創建的，這種效果能夠模仿真實的全息圖片在光線照射下產生的變化。
Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeRainbow holographic paper wallpaper, in the style of distorted realism, y2k aesthetic, rococo pastel, shiny, celestialpunk, i can’t believe how beautiful this is, smooth and curved lines — ar 16:9 — v 5.1此外，全像設計也經常與其他視覺風格結合使用，例如極簡主義、未來主義和科幻風格等，創造出豐富且獨特的視覺體驗。
儘管全像設計的視覺效果往往令人眼花繚亂，但在使用時仍需要保持設計的簡單和清晰，以確保訊息的有效傳達和良好的用戶體驗。
而如果要將 Holographic 抽象感更具體一點，可以加入幾何、多面體，或是透過莫比烏斯環（Möbius strip）這樣的介質來做出裝飾性素材。
莫比烏斯環（Möbius strip）形體Press enter or click to view image in full sizePress enter or click to view image in full sizepetrol silicone abstract shape, holographic, White background, soft light, low contrast, transparent, The shape of Mobius ring, minimalist — ar 3:2 — v 5 — v 5.1莫比烏斯環是一種拓撲結構，其特點是只有一個表面和一個邊界，這種特殊性質使它成為許多設計師和藝術家的靈感來源。
這是幾個將莫比烏斯環加入到你的設計中的方法：
識別設計：莫比烏斯環的形狀既獨特又具有象徵性，它可以被用來設計一個獨特且引人注目的標誌。莫比烏斯環的無窮和連續的特性可以用來象徵持續性、創新和永恆。圖案和背景：莫比烏斯環的形狀可以被用來創建引人入勝的圖案和背景。複製和旋轉莫比烏斯環的形狀，可以創造出具有深度和複雜性的設計。網頁設計和動畫：在網頁設計和動畫中，莫比烏斯環的3D形狀可以被用來做出動態的視覺效果和導航結構。其無窮和連續的特性也可以用來表現數據的流動和資訊的連續性。Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeCinema 4d, blender, octane render, high quality, stunning, symmetrical, geometrical, award winning product studio lighting photo of pink and cyan glass torus ::3 — v 5.1那如果是要做出實體一點的素材，可以試著將 Holographic Design 作為關鍵字，加進原本的 prompt 裡面，也會有視覺上增幅的效果。
全像科幻感耳機產品Press enter or click to view image in full sizePress enter or click to view image in full sizepetrol silicone abstract shape, holographic, White background, soft light, low contrast, transparent, The shape of a headset with a transparent housing, minimalist — ar 3:2 — v 5Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeOld — fashioned headset, creative design, Extreme light refraction and reflection, secondary surface scattering, transparent material, translucent, off — white background color, good lighting environment, super delicate, 8K — v 5.1向量風格極簡插圖向量風格極簡插圖是在設計界中相當流行的一種風格；極簡（minimalism）插圖以其獨特、清晰且易於理解的視覺語言，在設計界引起了廣泛的關注。這種風格的插圖主要使用簡單的幾何形狀和直接的色塊來創造出鮮明、清晰的視覺效果，同時保持了極度的極簡和現代感。這樣的插圖適用於各種平台，包括網頁設計、品牌形象設計、商業廣告以及產品包裝等等。
Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeMotorbike, Courier :: modern minimalist illustration ::2 change Fresh, A clean background, Gradient color, Vector — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeTent, Spring outing, Car, Travel :: modern minimalist illustration ::2 change Fresh, A clean background, Gradient color, Vector — v 5.1應用在網頁 UI 設計上應包含的元素：
幾何形狀: 方形、圓形、三角形等基本的幾何形狀是極簡插圖的基礎。這些形狀可以單獨使用，也可以組合在一起創造更複雜的形象。簡單的顏色方案: 通常，極簡插圖使用的顏色相當有限，並且優先考慮高對比度的色彩組合，以增強視覺衝擊力。簡單的細節: 在極簡插圖中，細節通常是簡化的，只留下最基本的元素來表達必要的信息，以保持圖像的簡潔性。排版和空間的利用: 極簡插圖常常使用大量的空白空間以及簡潔的排版來增加視覺的呼吸空間，並強調圖像的主題。向量藝術: 由於向量藝術可以無限放大而不會失去清晰度，因此這種風格的插圖通常會使用向量圖形來製作。極簡插圖的魅力在於它的簡約和直接，可以立即吸引觀眾的注意力，並且輕易地傳達訊息。無論是在品牌識別、網站設計或產品包裝上，它都能提供一種獨特且吸引人的視覺。
Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeRiding scooter, simple, clean, flat, vector, white background, sticker — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeRocket icon in round shape and minimal style without alphabel or title — v 5.1天空之城飄浮 Minecraft 素材而結合上面提到的許多關鍵字，我們也還可以去拼湊出適合目前要做的網頁或 App 的 UI 素材，用想像力結合 Midjourney 的運算能力，做出不常見、軟體要做也不好弄得圖片。
比如說，我們可以將 Minecraft（當個創世神系列）的立方體美學和天空之城的浪漫夢幻結合在一起，創造出獨特的視覺風格和體驗；可以充分利用 Minecraft 的像素風格和構造，每個元素都仿佛是由無數的小方塊搭建而成，呈現出一種生活化且親切的感覺。
Press enter or click to view image in full sizePress enter or click to view image in full sizeFloating Island ::2 There are snowmen and snow mountains., Modern isometric, Cube World Rocks :: Trees ::-1 c4d, cinematic lighting, Unreal Engine, artistic, OC renderer, Minimalism, best quality, UHD, award winning — ar 4:3 — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizeFloating Island ::2 There are snowmen and snow mountains., Modern isometric, Cube World Rocks :: Trees ::-1 c4d, cinematic lighting, Unreal Engine, artistic, OC renderer, Minimalism, best quality, UHD, award winning — ar 16:9 — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeFloating island modern isometric on a square platform The platform is made of snow snowman and snow mountain a simple building cube world C4D film lighting unreal engine artistic OC renderer Minimalism best quality UHD The award — winning — v 5.1Press enter or click to view image in full sizePress enter or click to view image in full sizeisometric art, A futuristic building, Floating Island, A light background, A clean background, mother of pearl iridescent, holographic white, Minimalism, c4d, cinematic lighting, Unreal Engine, artistic, OC renderer, best quality, UHD, award winning — ar 4:3 — v 5.1Landing page 的 Hero bannerHero Banner 是一種網頁設計元素，通常位於網站首頁的最頂部，也是訪客第一次訪問網站時看到的內容。一個典型的 Hero Banner 包含引人注目的圖像、強烈的標題以及一個清晰的呼叫行動按鈕（Call to Action，CTA）。
以下是 Hero Banner 的一些主要特點：
視覺吸引力：Hero Banner 通常包含一張大型的、高質量的圖片或影片，有時還會包含引人注目的動畫效果。這種強烈的視覺效果可以吸引訪客的注意力，並引導他們深入了解網站的內容。強烈的訊息：Hero Banner 上的文字通常是網站或品牌的主要訊息。這可能是一個標語，一個產品的簡短介紹，或者是一個描述公司使命的語句。呼叫行動按鈕：大多數的 Hero Banner 都會有一個或多個清晰的呼叫行動按鈕，比如 “Learn More”、”Shop Now” 或 “Sign Up”。這些按鈕鼓勵訪客採取某種行動，如購買產品、註冊帳戶或者了解更多資訊。Press enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizePress enter or click to view image in full sizeUI design of a Motorbike with 3D illustration, Landing page, Modern, Classy, Minialistic, High Resolution — ar 16:9 — v 5.1Hero Banner 是一種強大的網頁設計工具，可以有效地吸引訪客的注意力，並引導他們採取特定的行動。然而，設計一個成功的 Hero Banner 需要考慮到許多因素，包括視覺設計、文案寫作以及使用者體驗等。
而使用 Midjourney 來做 Hero banner 的圖片是非常剛好的，可以試著用這些關鍵字組合來渲染。
Press enter or click to view image in full sizeUI Design of Scented Candles, Landing page, Minimalistic, Elegant, Dreamy Pastel Color Palette, High Resolution — ar 4:3 — v 5.1Press enter or click to view image in full sizeUI Design of Food Ordering Page of a Dessert Company with Beautiful Korean Style Cupcakes, Tablet Interface, Landing page, Feminie, Elegant, Fancy Pastel Color Palette, High Resolution — ar 4:3 — v 5.1Press enter or click to view image in full sizeUI design of a Vintage Jewellery Company, Landing page, Vintage, Classy, Minialistic, Elegant, Navy Blue and Gold color palette, High Resolution — ar 4:3 — v 5.1後記透過使用 Midjourney，設計師們可以快速且輕鬆地創造出獨特且吸引人的視覺效果，並將其應用到網站的 UI 設計中。這不僅可以節省設計時間，還可以為使用者提供更個性化的體驗。更重要的是，Midjourney 的易用性意味著即使是非專業的設計師也能使用它來提升他們的網站設計。
無論你是網站設計師還是只是對 UI 設計有興趣的人，都強烈推薦你嘗試使用 Midjourney 的 AI 繪圖。它的強大功能和直觀的操作將為你的設計工作帶來很大的變化。
試試看，讓想像力成為我們唯一的限制。
如果想看更多 AI 在設計上的應用，最近在 設計師 Riven Instagram Reels 會更新不少內容噢！