PIXNET Logo登入

布萊恩的創業小窩的部落格

跳到主文

歡迎光臨布萊恩的創業小窩在痞客邦的小天地

部落格全站分類:職場甘苦

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 1月 14 週二 202020:20
  • SEO優化技巧就看這(1):網頁標題的眉眉角角

SEO優化技巧就看這(1):網頁標題的眉眉角角

 
 
網頁標題在SEO中根本靈魂角色!要如何設定?看完篇就知道訣竅啦!
 
Page Title SEO:小小改變,就能讓名次改頭換面!
Page Title 對 SEO 優化來說,可說是最基要的第一步!
雖然大多數人在瀏覽網頁時,很少看標題。但是標題對於 SEO 來說,卻是十分重要的元素之一!
 
Page Title 的用處
1. 告訴 Google 搜尋引擎你的網頁的重點為何並取得排名
2. 提升搜尋結果的點擊率
由以上第一點來看,你的主要目標關鍵字,必須要放在 Title 中,且要放在偏前方的位置。
例如把目標關鍵字放在公司名稱前方。有些商家把自己公司的名稱放目標關鍵字的前面,可說是不利於 SEO 的。另外,不同的頁面必須要有不同的 Title,才能不會被 Google 誤判為重複的網頁。像是有些公司就忽略了修改 Title,而讓每頁的 Title 都相同,例如「Home」、「XX股份有限公司」等等,忽略了 Title 的重要性等於浪費了取得 Google 排名的大好機會!
關於以上第二點,因為你所設的 Page Title 名稱會顯示在搜尋結果頁面上,所以名稱除了要自帶目標關鍵字給 Google 的機器人「看」之外,還要給真人使用者看。
因此, Page Title 越吸引人點閱,越能增加點擊率(CTR),進而對網站排名有正面的影響。
雖然網站的點擊率(CTR)不是決定排名的唯一依據,但是對於網站的排名有一定的影響。所以一個吸引人的、夾帶關鍵字於適當地方的 Page Title,最後會提升該網站在搜尋引擎的排名。
檢查一下,你網站每一個網頁的標題,尤其是前半部分,是否頁頁不同且夾帶目標關鍵字呢?若以上都符合,想像一下,若是你在搜尋結果上看到了這一頁的 Page Title,是否有點進來的衝動?
 
範例
目標關鍵字:台北貓咪認養
<title>台北貓咪認養-米克斯貓,親人街貓,流浪貓免費愛心認養|達內貓中途</title>
▲網頁標題 (Page Title) 以及 Meta Description 是最先在 Google 搜訓結果頁(SERP)上看到的項目
 
H1 的 SEO 優化:寫出好的 Header
如同大家看報紙時,會先看到每則新聞的標題;在網頁中,每個網頁的主題就是 Header。而 Header 使用 HTML 代碼的時候,就是會使用到 H1 標籤 - 意思就是說:你應該要把該頁最重要的訊息,都簡明扼要的放在 H1 標籤裡面(理想長度為 30 全形字以內)!
然而不少的 SEO 優化師在優化網頁時,常常不小心忽略了 H1 的優化。
H1 的優化,包含以下三個要點:
1. 確保每一個網頁的 H1 標籤中有你希望他人搜尋到的關鍵字、希望他人看到的標題文字
2. 關鍵字盡可能放在 Header 的前半部分
3. 保持文字長度在 30 個全形字以內
 
 
相關閱讀推薦:

SEO優化技巧就看這(2):網域名稱怎麼選?

SEO優化技巧就看這(3):長尾關鍵字提高轉化率


想要讓網站國際化又專業,這五大SEO重點怎能錯過!


前端工程師非RWD不可?AWD要怎麼做才能無痛SEO?


網路行銷課程-SEO優化特別篇(上):擴大關鍵字的同時也在擴大你的客群!!

還不想讓自己的網站公諸於世?SEO優化員的煩惱我們都聽到了!




達內時代科技教育集團簡介
2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(9)

  • 個人分類:網路行銷課程.SEO優化
▲top
  • 1月 13 週一 202019:21
  • 人工智慧和KKBOX要合作了!來看看會對音樂產業會有什麼變化!

人工智慧和KKBOX要合作了!來看看會對音樂產業會有什麼變化!

人工智慧和KKBOX,這兩個意想不到的搭檔組合,即將要跌破你的眼鏡!
 
台灣微軟在 2019 年底投出一顆重磅彈:未來將攜手 KKBOX 集團制定 AI 戰略,並以人工智慧進攻全球市場!
KKBOX Group 作為亞洲龍頭媒體集團,旗下有提供全方位娛樂生活的 KKBOX、主攻影音串流技術的 KKStream,而未來音樂串流服務移將轉至微軟的雲端平台「Azure」、加入微軟全球合作夥伴生態系。
雙方除了研發出人工智慧技術,讓 AI 成為音樂詞曲創作小幫手之外,更重要的是能讓 AI 預測出下一個爆紅的藝人與歌曲!
KKBOX Group 與微軟這次的合作,為數位娛樂產業與 AI 技術的結合開創出了新可能!
 
1. 一起上雲端!KKBOX 搬家到 Azure 平台
兩方的第一步合作,就是將 KKBOX 的串流音樂服務將全面搬上微軟雲端平台「Azure」。
使用 Azure 不只可以全面整合遍布全球 55 個區域的資料,還有最高規格資安防護,確保企業與一般用戶的個資都有隱私保障;搭配覆蓋率極高的優點,除了讓 KKBOX 能迅捷地推出創新服務、接軌國際市場外,還有助於內部開發的加速,方便資源調度也更具有彈性,以持續創新更多元的服務。
 
2. 不只壓縮影片 還能增強畫質 - 影音串流技術 BlendVision
「BlendVision」是 KKStream 推出的 SaaS 服務,可以降低影片傳輸頻寬、增強視覺表現,壓縮又強化,圓滿了這個看似兩難全的問題。
而能達成這個成就,主要是有兩大 AI 技術:「按主題編碼技術」(Per-Title Encoding,PTE)與「感知串流引擎」(Perceptual Streaming Engine,PSE)。利用 AI 自動辨別不同位元速率(Bitrate)的影片後,進行壓縮轉檔,可以降低 80% 傳輸的成本,能以低流量享受高影像品質。
 
3. 名師出高徒?林夕親自訓練作曲 AI!
另一項創新技術,則訓練 AI ,將它訓練成作詞、編曲助理的 AI「音樂創作系統」(AI Assisted Music Creation),創作者編寫完將一段作品後導入 AI,AI 就會自動編曲,只要使用者輸入一段簡單的旋律,系統就能產生出風格、節奏相符的曲子,再交給使用者微調、修改,期望幫助創作者推出更多好作品。
KKBOX 執行長林冠羣也提到,下一步會與華語音樂界的「詞神」林夕合作,以林夕多年來累積的 4000 多首作品作為 AI 的最佳教科書、學習這些膾炙人口、家喻戶曉的歌曲是如何打動人心的。而林夕也將作為第一位 AI 訓練導師,跟 AI 一起創作寫詞。林夕手把手教導出來的 AI,其成果想必大家都是很期待的吧!
 
4. 哪些歌會紅?鐵嘴 AI 預測市場「全新音樂型態」
KKBOX 與微軟推出的新 AI 技術中,其中最受矚目的,大概就是「AI 神預測爆紅歌曲」了!用 KKBOX 的大量數據,預測歌曲趨勢的「熱門歌曲預測系統」(Hit song Prediction)。林冠羣比喻這就像替歌曲「算命」。
一首歌推出三天,就能預測六個月後的表現,且準確率頗高,可用來建議唱片公司或歌手,應如何調整歌曲或風格。
臺灣微軟合作夥伴暨商務事業群總經理林劍福補充,這套預測系統是以 KKBOX 資料為主,再利用微軟認知服務來訓練模型。目前,KKBOX 部分資料仍在進行搬遷,未來完全搬至 Azure 資料湖後,模型預測就將會更精準啦!
數位娛樂產業正面臨兩個轉型關鍵:「運用科技讓內容更快速更順暢傳遞給用戶、數據驅動創造出更優質或個人化的服務」。而 AI 人工智慧 將成為這波轉型中最重要的推進力。
KKBOX 與微軟努力以科技與技術,解決音樂娛樂產業問題,如「熱門歌曲預測」的建立雖然得益於 KKBOX 多年累積下的大量音樂聆聽數據,但更重要的是有微軟的AI技術支援。
KKBOX 將突破困境的方法委以 AI 人工智慧,在與微軟共同協作之下激發出許多解決產業問題的方法。其實這也是現在所有產業面臨的共同景象──在任何產業裡想有競爭力,AI 技術都是最需具備的!
 
 
相關閱讀推薦:

全靠這人工智慧!搞定垃圾分類只要三秒啊!!


真人冒充人工智慧,騙了九億融資才被拆穿!?(上)

一起來玩google新的人工智慧辨識功能!看看你的圖片能不能考倒它!

驚!人工智慧靠著幾個字,就能產生一篇超逼真的假新聞!?


美國將開發AI軍用武器!人工智慧會成為人類救星還是殺人機器?(下)

不確定觀眾喜歡什麼嗎?交給人工智慧準沒錯!!

程式課程選達內,美上市IT課程教育集團
2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(71)

  • 個人分類:IT人的數位生活
▲top
  • 1月 09 週四 202022:42
  • JavaScript成功入門就看這!(16)訊息框

JavaScript成功入門就看這!(16)訊息框

 
JavaScript裡頭的訊息框分成哪幾種?每一種的功能又是什麼?今天總算講到這啦~
JavaScript 提供三種訊息框:alert、confirm、prompt,介紹如下:
Alert警告提示框
當要確保信息傳遞給用戶時,就可以使用 Alert 警告提示框。JavaScript 的訊息框提供了一個「確定」按鈕,讓使用者關閉該訊息框後才可以繼續進行操作。
Alert 警告提示框採用單個參數,即彈出框中顯示的文字,請看以下例子:
alert("Do you really want to leave this page?");
prompt提示訊息框
JavaScript 的 prompt 提示訊息框用於讓用戶在進入頁面之前,必須先輸入訊息。
當 prompt 提示訊息框跳出時,用戶在輸入訊息後必須點擊「確定」或「取消」才能繼續。
如果用戶點擊「確定」,該框將顯示使用者輸入的訊息如果用戶單擊「取消」,則顯示「null」
如下面的例子,當使用者進入網頁時,網頁就會跳出一個 prompt 提示訊息框,訊息框上顯示「你今年幾歲?」,然後讓使用者輸入數字。若使用者輸入歲數並且按下「確定」後,訊息框將會顯示「你今年_歲」;若使用者沒有輸入訊息或是按「取消」,則顯示「你今年null歲」。
// result = prompt(確認訊息框顯示問題);
let age = prompt('你今年幾算?');
alert(`你今年 ${age} 歲!`); // 你今年_歲!
confirm確認訊息框
JavaScript 的 confirm 確認訊息框通常用於讓用戶驗證或接受某些內容。
彈出confirm確認訊息框時,用戶必須點擊「確定」或「取消」才能繼續。
如果用戶單擊「確定」,則該框將回傳 true。如果 用戶單擊「取消」,則該框將回傳 false。
如下例子:
當使用者進入網頁時,網頁就會跳出一個 confirm 確認訊息框,訊息框上顯示「請問你確定要離開此頁嗎?」,接著讓使用者選擇輸入「確定」或「取消」。
若使用者輸入「確定」後,訊息框將會顯示「感謝您的造訪,再見!」
若使用者沒有輸入訊息或是按「取消」,頁面則會顯示「感謝您選擇繼續瀏覽我們的網頁!」。
var result = confirm("請問你確定要離開此頁嗎?");
if (result == true) {
alert("感謝您的造訪,再見!");
}
else {
alert("感謝您選擇繼續瀏覽我們的網頁!");
}
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(782)

  • 個人分類:各式程式語言讓你挑!
▲top
  • 1月 08 週三 202013:59
  • 即將因5G而有重大變革?--UX設計篇

即將因5G而有重大變革?--UX設計篇

今天緊接著讓我們來了解UX!藉著5G發展,除了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世代會給它們更多發揮的舞台、依然有無限的發展可能!
 
相關閱讀推薦:

即將因5G而有重大變革?--UI設計篇


想做出好用的App和手機網站,來上UI課程就對了



現下最夯的設計師-UI/UX設計師, 年賺250萬台幣!

想要網路行銷之前,UI課程是必修課之一!

前端工程師和網頁設計師必學-了解整體網站的規劃流程


網頁設計課程不可缺少的環節學了嗎?如何使用AWD來做好SEO?

Java課程、UI課程、程式課程、網路行銷課程推薦


2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

44歲媽咪順利轉職網頁設計師, 家庭事業都得意




零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(23)

  • 個人分類:UI.UX設計五四三
▲top
  • 1月 07 週二 202013:10
  • 即將因5G而有重大變革?--UI設計篇

即將因5G而有重大變革?--UI設計篇

 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(27)

  • 個人分類:UI.UX設計五四三
▲top
  • 1月 06 週一 202016:11
  • 未來挑選職業,只有人工智慧獨占鰲頭?錯!告訴你其他搶手職業!

未來挑選職業,只有人工智慧獨占鰲頭?錯!告訴你其他搶手職業!

和人工智慧相關的工作,當然是將來大家職涯的好選擇之一,但今天要告訴你其他在未來也會超搶手的職業!
 
回顧 2019,5G 通訊技術的普及,和 AI 人工智慧在越來越多的智慧物聯網(Smart IoT)裝置的應用,讓消費者們普遍對這些技術走入自己家中懷抱熱情,看看智慧音箱、恆溫器、家用監視器和吸塵器等智慧家電的高額銷量就可證明。
報告中提到:「當我們要求受訪者說出一個改變他們在 2019 年對科技的看法時,最常見的答案就是 5G 基礎建設的來臨。」同時 5G 也是科技新聞中最吸引普羅大眾關注的頭條。
而過了對科技信心大幅提升的2019,消費者已經準備好享受這些技術在 2020 年帶來的好處,也期望基礎建設、醫療、以及汽車領域能夠更加智慧化──這意味著高科技產業在明年走勢依然強健,相關職缺也是相當熱門喔!
 
Arm 解密! 2020 將最受歡迎職業是…?
Arm詢問了受訪者「最希望家人從事的職業?」,其中AI和機器學習(ML)專家最受到歡迎,有高達44%的回答都是相關職業。而其中有 90% 的受訪者認為從事挖掘比特幣的工作──也就是比特幣礦工,根本不能算一份工作。
統整「2020 最受歡迎職業」如下:
 
1. 人工智慧 AI 與機器學習 ML
▲ 人工智慧(AI)、機器學習(ML)以及深度學習的定義
 
屬於這個類別的職業範圍相當多樣,但大抵上都與 Python 編程、開發前瞻機器學習(Machine Learning)、深度學習(Deep Learning)和圖像識別算法有關,演算法開發工程師、軟體設計工程師、韌體設計工程師等等都屬於這個類別。
在近年已不只有科技業會運用人工智慧技術,各行各業都在導入 AI 來增進服務。闢如有零售商使用 AI 為客戶量身打造客戶體驗,店內採用物聯網技術,將所蒐集的客戶資料整合,結合客戶線上、線下、手機 app、及客戶服務中心資料,量身打造優質購物體驗的同時也增加客戶滿意度。
人工智慧還有大片值得開拓的前景,薪資待遇也普遍十分優渥,在2020年,和AI相關的職業將會受大眾歡迎也是可預見的!
 
- IBM 背書!入行 AI 人工智慧必學 Python 的 8 大理由
- AI 人工智慧將如何衝擊你的未來?還是學好 Python 吧!
- 阿嬤也能 coding 了?2020 人工智慧想對我們做什麼?
 
2.數據科學家 (Data Scientist)
▲ 數據科學家、數據分析師,差別哪?($120,000 vs $70,000?)
 
2019 年 8 月,美國提供招聘服務的人力資源公司-Robert Half,調查舊金山灣區千名從事科技業的受訪者,統整出一份最新的科技業薪酬報告,報告中,顯示了在數據和資料庫管理領域中,數據科學家擁有最高的平均薪水。
而在 2020 年,物聯網上的數據如何透過 AI 技術商業化、轉化為實際產值,將會更受到重視,重要程度也將更彰顯。
預測超過半數的物聯網公司都打算採用 AI 技術蒐集分析即時數據,來促進其業務的成長。
大數據與 AI 人工智慧可謂相輔相成、各蒙其利,在商業 AI 擴張發展的同時,對數據分析的需求也會增加。2020年,會有更多的企業利用大量數據集分析業務、並制定商業策略。
 
3. 智慧城市(Smart City)設計師
▲ 智慧城市的想法聽起來很吸引人:地下自動花園,遙控路燈,更好的空氣。但是如何實現智慧城市?智慧城市中收集到的數據會如何處理?
 
智慧城市,是導入各種科技技術、優化都市的組成系統和服務,以最佳化的都市管理和服務改善居民的生活品質,例如:臺北市道管中心導入智能科技,應用 3D 圖資平台、雲端服務、IoT 物聯網、AI 自動化處理及大數據分析等技術,有效管理道路施工,提升行政效率,且減輕人力負擔。
而日本汽車業龍頭豐田汽車更是宣布,將在日本靜岡縣裾野市興建智慧城市「Woven City」。計劃該城市將導入 CASE(Connected 聯網、Autonomous 自動駕駛、Shared&Services 共享&服務和 Electric 電動化)、交通行動服務(MaaS)、人工智慧(AI)、機器人等新技術的全面智慧化城市,最快 2020 年底、2021 年初開始動工。
2020 年,智慧城市將會有長足的發展,更有許多具體計劃進入實踐階段,想當然爾,對於智慧城市設計師的需求將大量增加。
 
4. 虛擬實境 VR / 擴增實境 AR
▲ 虛擬實境(VR)、擴增實境(AR),這兩種科技很相似,但是卻是完全不同的技術。看這部影片一次搞懂
 
2020 年 5G 進入大規模商用階段,高速與低延遲的特性,正好可以解決過去因為網路速度造成用戶體驗差的致命缺點,將帶動新一輪 VR/AR 的熱潮:
Facebook 將入資開發頭戴 VR 設備、跨國大企業部署 AR 應用,配合 5G 可以更好地交互遠端資訊、有超過 30% 的展示場地將會提供 VR/AR 設備和服務等, 同時 AI 和 VR 的普及將大幅削減大學費用,未來大學將成為社會交流和生活體驗的中心,而不是主要負責傳授知識的機構。
在這股潮流之下,能了解消費者對產品的期待、能創新 VR/AR/MR 體驗的 VR/AR 開發工程師是目前最受歡迎的熱門職缺之一。
Unity 是全球應用最廣的 VR 開發平台,91% 以上的 HoloLens(微軟的混合實境頭戴顯示器) 應用均使用 Unity 製作。無論是 VR、AR 或 MR,都可以藉著 Unity 高度優化的繪圖管線(Graphics pipeline,亦稱繪圖管線是電腦圖形系統將 3D 模型轉換成 2D 螢幕上的過程)以及其編輯器快速升級的能力,創造出更棒的 VR/AR 體驗。
 
5. 無人車/自動車調度
▲ 無人自駕車版的 F1 賽車「Roborace」,每個車隊都有專屬的程式設計師,負責控制這些自駕車的自駕程式以及定義演算法。
拜 5G 之賜,車商得以開闢出新藍海,過去只存與想像中無人車輛在道路上行駛的情節,在 2020 將正式化為現實。Nissan 在美國加州的活動正式宣告:「將在2020年之際帶來無人駕駛的全自動車款。」
透過 5G 的高頻寬、低延遲、大容量資料傳輸特性,能夠讓汽車間互相知道對方、且感測道路,甚至共用其他汽車的資料與數據,駕駛體驗更加安全。5G 除了能增進自動駕駛安全之外,額外功能包括詳細即時的地圖數據、軟體和韌體更新以及多媒體串流等。
自動車的產業鏈完整,車輛組件、車用電子、半導體及資通訊軟硬體等廠商一脈串起,整個相關產業將得益於網路建設發展而得以發光發熱。
謀職除了不斷精進自我之外,也必須掌握職場潮流新趨勢、留意產業動向,人工智慧、5G、AIoT,這些都是 2020 求職關鍵字。
慶祝完2020西曆新年,傳統過年即將來臨,當除夕夜圍爐時面對長輩問起「在做什麼、薪水多少?」想自信滿滿地回出讓親戚都羨慕的答案,就根據 Arm 預測,快搶學Python、成為AI人才吧!
- AI 自動駕駛公園在日本落成!可望在 2025 年量產自駕車
- 阿嬤也能 coding 了?2020 人工智慧想對我們做什麼?
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(103)

  • 個人分類:IT人的數位生活
▲top
  • 1月 02 週四 202016:23
  • 落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-福斯篇

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-福斯篇

 
本篇為福斯UI設計篇,關於Audi的UI設計,請點此 連結 以及 此連結
 
最後一篇帶你看福斯是如何將logo與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)獻聲,打破多年聲音形象,改以溫暖、愉快、自信的女性聲音取代。
以後的福斯廣告,都將使用女聲來宣讀「福斯」品牌名了。
▲ 福斯熱門主打車款「Golf 8」廣告即為女聲宣讀品牌名稱
新LOGO同時展現了福斯汽車朝向電動化新時代發展的決心。
福斯汽車準備電動化轉型,雖然已有一段時日,但關鍵轉捩點是在2016年。當時福斯集團(Volkswagen AG)爆出廢氣排放超標醜聞:福斯在美國銷售的車款中,植入了規避官方檢驗的軟體,在官方檢驗時自動調整數字以通過廢氣排放標準,但實際上這些車輛排放廢氣全超標10至40倍!!
在這起醜聞發生後,福斯集團便開始改變策略,朝新替代能源發展。
福斯近期全力主打的,就是在法蘭克福車展亮相的電動車ID.3,是全世界首款採用碳中和製程的電動車款,已在歐洲地區正式接單。明年系列車款ID. CROZZ SUV、ID.BUZZ、ID.VIZZION和ID.BUGGY等各式電動車也將陸續加入。
福斯第一款全電動車以「3」命名,代表正式在電動車領域踏出關鍵一步,與為了成為全球車壇的電動車領導品牌的決心。
現在是汽車產業全速往電動車發展的重要時間點,老牌車廠換上新裝,而這個新戰場的表現如何,就讓人拭目以待了~
 
 
相關閱讀推薦:

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪上篇


落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪下篇

想做出好用的App和手機網站,來上UI課程就對了


 UI課程幫你增加新技能,讓你明年開始機會紛紛來敲門!


網頁設計課程必學CSS基礎一:要怎麼在HTML中導入化妝師CSS?




Java課程、UI課程、程式課程、網路行銷課程推薦

達內教育海外合作企業


2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(29)

  • 個人分類:UI.UX設計五四三
▲top
  • 12月 31 週二 201919:00
  • 落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪下篇

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪下篇

 
這篇同樣也是要介紹奧迪的UI設計,沒想到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 to everyone(每個人都可使用)」相呼應。
「這是汽車業的創舉,為新的開放式的象徵(a symbol of new open-ness)」。
由此可見,UI和UX設計也可以成為大品牌和使用戶的強力連結!
 
本篇為Audi篇下集,下一篇為福斯UI的介紹「不落後於 Audi,福斯跟進「數位優先」視覺辨識與UI」請點此連結
 
 相關閱讀推薦:

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪上篇

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-福斯篇


前端工程師和網頁設計師必學-了解整體網站的規劃流程






 網路行銷重要,厲害的使用者介面更重要!-絕不要錯過的UI課程!



網頁設計課程入門1-如何讓HTML與CSS完美合作?



網頁設計時,要如何達到無痛優化呢?

醫療產業+UI課程=高薪專業人士,人生雙贏不GG

達內教育學員見證
2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

從無到有 挑戰14小時取得Google證照
 
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(49)

  • 個人分類:UI.UX設計五四三
▲top
  • 12月 30 週一 201923:24
  • 落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪上篇

落實"數位優先"的UI設計?這兩個汽車巨頭做給你看!-奧迪上篇

 
 
如何將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 設計:「介面佈局大至上分為垂直和水平的區塊,藉以達成視覺上的平衡。內容則顯示在這些方形區塊中。而這些方形區塊,也會置入於與設備的(螢幕)邊緣隔開的網格中。當這些方形區塊被賦予其他的附加功能時,則被視為「卡片」。為了被使用者重視,所有的元素都在階層式的結構中突出顯示。
▲ 替 Audi 設計新 Logo 的設計公司 Strichpunkt 上傳的 Audi 品牌重塑影片-展示了 Audi 的品牌形象、字體、網站以及各裝置的 UI 使用者介面。
根據裝置螢幕的大小,Strichpunkt 使用了簡單的黑色、白色、灰色、紅色和不同色階的銀色,以及不同的字體大小。您可以在這裏找到更多有關Audi UI 使用者介面設計的詳細信息。
 
▲ Strichpunkt 為了 Audi 的新 UI 設計,所打造的全新 2D 化 Logo、新 Audi 字體、品牌配色;下方則是用於網站、app、車用數位裝置的線條化圖標以及 S 型曲線模式
 
新的Audi Logo-2D扁平化
 
▲ Audi 的新 Logo 由原本的立體風變為 2D 平面風,俐落的外型更適用於嵌入各式各樣的設計。
Strichpunkt 替 Audi 完成了新的 Logo 設計,一改原本的「仿3D」立體設計,而以 2D 的 Logo 取代之。Logo 造型為扁平的四個圈圈、沒有品牌文字在 LOGO 下方、顏色非黑即白。
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(137)

  • 個人分類:UI.UX設計五四三
▲top
  • 12月 26 週四 201911:37
  • 人工智慧打亂犯罪規則!用英國影集來預測未來!

人工智慧打亂犯罪規則!用英國影集來預測未來!
 
人工智慧在未來會是破解犯罪的工具,還是偽造證據的幫手?這個影集的角度很有趣!
(繼續閱讀...)
文章標籤

布萊恩的創業小窩 發表在 痞客邦 留言(0) 人氣(70)

  • 個人分類:IT人的數位生活
▲top
«1...34353666»

個人資訊

布萊恩的創業小窩
暱稱:
布萊恩的創業小窩
分類:
職場甘苦
好友:
累積中
地區:

熱門文章

  • (161)從達內教育評價事件來看Geego(奇科?)IT培訓評論的謬誤
  • (80)人工智慧和生化人科技下的底層生活-"戰鬥天使:艾莉塔"為你呈現
  • (78)有了Python課程,癌細胞看你往哪跑!
  • (223)前端工程師抄捷徑!今天把網頁顏色代碼直接整理給你!
  • (29)人工智慧先驅逝世,你該知道他的故事!-Nils Nilsson
  • (138)輕鬆入門前端工程師的HTML5課程(4)元素排版-下
  • (1,224)常常聽到的Java,原來真的是咖啡名字!!?
  • (141)前端工程師的必備品Emmet(四)快速設定顯示文字與自訂屬性值
  • (38)人工智慧對未來的衝擊,我們該如何應對?-張忠謀給的四個建議
  • (7,342)Python基礎功不可少-dir()與help()的使用

文章分類

  • UI.UX設計五四三 (25)
  • 前端工程師就是我! (74)
  • 達內教育評價,不會讓你失望 (14)
  • 各式程式語言讓你挑! (135)
  • 網路行銷課程.SEO優化 (86)
  • IT評比 (2)
  • IT人的數位生活 (260)
  • 未分類文章 (1)

最新文章

  • 全球首屆的元宇宙時裝周盛會,落幕後的反響是什麼?
  • 烏克蘭運用人工智慧以辨別戰爭罹難者,是好還是壞?
  • 2022年的人工智慧七大突破就是這些了!!!??
  • Google迫使YouTube Vanced中止開發啦!!!
  • 有關Python跟Java的差別,一篇文章就讓你懂!
  • 前端工程師網頁開發神器Emmet,沒聽過?今天介紹給你!
  • 在元宇宙受傷,你會感受到痛??這次該不會是玩認真的吧?
  • 怕自己成為股市小韭菜嗎?人工智慧操盤手有機會拯救你!!
  • 是什麼原因,讓日本飯店狠下心裁了兩百多個人工智慧!??
  • 透過診斷視網膜病變,人工智慧成功降低糖友的失明風險!

動態訂閱

文章精選

文章搜尋

誰來我家

參觀人氣

  • 本日人氣:
  • 累積人氣: