顯示具有 網頁設計 標籤的文章。 顯示所有文章
顯示具有 網頁設計 標籤的文章。 顯示所有文章

2017年10月11日 星期三

2017 網頁設計師們青睞的3種設計趨勢 & 影片製作救星─MOTIONELEMENTS 免費影片素材

1、底部導航設計

在手機上底部導航是滿普及的設計,但是在網頁上就不算多見了。
雖然側邊欄和垂直導航基本上要脫離實驗性設計的身份了,
但是底部導航這種“反習慣”的設計,仍然算是激進的一種設計手法。

底部導航在網頁上是先鋒的設計,所以它不是兼容所有用戶的一種設計策略。
如果你做的是一個強調設計、受眾接受性較強的網站,可以嘗試接入這一設計趨勢。

如要使用底部導航加持設計,那麼你需要正確地使用它:

○ 保持簡約,在不用向下滾動的頁面上使用上佳,少數頁面使用為好
○ 設計的要醒目,不要讓用戶忽略它們
○ 如果頁面較長,使用懸浮固定的底部導航
○ 搭配極簡風格的設計框架,複雜的網頁設計會讓用戶忽略底部導航
○ 加入一些額外的元素來強化導航功能,確保用戶不會迷失




































2、Box元素

Box 是一種非常實用的頁面元素載體,在數字設計日趨多樣繁複的2017年,Box 元素簡直是設計師手裡的攻城利器。從功能上來說,它和 Material Design 中卡片的概念是高度相似的,但是它並沒有限制在這個風格當中。和卡片一樣,Box 元素可以承載各種各樣的內容,它非常符合今年設計師對於多樣性的需求。

當你開始使用 Box 元素的時候,應該注意下面的問題:

○ 使用 Box 來創建視覺焦點,比如下面的 Cedrick Lachot 這個網站
○ 使用 Box 將不同的元素分層,類似下面的 Feudi Di San Gregorio 這樣設計
○ 使用 Box 來強化流程和視覺。 Beoplay 的網站就使用堆疊的Box來創建視覺路徑,每個 Box     中承載不同的動畫,吸引用戶滾動瀏覽




















3、直線元素

雖然用戶並不一定會時刻注意到網頁背後的柵格系統,但是恰到好處的直線元素,絕對能夠強化整個網頁的設計感。

直線元素主要還是起到裝飾性的作用,和我們常見的圓形、矩形和橫線元素不同,直線元素其實出現的非常少,在很多時候能夠給整個設計一種有趣、別具一格的體驗。

直線元素無疑會讓網頁更加風格化,不過它的侵略性並不強,所以,它的應用範疇還是很廣的:

○ 可以嘗試使用較細的直線融入背景
○ 創建垂直豎線的圖像拼貼
○ 在主圖上使用直線元素創造視覺深度,強化層次
○ 使用直線穿過圖片上的視覺焦點
○ 使用分屏式的設計,創造出垂直分割的視覺體驗
○ 使用其他的小元素縱向排列,在背景中使用
○ 讓元素在縱向上堆疊,而不是常見的橫向排列





















-------------------------------------------------------------------------------------------------


MotionElements 除了有提供免費影片素材之外,也有提供免費音樂素材與 AE 模板,比較特別的地方是 MotionElements 的免費素材庫是每週更新的。對於製作商用影片需要影片、音樂素材、AE 模板又沒有預算的人來說,MotionElements 的免費影音素材庫是一個非常好的免費素材來源。


使用教學

STEP 1

開啟 MotionElements 網站後,點擊首頁右下方,大大的 FREE 紅色 Banner。













STEP 2

點擊該 banner 後,即會前往 MotionElements 免費影音素材庫,在大標題下方可以切換到不同的素材類型(音樂或 AE 模板),在該頁面即可瀏覽喜歡的素材,看到喜歡的便可以直接點進去下載。
















STEP 3

進到素材頁面後,點擊右側的下載按鈕,同時在下方也會標註該影片的格式、大小和來源,授權的部分請不用擔心,MotionElements 免費影音素材庫裡所提供的授權都是可商用,並可以不限次數的使用,也不用標示作者與來源,詳細使用說明可以前往他們的授權說明頁面。














STEP 4

點擊下載後,輸入希望收到檔案的 Email,再按下傳送,就可以免費收到心儀的素材囉!



2017年9月13日 星期三

為什麼介面設計中,使用者的個人頭像大多是圓形的?

越來越多的平台或 App 喜歡使用「圓形」作為使用者的「個人頭像」形狀。
是近期的設計風潮?還是大部分介面設計師的愛好?或有其他特別的原因呢?

「個人頭像」的定義與發展

隨著網路用戶族群快速增加,他們對於藉由平台與其他用戶互動的需求就越高,
也因此發展出許多可互動的平台類型,例如論壇、信箱、聊天室、部落格到社群等。
其中每個用戶都代表著一個獨特個體(無論是真實身份或虛擬角色),
這些個體會有相對應的資訊,以及代表個體的個人頭像。
而個人頭像通常是具個性化(用戶覺得能代表自我)的標誌,
大多以平面或 3D 圖像的方式呈現。

UI 上的個人頭像英文為 Profile Picture 或 Avatar ,
其中 Profile Picture 在字義上較容易理解,反倒是 Avatar,各位讀者可能會充滿問號,
因為大家對 Avatar 的印象應該都是阿凡達電影。
根據 techpedia 平台上的描述,Avatar 一詞出現於 1985 年,
由盧卡斯電影公司(Lucas Film)內發展線上角色扮演遊戲(Habitat)專案人員(Chip Morningstar & Joseph Romero)首先提出。
此詞源自於印度教對「聖人降臨(a descent of the Supreme Being)」的描述,
在英文裡有「化身 (incarnation)」或「代表(manifestation)」之義。


感受與認知

方形太無趣了。
大腦可較輕易的處理圓形內的訊息,減少認知的壓力。
相較於方形,圓形更柔性、有機、安全、順眼、現代與友善,也更能與他人情感交流。
更有關注的感覺,例如想到望遠鏡或放大鏡的視野。
大多照片的四周都是無意義的背景或訊息,圓形可以將其切除。
通常拍照會把「人」擺在中心,而圓形中心到四周距離都一致,可讓臉更突出。

視覺

視線在方形的焦點有 5 個(四個角 + 中心),而圓形只有一個(中心)。
圓潤的線條或角度,可讓視線自然的追隨與運動,不會像看到 90度角 而停頓下來。
在掃視的情況下,使用圓形可協助使用者辨識或區分是否為內容,
因為內容通常會置於用方型容器,例如文字、照片或專輯等。

其他

行動裝置普及後,因圓形與手指按壓在螢幕上的形狀類似,而被廣泛的使用。
其實人類早就有這樣的應用,例如將人物應用於圓形硬幣與圓形藝術畫中。
只是一個設計的風潮,剛好流行到”圓形”這個週期。
很多準則或模板都只提供圓形版本。
現在的 CSS3 技術讓圓角(圓形)輕易實現且各瀏覽器也幾乎都有支援。


作者 Anthony 於 UX movement 上提出了相關觀點

角度的邊緣,看起來較明顯

通常方形的銳利四角,因為對比(顏色或形狀)的關係,
在視覺上會更明顯,造成干擾。使用圓形並無此問題,所以更可強調重點 –「臉部」。


方形對角線較長

方形的對角線比邊緣還長,用戶目光易延伸出去;
圓形半徑長皆一致,用戶可花更少時間在理解內容,眼球也較不需要移動。


圓型用於非人物圖片,效果也是一樣的嗎?

雖然使用圓形的個人頭像可排除不相關的背景,更聚焦於人臉上,
但非人物的圖片(風景或食物等)也有同樣效果嗎?
Anthony 認為不一定,因為可能因此失去了該圖片要傳達的資訊,如景深或細節等。


上面已整理了許多專家的觀點,大部分是相當的認同的。
不過,也有一些觀點是以上未提到的,補充給大家做參考,如下:

較強的設計感

圓形的個人頭像,能讓介面傳遞較強的設計感。
不過這點會受設計師應用的手法,或使用者的主觀感受影響。
此外,平台無法限制使用者上傳圖片的品質,若上傳圖片的品質、構圖或美感較差,
將其套用在圓形的遮罩裡,介面的設計感會比方形的好。

高度親和力

就如同人與人的交際,在初次見面時,
會認為帶有嚴肅表情的人較難相處,而微笑滿面的人可馬上聊起來。
為什麼會有這種先入為主的觀念呢?這就是「親和力」高低層度的差異所致。
而曲線與圓在人們的印象中,就是親和力的象徵。
若介面上使用圓形的元素(個人頭像等),使用者可能會產生,
此產品學習曲線較低的印象。

雖然矩形可讓空間利用最佳化,但應用圓形又可多一點留白空間

若不考慮使用者體驗與美學,將不同的內容以方形排列,將最具有效能,
但這樣的產品絕對不會受到用戶歡迎的。
因此,設計師都應了解留白帶來的效益,
例如降低視覺負擔、增加閱讀性、區隔不同內容與更具美感等。
適當的留白對產品來說相當重要,同時也考驗設計師的基礎訓練是否扎實。
就個人圖像而言,同樣尺寸下,圓形又能比方形多一些留白空間(在四角處),
除了增加與其他內容的區隔性外,也能讓介面帶點趣味性。


使用圓形個人頭像的小撇步

css 怎麼做?該注意什麼?

只需要針對個人頭像的 HTML tag or class 寫一行 border-radius: 100%; 的 css 屬性就可以達到!


給予使用者上傳圖片的建議

不知道大家有沒有這樣的經驗,就是當你挑好圖片並上傳後,
發現圓形的形狀外框遮住了許多重點(例如臉的一角),效果不如預期。
其實,設計師可以在上傳圖片的介面上,提供給使用者一些建議。
例如,畫出一個人臉可在圓形裡完整呈現的區域,這樣使用者就會比對自己的圖片,
並挑選較符合者;或是提醒圖片上有字的話,建議的大小為何(可看的清楚);
提示不能使用非法圖片等。

提供多種預設圖片,及更完善的圖片編輯器

有些使用者手上剛好沒有適合的圖片,或認為不重要,可能就不會設定個人頭像了。
不過,平台若是希望呈現出多種角色互動的氛圍(如社群網站),
或有協作辨識的需求(如 trello)。
設計師可在設定流程的頁面上,
提供多種預設個人頭像供使用者快速選擇(如多款顏色或企業識別的變形應用),
或設計某種自動機制(如帳號的第一個字母)。
另外,利用第三方社群登入方式,也能自動載入在該平台上傳的頭像,
是個對使用者較便捷的方式。

再者,若能提供完善的圖片編輯器,
也能吸引使用者做出更符合自我形象與品質更好的頭像,
例如挑選濾鏡、色相與明度調整等。
不過,圖片編輯器的有無,應該要取決於平台服務的本質。

同尺寸下,圓形看起來比方形小

某一圓形的直徑與正方形的邊長一致,
若將兩者放在一起,視覺上會認為圓形的較小(如下圖左)。
如果排版有將兩者放在一起的需要,可將圓形放大一點,以達到視覺的平衡(如下圖右)。


使用 gif

有越來越多的平台允許使用者放上 Gif 檔作為個人頭像,
以呈現動態效果,這讓使用者更可彰顯其特色或品味。

2017年7月12日 星期三

多語系網頁在設計上該考慮什麼,才能有好的使用者體驗?

多語系 (國際化)網頁在設計時,往往因不理解該地區的文化或語言,而忽視了許多小細節,累積起來就會造成諸多問題,例如:降低轉換率、無法完全地傳遞產品價值理念、降低使用者的信賴 … 等。作者 John Saito 以他在 Dropbox 工作的經驗,提供許多設計的小技巧給讀者,希望能解決在設計多語系產品的相關問題,期待能讓產品的體驗更好。

試著想像你正在試用一款新 app,這 app 在 twitter 上受眾多人推薦、分享 … 說它很棒、生活因此改變了 … 等。這 app UI 如下圖,仔細看看是不是有些地方令你感到怪怪的?介面上方有段影片,但影片上的標題文字你卻看不懂;介面上的用字有些奇怪,按鈕上的文字也跑版、破格。如此的 UI 呈現品質,你還會信任這產品嗎?

當然,這可以被解釋為此 app 不是針對你所在的地區語言所設計(也許是精靈語 XD~),所以這些開發者、設計師並不曉得翻譯成各國家的語言後會變成怎樣。無論你信不信,這確實是非英文系國家使用者常會遇到的問題!因為許多 app 僅針對英文語系來設計,而忽略了一些翻譯後的設計細節。
UI 多語系
。。。
為了避免類似上述的問題,底下提供了一些在設計 多語系(或國際化)產品時該注意的設計技巧:

1. 預留切換 多語系 的文字空間

多語系 產品最常遇到的問題就是在介面上沒有預留足夠的空間,來解決不同語言在翻譯時所造成的文字長度差異。例如 " New! " 這個字詞包含了四個字元,但翻譯成法語後,就會變成9個字元(Nouveau !),超過英文的兩倍。
因此若設計的介面上包含了文字的排版,請確認是否保留了足夠的空間。如果沒有,在轉換成它國語系時,就可能會發生文字重疊或切斷的跑版問題。
internationalization UI / 多語系 UI 設計
咦?是不是覺得空間有點窄?
我們不可能懂世界上所有的語言,但我們可以借助工具來預測各種語言的長度,如 Google 試算表 搭配 GOOGLETRANSLATE 的功能,可同時轉譯多種語言。雖然不一定是正確的用法,但可快速概略地瞭解不同語言文字的長度。
internationalization 文字長度
這是我透過 google 試算表所做的 “預估” 文字長度之工具
IBM’s globalization 網站中有個非常有用的表格,上方告知若要將英文翻譯成其他語言,需要的空間大概是多少。
internationalization_04

2. 避免將文字排列在狹小的直欄(columns)中

透過直欄 (Column)編排內容是個不錯的方式,它讓內容具平衡、結構性與協調的特性,並且能與你精心配置的網格系統良好搭配。但當文案長度無法被預期時會發生什麼事?這是多語系產品在翻譯時經常會遇到的!原先一行的標題可能會變成二或三行,因而破壞了你精心設計的排版平衡。
internationalization_05
當你把文字放於較窄的直欄(column)中,就有很高的機率讓翻譯後的文字超過預設欄寬範圍而形成多行。所以較安全的作法是以較寬的橫列(row)來取代較窄的直欄(column),這樣就能有更多的彈性空間,而不會破壞了原先的排版。

3. 別在圖片中放文字

如果圖片中包含文字,又必須要有多語系的版本,這對設計師來說簡直是個惡夢。雖然設計師可修改 Photoshop 或 Sketch 檔案中的文字圖層,但你必須每種語系都進行調整以適應各種長度的文字而造成排版上的混亂。
以下有兩個較好的解決方式:
  • 使用線條取代文字:當不一定要使用文字才能傳遞資訊時,可以使用不同粗細、顏色的線條來呈現。
internationalization_06
  • 直接使用前端語言:如下圖,綠色圓形上的文字並不屬於圖片的一部分,而是用網頁前端語言刻出來的(因此切換語系時即能自動翻譯,而不需要為了多語系而製作很多張圖)。
internationalization_07

4. 不要在句子中擺放 UI 元件

對設計師來說,不斷調整 UI 元件的排版來確認哪個是最好的方案,是件再正常不過的事情。但其中若包含了文字時,你就要特別的注意。例如:包含文字的按鈕、checkbox 或下拉選單安排於句子中,就可能會造成許多問題。
internationalization_08
為什麼這樣做對多語系設計會造成困擾?
  • 排列文法不同:不同語言因文法不同,排列也會有所差異。譬如將 “Buy 3 shirts” 翻譯成日文,“Buy” 會移到句子的最後。如果你所擺放的 UI 元件在句子中順序是無法被改變,那則無法順利地適應不同語系的句子。
  • 複數:對英文來說,會有單數與複數的兩種名詞表達方式,如:1 picture” 與 “__ pictures” 。但在俄語中,有三種表達方式。所以如果使用者在句子中輸入數量,句子就需要跟著改變,否則文法就會有誤。
  • 詞性:有些語言對名詞與形容詞有特別的用法。在法語中,“ large ” 會視所描述的東西尺寸,而使用 grand、 grande、grands 或 grandes 等不同字。如果你在句子中擺放一個下拉式按鈕,可能在翻譯後就會造成文法上的錯誤。
那該怎麼做呢?比較好的作法是讓這些元件獨立存在,譬如放在後面(下圖)。
internationalization_09

5. 同一件事有不同的文化隱喻

在產品設計中,我們常使用真實世界的隱喻於 icon、按鈕與互動方式上。例如,Dropbox icon 即使用了置物箱的隱喻; " 點擊並拖拉 " 的互動方式取自手拿物體的隱喻。
但有些東西對不同文化的人會有相異的隱喻,例如在美國,貓頭鷹代表智慧,但在芬蘭或印度,牠代表了愚蠢。此外,某些物體對不同文化的認知也不盡相同。美國人對郵箱的印象如下圖,但其他國家的郵箱就不一定長成這樣,像是大多數國家並不會把旗幟插於郵箱上。此時,隱喻便不管用了。
internationalization_10
在開始設計前,最好針對你所想使用的隱喻做些研究。在 Dropbox 裡,當我們對於將推出的多語系設計(icon 、插畫)有文化認知上的疑慮時,通常會詢問 “解決國際化問題" 的團隊(Internationalization team)是否能有效的認知這些設計背後的資訊。

6. 使用能描述功能的詞彙

就行銷的觀點,他們喜歡針對某些功能發明有趣的名稱,來吸引目光。但有趣的名字往往難以翻譯成不同語言,甚至在其他語言中不帶有意義。幾年前,Dropbox 推出了無限版本控管的功能,最初命名為 “Packrat” 。
internationalization_11
也許 “Packrat” 對美國人來說挺有趣的,但對其他語言來說卻沒有任何意思,尤其左側的老鼠 icon(上圖),更讓人困惑。發現問題後,我們改為 “Extended version history” ,很直接也更好翻譯。
為了避免翻譯造成的問題,使用描述性的文字作為功能名稱的風險較小,雖然這樣可能較無聊,但更易於翻譯且使用性也較高。

7. 多準備一份翻譯版

一般來說,當你所撰寫的文案必須全部被翻譯成多語系時,用字風格最好是精準、原始不誇張且自然的。然而總會有些情境 ,你想特別突顯品牌特性而使用一些有趣、好玩的用字。此時,我們就會同時出兩種多語系版本:一個為在地化語系版;另一個則是翻譯版。
如果遇到較特殊且不易翻譯的字彙,你可增加註解,讓翻譯者參考。舉個例子,最近我們為 Dropbox 的貼圖建立文字標籤,我們打算給下圖的文字標籤為 “OMG cat”,同時在下方註解:也可用 “Surprised cat” 來翻譯。翻譯者就更有彈性且也能兼顧用字的特性。
internationalization_12
本文章已獲得作者授權,翻譯自:Design for internationalizationa by John Saito,原文出處 medium

2017年4月13日 星期四

使用 Veiwport 設定手機網頁的螢幕解析度

都是20px,顯示出來的文字大小卻不一樣的情況示意圖:


   






------

解決方法:

由於智慧型手機是屬於超小型的螢幕,如何在這麼小的螢幕之內調整適合使用者的閱讀解析度,為此 W3C 在 HTML 制定了給手機網頁 Mobile Web 使用的 Viewport 螢幕解析度設定的語法 ,寫法如下。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>


以 iPhone 手機為例,開啟 Safari 瀏覽網頁時,他的 Safari 瀏覽器的螢幕初始寬度設定是 980px , 在小小的 3.5 吋螢幕中要呈現出 980px 的網頁,實在是太小了,使用者跟本就無法舒適地閱讀這麼小的文字….如下圖所示。
沒有設定 viewport 時

當這個網頁是要設計成手機版的網頁時,我們就要在網頁的 HTML 之內寫上 viewport 語法,調整手機瀏覽器的螢幕解析度,才能讓使用者得到較舒適的閱讀狀態,如下圖 HTML 語法中的第 6 行。
viewport 語法
在網頁裡面寫好 viewport 語法之後,再一次使用手機打開這個網頁來看看,果然,螢幕解析度呈現最佳閱讀的狀態,文字大小適中,看起來真的就舒服多了,如下圖所示。
有設定 viewport 之後

Viewport 屬性說明:

width=device-width
有些教學文章上面會寫成 width=320 就是將手機瀏覽器的螢幕解析度設定為 320px,這個大小在 iPhone 就是 他的 viewport 預設值,所以在 iPhone 上面看起來就是剛剛好的,但是,這 2 年來手機螢幕越做越大,有些手機螢幕做到 4 吋以上,甚至有些還做到 5 吋以上,手機螢幕變大了,他們的 viewport 預設值也就會大於 320px ,由於手機的品牌太多了,我們的網頁沒辦法為每一台手機都設定成不同的 viewport ,因此,我們就只要設定為 width=device-width 就可以自動符合所有不同手機螢幕他們自己的預設最佳解析度。
initial-scale=1
設定手機螢幕畫面的初始縮放比例為 100%。

Viewport 其他屬性
width設定畫面寬度
height設定畫面高度
initial-scale設定畫面的初始縮放比例
minimum-scale設定畫面的最小縮放比例
maximum-scale設定畫面的最大縮放比例
user-scalable設定是否允許使用者改變縮放比例

通常,在大部份的情況,只要設定 width=device-width, initial-scale=1.0 這兩個就可以了,其他幾個屬性比較少會被用到。




文章出處:http://www.flycan.com/article/mobile-web/meta-veiwport-1316.html 飛肯設計

2017年4月12日 星期三

2017年網頁設計趨勢&SVG檔案格式介紹

原始網頁內容













 SVG檔案格式優點


網頁設計上採用SVG圖片的優點:
  1. 可解決網站logo或icon在行動版網站圖片模糊的問題
  2. 不會因為圖片放大縮小而失真,可運用於RWD響應式網頁背景圖
  3. 製作方便,可用Illustrator繪製圖檔後,直接轉存成svg檔

AI製作SVG檔案