網路 - Part 1247

2017-10-05

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

Post By admin 網路資訊

個人頭像的定義與發展

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

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

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

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

方形對角線較長

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

網動廣告科技

參考資料：https://www.mydesy.com/interface

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

2017-10-02

設計師必懂的趨勢，淺談扁平化設計優缺點與發展(下)

Post By admin 網路資訊

台北網站設計　網頁設計公司　網站設計公司

扁平化設計的前身

Microsoft 把這種介面稱為「Metro UI」(後來因為和德國零售業龍頭 Metro AG 有衝突而改名叫 Modern UI)，
之後便開始整合到公司旗下的產品，如 Xbox 360 和 Office 系列軟體，2012 年更是使用在 Windows 8 的動態磚上。

什麼嘛！上面講了這麼多，那到底是誰先開始用扁平化設計的？

沒錯，跟你想的不一樣，不是以設計聞名的 Apple 開始的，而是那個常常把事情搞砸的 Microsoft 。

在 2006 年為了和當時紅極一時的 iPod 競爭，Microsoft 推出了 Zune，不過當然不是 Apple Music+iTunes 的對手，Zune 自然就失敗了，但是 Zune 簡潔的介面搭配它的軟體顯得十分清新，也讓播放器和電腦上的軟體有一致的使用者體驗。

扁平化設計的應用

在 iPhone 推出後沒多久，Microsoft 在 2010 年也推出他的第一代智慧型手機 Windows Phone7，這可以說是扁平化設計第一次在資訊產品上向世人展現其樣貌，使用簡單的方格狀色塊與無襯線字體的介面，圖示也不在以擬真化呈現，去除細節與陰影。

結語

扁平化設計的成功並非一蹴可幾，而是經過擬真化的過程，人們對於認知學習已足夠看懂抽象圖示的功能，那麼，扁平化設計改變的只有資訊產業嗎? 絕對不僅於此。

除了上述提到的商標 Logo，扁平化設計也日益普及影響到其他的設計領域，特別是印刷產品的設計，如海報和書籍封面(畢竟原本瑞士設計就是用於此)，有愈來愈多旅遊手冊或產品說明書也開始採用人們逐漸習慣的扁平化設計。

網動廣告科技

參考資料：https://www.mydesy.com/flat-design-2

設計師必懂的趨勢，淺談扁平化設計優缺點與發展(下)

2017-10-02

設計師必懂的趨勢，淺談扁平化設計優缺點與發展(上)

Post By admin 網路資訊

網頁設計　網站設計　台北網頁設計

不論你從事平面設計、網頁設計、UI/UX 設計、前端設計…只要你是設計師，
你不可不知從 2013 年後火速竄起改變整個資訊產業使用者介面的「扁平化設計(flat design)」，
是如何撼動整個世界，甚至是改變你的工作型態與產業!

你有沒有發現，2013 年後許多網頁、APP、甚至系統介面，都開始改用色彩繽紛、簡約的風格，
就像把所有物件通通壓扁在畫面上，這就是火紅的扁平化設計(flat design)，新一代介面設計的趨勢。

不單單只是資訊產業，連許多知名廠商的 LOGO 也開始改頭換面採用扁平化的潮流，像是 Netflix、ebay、Spotify、Twitter、Audi、Citroën…等

網動廣告科技

參考資料：https://www.mydesy.com/flat-design

設計師必懂的趨勢，淺談扁平化設計優缺點與發展(上)

2017-09-29

【BLOGGER 技術】只用 CSS 做出美麗的漸層顏色效果

Post By admin 網路資訊

台北網站設計　網頁設計公司　網站設計公司

設計 UI 別再用繪圖軟體製作漸層效果圖片了! 現在用 CSS 就可以做到美麗的漸層效果，還可以幫你省下不少圖片檔案的容量，增加效能。

隨著後扁平化時代的 Material Design 崛起，單一色塊不能滿足外觀的需求，美麗的漸層效果也開始流行了起來，不過以前設計師只能用 Photoshop 等設計軟體來做出漸層圖片後再放到網頁上，這在行動裝置上就沒辦法達到響應式效果。

所以在 2013 年以後，主流的瀏覽器都都開始有支援 CSS 漸層語法，自此刻起，設計師便只要使用簡易的 Gradients 即可做出美麗的漸層效果，不再需要設計圖檔了。

不過值得注意的是，在一些小型的元件上盡量使用左右漸層，而不是上下漸層，因為不同螢幕大小的裝置原則上是寬度變化，若是使用上下漸層，會顯得十分擁擠，而左右漸層或斜角漸層則可以讓視覺延展出去。

CSS 程式碼

#grad {
  background: red;                    /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right, red, yellow);      /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, red, yellow);    /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, red , yellow);     /* Standard syntax */
}

要有漸層效果至少要 2 種顏色，一般來說 2 種的效果就夠了，基本語法就是 linear-gradient，其他的都是為一些特定舊版的瀏覽器設定的。

儘管網路上有許多 Gradient Generator，但是對於許多沒有美學概念的工程師、或是想省時間不想每次都自己配色的人來說，使用別人配好的漸層就會是最佳選擇。

更多詳情都在…

網動廣告科技

參考資料：https://www.mydesy.com/gradients

【BLOGGER 技術】只用 CSS 做出美麗的漸層顏色效果

2017-09-29

【BLOGGER 技術】滑動後浮動式固定選單，超簡單！

Post By admin 網路資訊

網頁設計　網站設計　台北網頁設計

1 分鐘快速學會滑動一段距離後讓上方選單固定在最上方！

自從 CSS 熟了後就發現 Blogger 的優勢，想怎麼改就怎麼改，這邊當作紀錄分享出來一些 Blogger 好用的技巧，之後再統整成一篇。

為什麼要用這個?

根據統計，使用者進入網站後最容易注意到的就是選單(navigation)，一個好的選單可以讓使用者找到他想要看的資訊，達到資訊提供媒介的效果。

讓選單固定在上方的效果對於行動裝置的 UX 十分重要，尤其是部落格文章通常都不會太短，它可以讓使用者不用在看完文章後想點其他連結時一直往上滑(當然可能有 95% 的人文章看完後就關掉網站了…)

而且要是看到什麼讓使用者有興趣的東西，他可以直接在選單上尋找，降低他的麻煩。

不過這個問題其實比較好的方法應該是用側欄選單，不過就算是側欄顯示還是得用固定在上方的效果。

Javascript 程式碼

<script type="text/javascript">
$(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 495)  {          /* 要滑動到選單的距離 */
       $('.dropdowns').addClass('navFixed');   /* 幫選單加上固定效果 */
    } else {
      $('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
    }
  });
});
</script>  

這段程式意思是當螢幕滑動超過 495px 的距離時，就幫 class 名稱有 dropdown 的元件再加上一個 navFixed 這個 class，而有 dropdown 的這個 class 的元件你必須先確認整個網頁上只有選單有，才不用怕抓錯元件(一般來說會用這個名稱命名的應該只有選單有)

至於 495px 是我這個部落格上方的空間距離，你可以依照自己的空間作調整。可以把它放在最下面結束標籤的上方統一管理，免得之後要找不知道放到哪，更多詳情都在…

網動廣告科技

參考資料：https://www.mydesy.com/blogger

【BLOGGER 技術】滑動後浮動式固定選單，超簡單！

2017-09-28

《通信網路》中華電看見商機，讓企業靠行動上網博行銷

Post By admin 網路資訊

台北網頁設計公司　台北網站建置　套版網頁設計

中華電(2412)瞄準網路時代發燒，相關行銷策略也隨之改變，中華電領先業界推出企業贊助行動上網服務，作為企業大幅增加行銷成效的另一種選擇，且瞄準不同企業類型，共有「集客行銷型」、「獎勵行銷型」以及「企業共享型」，讓企業依照自身的需求，選擇最適宜的方式，以達到最高的成效。

隨著行動網路蓬勃發展，網路用戶數逐年攀升，根據Google於2016年《消費者洞察報告》數據指出，台灣有96%的民眾天天上網，其中25至34歲的年輕族群，使用智慧型手機上網的比例高達近100%，消費者對於智慧型手機黏著度愈來愈高的情況下，如何讓客戶在使用行動上網時精準吸引他們的目光，儼然成為企業主重要的行銷課題之一，有鑑於此，中華電看見企業主的需求，領先業界推出企業贊助行動上網服務，作為企業可以大幅增加行銷成效的另一種選擇，藉由企業贊助行動上網服務，企業可設計多種創新的行銷活動，讓消費者獲取免費的行動上網量或不需自行支付行動上網費即可輕鬆無負擔的透過手機瀏覽企業行銷活動網頁或APP，大幅提升消費者參加企業行銷活動的意願，同時增加企業行銷平台的瀏覽人數及停留時間，藉此提高行銷成效，帶動品牌業績。

中華電企業贊助行動上網服務，提供企業創新、有力的行銷手法。在眾多成功的企業品牌案例中，知名遊戲大廠宇峻奧汀透過贊助玩家行動上網量，遊戲使用人數成長1.3倍，每日使用上網量增加7.3倍，大幅提高玩家使用人數與於遊戲APP的停留時間。知名女裝電商品牌OB嚴選整合服務與線上行銷活動，以支付消費者瀏覽OB嚴選網頁或APP的行動上網費的方式，使活動期間每日使用上網量翻倍成長，成功打造輕鬆無負擔的使用環境，有效提升消費者對品牌的黏著度。而全台最大原創內容影音平台酷瞧與中華電信企業贊助行動上網服務中FREE Data網站策略合作，中華電信客戶不需自行支付行動上網費用即可於FREE Data網站觀看酷瞧影片，有效提升中華電信客戶觀看意願並提高網站回訪率。熱門的手遊、電商或內容服務企業藉助中華電信企業贊助行動上網服務，提高消費者參與意願，行銷力道如虎添翼，讓企業行銷有更優質多元的選擇，並協助行銷人員業績輕鬆達標。

中華電信企業贊助行動上網提供三種服務應用類型，以滿足企業在行銷推廣與內部應用之需求，首先，「集客行銷型」由企業指定服務APP或網頁，消費者在使用該服務時產生的行動上網費用由企業支付，有效提高消費者使用意願、增加停留時間；再者，「獎勵行銷型」為消費者完成企業指定任務，如看廣告或填問卷，消費者即可獲得企業贈送的行動上網量，大幅提升消費者參與活動意願，提高活動成效，最後，則為「企業共享型」則由企業幫員工支付使用企業內部服務之行動上網費，可增加員工使用公司服務意願，提升內部工作效率、降低企業營運成本。中華電信透過貼近需求的多元服務方案選項，企業可更快速且準確地達到行銷目的，大幅提升品牌重要的績效指標。

網動廣告科技

參考資料：http://www.chinatimes.com/realtimenews/20170927001859-260410

《通信網路》中華電看見商機，讓企業靠行動上網博行銷

2017-09-27

宣告Mac內建瀏覽器死刑 Spotify 網頁播放器停止支援 Safari

Post By admin 網路資訊

網頁設計報價　網站設計　台北網頁設計

Spotify 應該是很多人每天都會用到的線上音樂平台，它有提供網頁播放器，這點可說非常貼心，不需安裝任何應用程式，直接打開瀏覽器就能聽。而以往市面上幾款知名的瀏覽器都能使用 Spotify 網頁播放器，但不知道為什麼，最近 Spotify 悄悄地移除 Safari 瀏覽器的支援性，變成只剩下 Chrome、Firefox、Edge 以及 Opera，這也等於告訴 Mac 用戶如果想要繼續用 Spotify 聽歌，請不要使用內建的瀏覽器，安裝其他第三方瀏覽器或是應用程式。

一個全球知名服務商，宣判某個知名系統的瀏覽器死刑，筆者至今想不起有沒有類似案例，真的非常少見，Spotify 這步棋可說走得非常驚險，因為它一定會影響一群愛用網頁播放器來聽歌的 macOS 用戶，而且可能還不少。為此，Spotify 至今尚未針對此事做說明，所以是因為什麼而導致不支援的原因，目前還不知道，但有網友說可能是 Spotify 使用的 Widevine DRM 保護外掛，跟 Safari 會有相容性的問題。

當然，這並不代表 Mac 用戶沒辦法再用 Spotify 聽歌，只是必須選擇安裝其他瀏覽器或改用應用程式。

另外如果官方確定只是技術問題的話，未來再度支援 Safari 的可能性也不是沒有。無論如何，如果你是這次事件受影響的用戶，只能先勉強一下，試試用其他方式來聽 Spotify 音樂。

官方瀏覽器支援說明頁面，現在只剩下Chrome 45+、Firefox 47+、Edge 14+ 與 Opera 32+，Safari 已完全消失：

而透過 Safari 登入 Spotify 網頁播放器後，上方也會出現 “此瀏覽器不支援，換一個瀏覽器或下載電腦版 Spoity App“ 的警訊：

網動廣告科技

參考資料：https://www.kocpc.com.tw/archives/163078

宣告Mac內建瀏覽器死刑 Spotify 網頁播放器停止支援 Safari

2017-09-27

Chrome 將在 2018 推出的新穩定版瀏覽器中開始禁止網頁影音 Autoplay 自動播放的動作

Post By admin 網路資訊

後台網頁設計　RWD網頁設計　網頁設計推薦

不知道從什麼時間開始，很多網頁都喜歡嵌入一些歌曲，其中以個人部落格最多。有時候在查個資料莫名就會出現音樂，然後打擾到想保持安靜思緒的自己，或是跟正在播放的音樂混在一起。Chrome 在這方面做了很多努力，包括讓玩家一個按鍵禁用聲音的設計，上個月更開始在測試中的 Chome 63 測試版加入讓使用者決定是否對特定網站完全靜音的設計，也就是禁止所謂的 Autoplay ，只是正式版還得等一段時間加入：

並不是每個人都喜歡看網頁聽到作者精心準備的 BGM ，有的人可能跟筆者一樣，有自己的歌單，上網時就打開來放歌。但很多網站的影片、音樂常常會隨著網頁被載入而突然自動播放，特別是影片有時會選用比較雄壯氣質的音樂時，往往會瞬間被音樂嚇到。通常我們可以利用一些網頁附加元件來防止這些自動播放。但 Chrome 已經發現到使用者們有這樣的需求，因此開始在目前的 Chrome 63 測試版加入關閉自動播放的功能。

這些功能目前得到 Chrome 正式版時才會問世，而 Chrome 63 的階段是以手動關閉某些特定網站自動播放的功能為主，但到了 2018 年推出的 Chrome 64 正式版時，目標是做到可以自動偵測並關閉音量的方式來減少這種瞬間被聲音驚嚇到的狀況

只是要做到可以自動偵測的程度，必須先深入了解消費者的喜好，換句話說就是監控每個使用者在使用瀏覽器時，如何面對自動播放媒體的資訊。說難聽一點就是，Chrome 必須透過背景蒐集這些個人習慣資訊，這些資訊被稱作 Media Engagement Index，縮寫為 MEI。每個人的 MEI 資訊會幫助 Google 判讀該關不該關的模式，因此到了 2018 年 Chrome 64 版登場時，瀏覽器能夠更智慧的關閉網站音樂，甚至關閉影片的音樂聲，讓使用者能有一個清新的上網體驗。

除了自動播放，相信大家也記得今年六月時，Chrome 正在修改自家的廣告攔截功能，加強攔截能力。如果把這項功能跟現在的防堵自動播放的內容來看，其實不難想到 Chrome 一方面要維護 Google 的廣告收入，一方面也需要了解使用者的喜好，並努力滿足，不管是廣告的跳出，還是突然而然的聲音，這些都可能是潛在的廣告內容。除了一個看起來很美好的理由以外，或許更多的是為自家的利益去考量

網動廣告科技

參考資料：https://www.kocpc.com.tw/archives/163815

Chrome 將在 2018 推出的新穩定版瀏覽器中開始禁止網頁影音 Autoplay 自動播放的動作

2017-09-27

用瀏覽器挖礦，擺脫網頁廣告的低收益，用CPU採礦換虛擬貨幣

Post By admin 網路資訊

網站建置　網站改版　客製化網頁設計

身為一個讀者，非常討厭瀏覽文章時被一堆廣告塞滿，一個不小心就誤點廣告，文章讀起來一頓一頓的，但身為一個部落客，不放廣告就只能吃土吃蚯蚓了，現在有了第三個方法可以選擇，就是用讀者的 CPU 幫作者的網站挖礦，畢竟閱讀部落格文章時 CPU 幾乎沒事可做，而且現在的 CPU 效能等級都高到有點過剩，不如反饋分享給網站經營者，讓網站可以永續經營

瀏覽器挖礦可賺到多少錢?

可以賺多少錢不確定，因為會有四個浮動的變數

門羅幣目前的市場行情價，用 2017 年 9 月份來計算，一個門羅幣可兌換台幣 2,700元左右，但是最近中國打壓比特幣，部分職業礦工轉移到香港，但也有部分礦工轉移挖其他虛擬貨幣，所以門羅幣的行情有可以能漲
美金的匯率，挖礦的虛擬貨幣都是以美金計價，若換回台幣就會有匯率的價差
門羅幣礦池的挖礦難度，如果目前礦工很多導致礦池的挖礦難度提高，Coin-hive 給予到報酬就會降低
網站的流量與停留時間，如果的網站流量大，每篇文章又是長篇，這樣的挖礦效益才會比較高一些

說明一下，瀏覽器挖礦本來就比挖礦軟體的效能還低，此外介介這次介紹的 Coinhive 挖礦工具，實際分得的礦數只有 70% 剩下的 30% 則歸 Coinhive 所有

雖然看起來沒什麼賺頭，但是在國外的社群討論中，有論壇的經營者安裝了瀏覽器挖礦，收益比放廣告還高，平均兩週就可以賺到 18萬台幣，更不用說直播或影音類型的網站，停留時間越長獲利越高

網動廣告科技

參考資料：https://www.kocpc.com.tw/archives/165178

用瀏覽器挖礦，擺脫網頁廣告的低收益，用CPU採礦換虛擬貨幣

2017-09-27

只有截圖是不夠的　Perma 幫你備份網頁的每一個瞬間

Post By admin 網路資訊

台北網站設計　網頁設計公司　網站設計公司

你會不會有要記錄網頁的時候呢？通常大部分的人大多都是選擇使用截圖的方式來記錄，但其實網路上有個網站他可以幫你備份網頁，你只要輸入網址貼上後，他就會幫你把網頁存在他們的資料庫中，隨時都可以調閱，而且跟截圖的方式不一樣，網頁上的 CSS 與特效都會記錄下來喔。這個網站的名稱就叫做 Perma 。

Perma 是一個專門「紀錄網頁」的網站服務，你只要到他那邊註冊會員、輸入網址後，就可以把網路上的網頁直接記錄一份在他們資料庫中，紀錄完之後有個專屬的網址可以隨時調閱出來，而且不同於截圖與 Google 庫存，使用 Perma 紀錄的最大好處，就是他可以完整保存網頁上的 CSS、特效與圖片，讓記錄下來的網頁看起來更加完整。

看到這個畫面時，就在上面輸入妳要記錄的網站，接著點選右邊的「Create Perma Link」，以下我們會以 Yahoo 首頁為範例。

網頁結構越複雜的話，轉換的時間就會越久，請耐心等候。

轉換成功後，你就可以拿到一組 Perma 專屬的網址（本次產生的是 https://perma.cc/2C3N-6KSE ）。

但必須要解釋一下，這邊能記錄的只有「公開的網頁」，如果是那種需要登入會員才能閱讀的（比如臉書頁面）這就沒有辦法紀錄。另外，網頁上如果有影片資料，通常也不會記錄下來。算是比較可惜的地方。

網動廣告科技

參考資料：https://www.kocpc.com.tw/archives/165393

只有截圖是不夠的　Perma 幫你備份網頁的每一個瞬間

個人頭像 的定義與發展

扁平化設計的前身

扁平化設計的應用

結語

為什麼要用這個?

Javascript 程式碼

瀏覽器挖礦可賺到多少錢?

個人頭像的定義與發展