如何將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)
人氣()
人工智慧在未來會是破解犯罪的工具,還是偽造證據的幫手?這個影集的角度很有趣!
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
Line也抵擋不住人工智慧的誘惑,有八個新功能等著Line的使用者去發掘!!
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
如何在JavaScript中將函式回傳?咦?原來只要輸入這東西... 一個 JavaScript 函式（function）可以選擇使用 return 語句，讓函式回傳結果。當你進行到需要結果的計算時，此語句可說是非常有用！而當 JavaScript 執行到 return 語句時，函式則會停止執行。 return 語句可用來回傳結果。如下例，對兩個數值 x,y 進行運算後回傳結果：See the Pen JavaScript15-theReturnStatement by Tedutw (@Tedutw) on CodePen. 如果你不從函式回傳任何內容，它將回傳為 undefined。例如，我們將上述的例子中，「return a * b;」改為「return;」，則結果如下面所示：See the Pen JavaScript15-theReturnStatement-1 by Tedutw (@Tedutw) on CodePen. return 語句要寫在函式定義的最後方，另一個 return 語句的範例如下：See the Pen JavaScript15-theReturnStatement-2 by Tedutw (@Tedutw) on CodePen.
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
今天達內教育要分享的是你可能聽過的名詞-達克效應,原來它的故事這麼有趣又奇葩!!你在職場或是學校一定有遇過這種人！他們總是滿嘴大道理，將看起來再簡單不過的道理講得天花亂墜，還會真誠地跟你說：「能遇到我，你真的是太幸運了，我是你的貴人，跟著我說的做就對了！」不，我絕對不是在說你老闆！我是在說那些病入膏肓的達克效應症候群患者！達內教育今天就要跟你分享這鼎鼎大名的：達克效應！▲ 達克效應患者如何一步步被自大毀滅？在1999年，由兩位任職於康乃爾大學心理系的教授鄧寧（David Dunning）以及克魯格（Justin Kruger）發現了達克效應（D-K effect），並在2000年獲得了「搞笑諾貝爾奬」，這本來博君一笑的小實驗，可是在未來的20年間，時時刻刻地警示著我們呢。 這兩位英國心理學家到底是哪根筋不對？會想做這樣的實驗呢？這要源自於1995年的一起令人啼笑皆非的銀行搶劫案。警察在搶案發生後一小時，就根據監視錄影器將犯人抓捕到案。沒想到兩位嫌犯卻驚訝的大喊著：「我們已經塗上可以隱形的檸檬汁了啊？為什麼監視器還可以拍到我們？」是不是與成語「掩耳盜鈴」的故事很像呢！英國的這兩位心理學家，太過驚訝於這兩位嫌犯的愚蠢，於是他們倆決定試著著手測量「人類的愚蠢程度」，這也就是達克效應的緣起。想看更多關於達克效應的愚蠢故事嗎？來這裡看看吧！ 要怎麼惡整另一半？漢堡王的網路行銷告訴你！AIoT是啥？AI人工智慧透過5G和物聯網(IoT)的完美結晶人工智慧會讓 Siri 更加情緒化，更掀起 AI 平權運動了？ 如何測出人類自以為是的程度？在得出達克效應這個實驗結果之前，兩位教授先分別測量受試者的「幽默感」、「文法」和「邏輯」，並詢問他們認為自己會在這麼排名中位於前幾％。他們在受試結果中發現，最末端25％的受試者，最容易高估自己的排名結果，而排名前面的受試者反而低估了自己的能力。根據實驗結果，鄧寧與克魯格教授提出了四點結論：1. 與能力較佳者相比，能力不足者更有可能高估自己的水平2. 能力不足者深受自我認知失調所苦，無論是對於自己或是他人的能力評估都會出現問題3. 能力不足者比他人更難透過與他人比較，認知到自己的真實能力4. 能力不足者可以透過自我的精進，調整對自我能力的認知並承認自己的無知而克魯格教授更提出一個弔詭的理論，那就是一個人「工作表現好所需要的智商，與認知到自己需要精進的智商是一樣高的。」而這樣的假說點出了：需要精進自己的人總是意識不到自己的不足，而那些真正聰明的人卻持續的精進自己。想看更多如何破除自身達克效應的方法嗎？來看看這篇文章!在2019的年末，除了忙著慶祝聖誕節與跨年，我們也要誠實地檢視自己一年的成果。無論你的2019是收穫滿滿，或是力不從心，都讓我們一起鼓勵自己的進步、正視自己的不足。在新的一年學習新的事物，讓自己的技能更跟得上時代的腳步吧！達內教育有更多你自己想都沒想過的未來可能！ 相關閱讀推薦：
達內教育評價-用成功事實擊退抹黑奧步!
雖然達內教育評價是"魔鬼訓練",但他接受挑戰,而且真的成功了! 想找最專業的職業培訓機構?選擇達內教育絕對值回票價!
達內教育與 Adobe·ACA 國際認證簽約成功AI x 機器人x達內教育2018百度品牌數字資產榜報你知!! 達內教育,海爾等知名皆榜上有名!!達內教育學員見證 2天考取Google Ads證照！新手廣告投放攻略
擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師 44歲媽咪順利轉職網頁設計師, 家庭事業都得意
零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略 從無到有 挑戰14小時取得Google證
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
數位行銷人和網路行銷人聽好啦!這篇文章要帶你回顧2019的關鍵字搜尋排行榜,大家討論的熱門話題你不能不知道吧~
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
學完如何定義及宣告JavaScript函式,當中的參數當然也不能一問三不知啦!這篇要幫你擺脫窘境! 函式中的參數JavaScript 中的函式（function），可以導入參數（parameters），如此一來，就能讓函式有更多的應用。在定義JavaScript函式參數中，參數（parameters）的名稱會被寫在函式名稱後方的小括號內。語法如下所示：function函式名稱(參數1, 參數2, 參數3) {
//這裡寫上要執行的代碼
}
所有的參數都必須被命名，並且以半形逗號來隔開所有不同名稱的參數。 使用參數當定義完參數之後，你就可以在函式內使用它了。看看下方的例子：一個名為「sayHello」的函式，該函式使用一個名為「name」的參數。當宣告「sayHello」函式時，就在小括號中寫入該參數的值，也就是引數（arguments）。See the Pen JavaScript13-functionParameters by Tedutw (@Tedutw) on CodePen.您可以定義一個函式，然後給予不同的參數值（引數）。承上例，套用不同引數的例子如下：See the Pen JavaScript13-functionParameters by Tedutw (@Tedutw) on CodePen.
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
你學會如何定義JavaScript函式了嗎?接著下面的步驟又有哪些?今天一起來看看! JavaScript 函式「JavaScript 函式」，就是由多個 JavaScript 代碼組合成的區塊，被用來執行特定的功能。 使用函式的主要優點有以下兩點：1. 可重複使用同組代碼：代碼一但被定義後，就可以多次重複使用。2. 相同的代碼，只要配合不同的引數（arguments），就會產生不同的結果。 定義函式要定義函式，JavaScript 的寫法是使用「function」字眼，後面接上「name（函式名稱）」以及一對小括號「（）」和大括號「{}」。要執行的代碼，則寫在大括號「{}」中。如下方所示：function name() {
//這裡寫上要執行的代碼
}
舉例來說，如果今天我們要定義一個函式，取名為「hello」，定義其功能為輸出「Hi,there」。其寫法，就如下例所示：function name(hello) {
document.write("Hi there");
}
宣告函式函式經由上述被定義的過程後，就可以「隨傳隨到」。一但當前端工程師需要執行這個函式前，就不用再一次去重新定義它了，只要宣告它就好了。宣告函式的寫法，只要函式名稱加上小括弧即可。如有需要引數的場合，則把引數寫在小括弧中。承續上一段的例子，今天我們要叫出這個名字為「hello」的函式，寫法如下方所示：See the Pen JavaScript12-function by Tedutw (@Tedutw) on CodePen.前端工程師請記得在宣告函式的語句最後方再加上分號～一但函式被定義後，在 JavaScript 中，就可以多次宣告它，不用再重新定義。 相關閱讀推薦：
JavaScript成功入門就看這!(10)迴圈-2
JavaScript成功入門就看這!(11)迴圈-3JavaScript成功入門就看這!(13)函式中的參數 高薪像做夢?!Java課程讓你夢想成真!
時下最火的Python與Java,它們的命名由來超奇葩!? 想跟前端工程師心連心,你得先了解網站的規劃流程!程式課程選達內，美上市IT課程教育集團 2天考取Google Ads證照！新手廣告投放攻略
擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師 44歲媽咪順利轉職網頁設計師, 家庭事業都得意
零基礎如何花 14 小時考取 GoogleAds 認證？五種 GoogleAds 廣告不藏私攻略 從無到有 挑戰14小時取得Google證照
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
最後一個JavaScript的迴圈就是break和continue!今天show給你看它們的作用~Break 跳出break 敘述， 是讓前端工程師用來「跳出」迴圈用的，繼續執行迴圈之後的 JavaScript 程式。See the Pen JavaScript11-break by Tedutw (@Tedutw) on CodePen.前端工程師執行時應該會注意到，只要當 i 的值等於 7 時，即將會從該迴圈跳出。 Continue 繼續Continue 敘述，僅在JavaScript的迴圈內中斷程式的執行，在中斷後又重新執行迴圈，而不會跳出迴圈。See the Pen JavaScript12-continue by Tedutw (@Tedutw) on CodePen.
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
學完JavaScript的for迴圈,猜猜看這篇是要講哪個迴圈!!while 迴圈只要條件成立，JavaScript 的「while 迴圈」就會重複執行一段程式碼。while 迴圈的 JavaScript 語法如下See the Pen JavaScript10-while-loop-1 by Tedutw (@Tedutw) on CodePen. 前端工程師們可以看看以下為 while 迴圈的範例：變數 i 的初始值等於 0、條件為「當 i 的值小於或等於 7 」時，就執行「顯示變數 i 的值，並且把 i 的值再加 1」。然後重複執行迴圈。See the Pen JavaScript10-while-loop-2 by Tedutw (@Tedutw) on CodePen.只要 i 小於或等於 7，迴圈將繼續執行程式。每次迴圈運行時，數值都會增加 1，於是輸出了 1 到 7 的值。當條件一直成立時，迴圈則會繼續執行程式，直到條件不成立為止。前端工程師要注意的是：在下條件時要小心，如果條件一直成立的話，迴圈就會一直執行下去，不會停止。 do...while 迴圈do...while 迴圈是 while 迴圈的變體。在檢查條件是否成立之前，此迴圈就會先執行一次程式碼了，然後只要條件為真，迴圈就會一直重複循環。關於do...while 迴圈的 JavaScript 語法如下：See the Pen JavaScript10-do-while-loop-3 by Tedutw (@Tedutw) on CodePen.註：分號必須要寫在 do...while 迴圈的最末端，別忘了！do...while 迴圈的範例如下：變數 i 的初始值等於 0、執行「顯示變數 i 的值，並且把 i 的值再加 1」、條件為「當 i 的值小於或等於 7 」。See the Pen JavaScript10-do-while-loop-5 by Tedutw (@Tedutw) on CodePen.
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
JavaScrip教學一定會教的迴圈,今天要開始分享三種迴圈,第一種:for迴圈.迴圈JavaScript 的「迴圈（Loops）」可以多次執行一組程式。當有多個值，需要重複執行同程式時，用「迴圈（Loops）」可說是非常方便！前端工程師應該都知道：JavaScript 有三種迴圈：for、while、 do while 。而最常用的 for 迴圈，它的 JavaScript 語法如下：請參閱CodePen上的Tedutw（@Tedutw）的Pen JavaScript9-for-loop-1。看清楚了嗎？上例是典型的 for 迴圈（for loop）格式，包含三個條件敘述 （statement）：在迴圈開始之前執行「條件敘述 1」；接著，「條件敘述 2」定義了迴圈運行的條件；而在每次迴圈跑完之後，再執行「條件敘述 3」。For 迴圈以下的 for 迴圈範例中，顯示出 7 個等於或小於 7 的整數：請參閱CodePen上Tedutw（@Tedutw）編寫的Pen JavaScript9-for-loop-2。以上示例中，迴圈開始前，條件敘述 1 設置了一個變數（變數 i = 1）；條件敘述 2 定義了迴圈運行的條件（i 必須小於或等於 7）。每次執行迴圈中的程式代碼後，條件敘述 3 都會增加一個值（i ++）。條件敘述 1 是選擇性的：如果在迴圈開始前就已經定義了值，則可以將其省略。如下例（前端工程師請注意：因為在 for 迴圈之前便已經定義了「var i = 1」，因此 for 迴圈就省略了條件敘述 1）：請參閱CodePen上Tedutw（@Tedutw）的Pen JavaScript9-for-loop-3。如果條件敘述 2 結果為真（true），則迴圈將重頭開始執行；反之，迴圈將結束。與條件敘述 1 一樣，條件敘述 2 也是選擇性的(可以省略)。如果省略條件敘述 2 ，則必須在迴圈內加一個 break。否則迴圈將不會結束。條件敘述 3 用於更改初始變數。可以使用任何方式來修改變數，包括減去（i--）或增加（i = i + 15）等等。條件敘述 3 也是選擇性的(可以省略)，如果在迴圈內增加值，則可以將其省略。請參閱CodePen上Tedutw（@Tedutw）編寫的Pen JavaScript9-for-loop-4。
布萊恩的創業小窩 發表在
痞客邦
留言(0)
人氣()
