娶了UI設計師的Python工程師-北歐生活

  AWD難道真比 RWD 難用?繼續往下看說不定會推翻你的理解呢!       目錄 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 評估現有的資源人力 對網頁設計畫面要求較嚴謹的狀況下，就使用 AWD 吧！ AWD 要怎麼做才能對 SEO 無痛? 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ 當下  RWD  正夯，但並不代表所有的網頁都適用 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力，再決定使用  AWD  還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD，簡單整理如下表所示 ：   RWD AWD 人力需求 較少，因為只有一套  CSS 較多 (因為需要多套 CSS)， 需要網頁人才與尚需 前端 工程師撰寫判斷裝置後自動匯入相應的 CSS 的程式 維護成本 較少，因為只有一套 CSS 較多，因為有多套  CSS  以及程式 適用內容 網站內容較單純時適用。 如簡單的企業形象網站、一頁式網站等等。 網站內容較多、較複雜時適用。 如博克來、MOMO 購物網、蝦皮拍賣等。 適用排版 較簡潔的畫面與排版 較多元化、複雜的畫面與排版 SEO  支援 SEO  優化、維護較容易 同左，但前提是不能直接把網站分成桌機版跟手機版兩個網站再進行轉址，導致流量分散。 工程師必須要在同一個 URL 下寫出對應裝置的網站架構並指定適用的 CSS 可支援的裝置 各裝置都適用 各裝置都適用 以上分析建議仔細看過。 以下再作補充說明： 評估現有的資源人力 只需要寫一套  CSS ...

  RWD 和AWD的差別到底在哪?還搞不清楚?今天你得要好好看完這篇啊!   目錄 RWD 和 AWD 的差異與優缺點 RWD、AWD 的異同之處 共同之處 不同之處 RWD AWD RWD 的優點與缺點 優點 缺點 AWD 的優點與缺點 優點 缺點 該選擇 RWD 還是 AWD ? 先看看自己的需求吧！ AWD  跟  RWD  的目的一致，都是希望能針對桌機、平板、手機等不同尺寸的裝置，而顯示出易於瀏覽的網站畫面。 在規劃網站時，相信有不少的 PM 在與 前端 工程師或是 網頁前端設計師 在溝通上遇到瓶頸，像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過 網頁設計 、或是無任何技術背景的網頁規劃者為角度，講解 RWD 與 AWD 網站的差異，以及如何規劃與選擇。 RWD 和 AWD 的差異與優缺點   在網頁上， RWD  是「Responsive Web Design (響應式 網頁設計 )」的縮寫；而 AWD 則是 「Adaptive Web Design (自適應式 網頁設計 )」的縮寫。RWD 與 AWD 是為現今大多數人們習慣使用手機、平板等行動裝置上網而生的  CSS  寫法，讓 網頁設計 無論在桌機螢幕上、或是尺寸較小的行動裝置上，都能清楚的呈現，讓使用者能更舒服的瀏覽網頁。 RWD 與 AWD 的差異，簡單的來說，前者是無論行動裝置或是桌機，都使用同一套 CSS；而後者是針對各種裝置撰寫對應的 CSS，可以有多套  CSS ，例如桌機有桌機的一套 CSS，手機有自己的一套 CSS。 RWD  與 AWD 的差異，簡單的來說，就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下： RWD 會把所有裝置的樣式都寫在同一套  CSS  中，因此無論行動裝置或是桌機，都是使用同一套 CSS 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用...

入門UI設計的方向百百種,今天讓我們以心理學的角度,帶你了解使用者的心裡面! 最近學習了米勒定律和希克定律。其中關於如何提升視覺感知的要點，對我十分有幫助： 第一：平均每個人在記憶時候最大數量為7個。 第二：眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。而視覺感知是設計領域的重中之重！特別是產品設計師，作為設計師（包括 UI 及 UX 設計師），都需要去了解和運用這些定律，提升用戶視覺感知。 不只 UI ，在 UX 中也超重要的 設計心理學指南！ 什麼是視覺感知 視覺感知是人們能夠獲得信息，並由大腦進行處理的最有成效的方法。人的眼睛有著接收及分析視像的不同能力，從而組成視覺。腦部將眼睛接收到的物象信息，分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。有了這些數據，我們可辨認外物和對外物作出及時和適當的反應。 視覺感知的特點 速度快，所有信息以圖形儲存，而在絕大多數情況下，人們感知圖標和插圖的圖片元素比文字更快！ 大部分用戶是視覺驅動的，所以視覺感知機制通常應該在設計過程中考慮，並研究裡面幾條挺有意思的規則： 1. 人眼閱讀圖像比文字更快。 2. 人們需要約1/10秒來獲得視覺場景或元素的一般感知（該速度對於文字表達基本不可能的）。 3. 大腦儲存重要的信息片段，通常由固定轉為視覺圖像，即使它們是通過文字感知得到的。 視覺感知規律心理學家提到的視覺記憶感知三個核心規律，很簡單也好記憶： 1.集中： 要記住一件事情或大量的數據，需要集中精力。否則，數據將在短期記憶裡上被丟棄 的機率很高。 2.聯想記憶： 大腦裡其實有個巨大的網絡連接，我們會自動將感知到的新的片段能和舊的片段 聯繫關聯，感知就會越強，也在設計中也就是常說的用戶習慣。 3.重複： 不斷去重複激活一些片段，直到達到長期識別為主。基於這3個點的的規律我們需要在視覺中可以去運用，通過設計強調突出我們想表達的內容，突出重要信息，通過簡單的交互讓用戶和他之前的經驗關聯。 視覺感知該如何運用？ 1. 通過圖標加強感知 2. 減少數量加強感知關注度在設計中很重要 如果同時提供了幾個選項，按鈕，選項，用戶的短期記憶會花費更多的時間和精力來考慮，這時候隨時可能會讓用戶跳失。 米勒...

本篇為福斯UI設計篇，關於Audi的UI設計，請點此  連結  以及 此連結 UX和UI設計可不只和奧迪有關,連福斯也參一咖!一起來看看UI.UX設計和它有什麼關係! 不落後於 Audi，福斯跟進「數位優先」視覺辨識 ▲ 新的福斯LOGO設計由原本的「仿3D」變回2D平面icon，就可零違和地嵌入於更多裝置的 UI 視覺設計。 而 2019 年 7 月，德國的另一間汽車公司-福斯汽車也宣布將推出全新 LOGO。同年的 9 月 10 日，在法蘭克福國際車展前夕的「福斯之夜」上，福斯正式發布了全新的品牌標誌——也是將原本的立體風 Logo「平面化」，他們進而表示，品牌接下來將會有完全嶄新的商業策略！ ▲ 福斯LOGO進化史-一切的LOGO變化都是為了符合當時的 UX 由以上影片我們可以看到：福斯Logo的進化史，都是與當時的UX有關。 而去年2019 年，最新的 LOGO 整體造型，依然使用字母「V」和「W」上下組合的形式，不過變得更簡單直觀。原先設計成浮雕概念的立體造型，改為平面化 2D 風格，「V」和「W」兩個字母中間的空隙變大，「W」的底部和外部圓圈完全脫離，留下了空間。 其實「扁平化」是現代數位時代的設計趨勢，除了福斯，許多知名廠商的 LOGO 也都改頭換面、採用扁平化的設計，如 Google、YouTube、Netflix、ebay、Citroën等。 扁平化設計為去除陰影、漸層和反射光澤等3D要素，通常使用高亮度的色彩，搭配無襯線字體，呈現出簡約現代風格。目的是為了減少不必要的裝飾元素，而將核心元素明確傳達。 除了LOGO， UI 設計也正流行扁平設計。 同時，這種簡約的設計無論在傳統印刷輸出、電視或螢幕相對較小的智慧手機上，都能更好更快地呈現，也更符合現今數位化的潮流。   新LOGO也是新戰略 值得注意的是，福斯這次不只換了Logo，連品牌識別聲音也換了。在過去，福斯汽車的廣告，結尾都是低沉渾厚的男性嗓音，但福斯大這次大破例，請到了德國著名的女演員露易絲‧海爾姆（Luise Helm）獻聲，打破多年聲音形象，改以溫暖、愉快、自信的女性聲音取代。 以後的福斯廣告，都將使用女聲來宣讀「福斯」品牌名了。 ▲...

 UI設計原來可以成為連結!這篇要繼續介紹,奧迪和使用戶的創新體驗! 本篇為Audi篇的下集，上集「為落實“數位優先”的UI設計...Audi竟將LOGO壓扁了!（上）」請點此 連結 字體 ▲ 新 Audi Logo 與字體搭配的準則。 新的 Audi 字體也隨著新的 logo 曝光！ Strichpunkt 表示：隨著新的「簡潔有力」的清新風格的 Audi logo。 ▲ Audi 標語的使用範例（總是以小型字體出現在畫面的角落）。 圖標 ▲ 各式新的 Audi UI icons 為線條化設計，靈感來自精確的車輛工程設計圖 而用於網站、app、車用數位裝置的 2D 線條線條化圖標，Strichpunkt 表示設計靈感是來自 在Audi 車輛研發設計時，工程師繪出的精確的工程設計圖。 ▲ 新的 Audi UI icons使用範例 影片 ▲ Strichpunkt 替出現於新 UI 介面上的 Audi 影片立下「S 型曲線」原則：「一開始強而有力的加速啟動，然後在結束時迅速減速」。 而所有出現在數位裝置上的 Audi 形象影片動作，也都遵循著 S 型曲線模式，Strichpunkt 表示「一開始強而有力的加速啟動，然後在結束時迅速減速。」 奧迪也為此新視覺辨識制定了品牌指南，製作「 Audi 品牌指南網站 」，各式資源開放給大眾免費瀏覽、下載，包含全新設計的 Audi Logo、字體、形象圖片、影片，甚至連 HTML 原始碼、被淘汰的設計都在上面，讓用戶能親自感受參與他們品牌的重塑過程。 現在，Strichpunkt 將在子網域上啟動一個互動式工具，使用戶們都可以模擬奧迪風格的設計、字型、排版，背景和顏色。而之後，該工具會告訴他們其模擬作品是否符合 Audi 的設計原則與方針。 是不是沒想到UX和UI設計也能有這種功能！ ▲ 各式新的 Audi 廣告，應用了所有 Strichpunkt 為 Audi 打造的 Logo、構圖、字體、等元素。 Strichpunkt 表示：這一連串的互動式工具，都是為了讓新的 Audi 品牌設計方針能「更平易近人」，與 Audi 的新品牌識別「accessible...

福斯和奧迪如何將UI設計和"數位優先"做完美結合?這三天用文章來娓娓道來~    AUDI 的「數位優先（digital-first）」UI 視覺辨識 ▲ 因應 Audi 的「數位優先」品牌重塑計畫，德國設計公司 Strichpunkt 幫 Audi 打造出極簡一致、功能為主的跨平台 UI 介面。主要元素為區塊佈局、簡單配色、獨特的 Audi 字體以及平面化的 Audi 標誌 現今人們上網的媒介已不再侷限於桌上型電腦，手機上網、或是在車上裝設平板電腦上網早已普及。因此德國汽車公司 Audi 早在於2017 年透露了他們的品牌重塑（rebrand）計畫，以「數位優先（digital-first）」為其主軸。 「數位優先（digital-first）」的品牌重塑（rebrand）計畫聚焦於數位裝置的 UI 設計，期望更多用戶，無論是使用平板、手機、桌上型電腦等上網媒介瀏覽 Audi 網站、或是使用 Audi 的 APP 等上網行為，都能有更好的使用者體驗（ UX ）。德國的設計公司 Strichpunkt 負責這次 Audi 品牌重塑計畫的 UI / UX 設計，並期望讓所有的數位平台 —— 從 Audi 的網站、app 應用程式到車上的數位裝置（包含數位螢幕、聲音 app 及包含智慧手錶在內的所有數位產品等）都維持一致。 ▲ Audi 的「原子設計（atomic design）」基本概念。 此次「品牌重塑」專案可說是顛覆性的翻新，Strichpunkt 創建了新型態的「原子設計（atomic design）」思路：在評估數位設備的外觀時，我們將 Audi 的視角變化應用於設計上面。。 我們的思考過程不只是從最小的設備開始，而且是從設計的 最小元素 開始。」 延續此「原子設計」的設計方法， Strichpunkt 建構出一套功能優先、走極簡風格的 UI 使用者界面。這套新 Audi UI 用戶界面已經於 2017 年公開在網路上：任何人都可以從 GitHub 或是 Audi UI Photoshop kit 下載使用 Audi 圖標、UI 組件和字體。 ▲ Audi 的新 UI 介面佈局 讓我們簡要概述一下這次 Audi 的新 UI 設計：「介面佈...