布萊恩的創業小窩

  難道 RWD 才是最好的選擇?看完這篇說不定你會覺得AWD更適合你呢!       目錄 該選擇 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 。當使用者打開了網頁，就能即時透過網頁的寬度，決定要套用到 CSS 中的哪一個樣式。 ...

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

UX設計的改變就在這篇揭曉!一起來看看除了UI,UX可也會受很大影響的! 本篇為下篇，上篇「5G影響下的UI設計趨勢」請點此 連結 5G影響下的 UX 設計趨勢 1. 為「速度」而設計（Designing for speed） 如前所述，5G將在全球開始普及，數據傳輸速度大大加快的同時，也代表讀取時間大大減少，幾乎趨近於零。對 UX 設計來說這意味著一個新的標準，因為未來任何頁面、任何功能在任何時刻的延遲，用戶都不再接受。 有傳言在2020年，所有的iPhone都會支援5G，畢竟由奢入儉易、由儉入奢難，那時要用戶等待，哪怕只有一秒，實在是很困難呀！ 2. 讀取進度條將被淘汰（No more loaders） ▲ 5G影響下的UX設計趨勢:讀取進度條將被淘汰 當網頁在加載時，常常會看到一個讀取進度條、或是不斷轉動的小圓圈，用來告知使用者還需讀取多久的時間。 延續上一項，因為過去的數據傳輸速度有限，但5G將使這些讀取進度條消失，漸漸地，使用者會越來越不想再看到讀取進度了。 3. 產品負責人不勝枚舉（Product owner everywhere） 產品負責人（Product owner）是指公司裡負責將產品價值極大化，並負責管理產品代辦清單，對產品負有最終責任。通常只會有一位產品負責人。 現今的數位或電子商務公司，整個公司有多個產品負責人已不再是新鮮事：有APP程序負責人，後端產品負責人與SEO負責人等等。 2020年後，產品負責人從管理用戶需求、監督開發、確保測試改進到最終增加價值等，將在數位行業中廣泛使用。 UX稽核將成為趨勢（UX audit becoming a trend） UX Audit、 UX 稽核，通俗地講就是 UX 健康檢查，UX Audit的目的，是讓設計師找出其中使用者經驗還未臻完美的部分，提供改版時優化產品體驗的著眼點。 對快速發展的新創產品而言，很容易將不斷追加額外新功，但UX設計師的首要之務，其實就是要將一件事做到最好，且不斷精進最核心的使用者體驗，在未來這將更被重視。 從2019年開始， UI 與UX設計便是一種不能擋的趨勢，延續到2020年，依然會繼續升溫，並且5G世代會給它們更多發揮的舞台、依然有無限的發展可...

相信對UI.UX設計有些了解的人,都不敢輕忽5G對它們的影響!而今天分上下兩篇幫你整理好了! 2020 UI、UX設計關鍵影響：5G ▲ 5G 時代的即將來臨，所有產業都牽涉其中。 5G的出現，代表著我們將迎來嶄新的商業模式、掀起更大規模的產業變革，以及為其他未來科技開啟一扇大門，如：自駕車，5G將成為這項科技得以開花結果的最大助力，且幾乎任何你想的到的高科技產業都會受到衝擊！ 無疑問的，5G將會是2020年影響 UI 與 UX 設計潮流最大的因素，這也間接證實：「速度」將會是今年度的核心理念。 要了解大環境的因素，就讓我們來細看5G影響下的 UI 和 UX 領域的各別趨勢： 5G影響下的UI設計趨勢 1. 訂製圖像（Custom-made graphics） 但是如果沒有品牌圖像，也不需急著去購買五花八門的圖庫（stock photo）套用，取而代之的則是要設計獨特、屬於自身的且符合品牌形象的圖像在網站或產品上使用。 好的視覺設計可以為品牌價值錦上添花，能使產品與服務顯得更有說服力和平易近人，而企業logo或標誌設計是品牌形象的核心。 2. 動態圖像與動作特效（Motion graphics and motion effects） 過去由於4G的侷限，複雜的動態圖像與花俏的動作特效可能會拖慢網頁的讀取，甚至有的使用者根本無法讀取；但隨著5G的興起，這在2020年後將不再是問題，目前的設計思維也會大大改變，不用擔心因網速太慢讓你的巧思被埋沒！ 靜態圖像將會變成可以接受、但乏味無聊的，未來如果想奪得客戶注目，設計師需要更具創造性地對內容、字體與圖形等素材等進行動畫處理。 3.　使用對比度稍低的漸變色 （Use of less-contrasting gradient） 「漸變色」是近年的熱門配色。而在2020年，對比度較低的漸變色：如藍色到淺藍色、灰色到深灰色等，將流行於網頁整體配色，這樣的設計保持了乾淨簡約的主體，但又能保有變化而不枯燥。 本篇為上篇，下篇「5G影響下的UX設計趨勢」請點此 連結 延伸閱讀文章： 5G帶來時代變革,UI.UX設計也逃不出手掌心!(UX設計篇) UI設計基礎篇-五個關於黑色的...

本篇為福斯UI設計篇，關於Audi的UI設計，請點此  連結  以及 此連結 這篇除了提到福斯與UI設計的關係,還要告訴你,這品牌近期做了那些突破! 不落後於 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 的新品牌識別「acces...