ui 設計工作的八卦，Yahoo名人娛樂都在討論

由臺北市都市更新處主辦的「 2019社計狂想- Open Green 打開綠生活 LOGO徵件比賽 」日前揭曉結果，由作品「連結」獲得首獎。新的LOGO 以現代人形影不離的手機當中，早已習慣的 UI 設計介面作為設計發想，向右滑開綠色開關就是「開鎖」功能，將型態巧妙融入 LOGO 當中，外圍的圓弧曲線由粗漸進消失，象徵滑動打開時的波紋。整體呼應「打開綠生活」的重點，打開人際關係的聯繫與溝通，並且親自動手改造，去建置屬於自己的綠生活，進而影響周遭，改變社區樣貌。
　
台北擁有非常勃發的公民社群能量，也來自於過去20餘年社區營造的累積以及SNS等社群媒體平台的科技快速發展，#新LOGO將代表SNS的科技感融入，代表橫向溝通連結，我個人蠻喜歡這個概念。或許有人會覺得這個設計很像只是把之前由三頁文設計工作室設計的舊 LOGO 拿來改一改，但我覺得以一個行之有年的計畫來說，與其要以一個嶄新的 LOGO 重新打造品牌印象，不如能在之前的 LOGO 印象當中找到一個新的切入點重新優化，不僅能加深原有受眾的印象，對於政府長官的業主來說，也較容易接受。
　
承接此計畫執行的光懿創意執行長 Tammy Lin 提到，過去他們以原民文化為策展基底，策劃過像是回家藝術節、國際原生藝術節等大型活動，以「跨界文創經紀人」的角色與「文化融合」的合作模式，不斷地在台灣的大街小巷中尋找靈感，進而推出「 加樂原創 」此平台，分享對於「藝術生活化，生活藝術化」的態度。也因此在進行此計畫時特別有使命感，也希望能藉此讓台灣社會對設計與文化藝術關心的朋友，能一起來響應打開綠生活的計畫，將這樣的生活態度融入日常。「Open Green 打開綠生活」是一個具有實驗精神的生活空間改造計畫，如何營造出綠生活雖是計畫的核心思考，但我認為重點不在字面上的「綠」，而是在如何以開放的思考去看待，將生活空間視為一個有機體，從單純的綠化、到廣義的活化，把倡議性的主題融入空間營造，與同樣住在附近的居民互相溝通、討論綠生活的營造方式。小至自己與鄰里的關係，大至整個社區如何形塑居住品質、#甚至也可藉此打造出社區品牌。
　
台北市來說 #民生社區、#天母 等，都是蠻有意思的案例。以我居住的民生社區為例，居住在其中的居民本身對於自家外面的公共區域十分在乎，像是台灣街頭電線桿上經常可以看見的廣告傳單，都會有不知名的路人動手清除，即便是一般公寓中的住民，也蠻常會互相約定好，定期請清潔人員來保持公寓的公共空間整潔。甚至我在台北租房子的經歷超過15年，第一次在老公寓的樓梯間牆壁上掛的是畫而不是掛春聯的視覺經驗，也是在民生社區。
　
如何提升共同擁有的居住空間品質，並延伸到戶外街道美學，其實就是要從人與人之間彼此對空間有所感覺、進而有了共識，才能真正打開綠生活。希望我們都能對社區各種公共事項開始有感，一同動手打造出最適合彼此生活的綠空間。
　
其他入圍作品
https://www.2019opglogo.com/awards

　
#設計比賽 #在地 #logo #設計 #社計狂想 #OPENGREEN #打開綠生活 #綠生活 #都市再生 #空間改造 #創生 #臺北市都市更新處 #LOGO競賽 #VI設計 #CIS企業識別系統 #光懿創意 ＃媒體協力

＃活動快報 ＃FEDxDesign2018
＃設計和技術相關的工作者不能錯過的年度盛會

感謝 Front-End Developers Taiwan & RGBA 的邀請，BMI·方略 的設計總監 Diane (沈美君) 將在今年的 FED X Design 2018 研討會與大家見面，並在講座及工作坊與大家近距離的交流。

今年度於7/14-15舉辦的 Front-End Developers Taiwan X RGBA 的年度大聚會，可以說是一場結合 科技 與 人文 的社群活動，採設計與前端，雙軌制進行，希望可以透過講座和工作方的形式，讓設計、技術相關的工作者能夠拋開既有的習慣和思維，一起玩技術、談設計，挖掘未來 FED / UI / UX 的無限可能！

這次 Diane 所帶領的工作坊是《給設計師與工程師的「策略設計工作營」- 開始掌握經營環境》

身為設計師/工程師的你，#為什麼需要了解經營環境？這與開發產品服務的工作日常有什麼關聯呢？為了讓你在開發的過程，能更準確對焦、更迅速回應外面世界的變化，設計師、工程師們除了需要掌握各自的專業能力，還必須具備追蹤趨勢訊號、將趨勢訊號轉化為策略的設計能力。想了解各項工作坊細節及報名資訊：

👉 這邊請>>https://goo.gl/cfsEsd

FEDC 2018 :【設計軌第一場工作坊】 — 沈美君 🎉
Business Models Inc. 大中華區設計總監
Craftventure 共同創辦人
Service Design Network Taiwan Chapter 共同發起人
⟪設計ㄧ門好生意 (Design A Better Business)⟫一書的共同協作者

是個會做策略的設計師、也是個會看程式碼的使用者研究員，擅長於服務策略、服務體驗設計與使用者研究。長期在不同國家與跨領域團隊合作(高科技、電信、金融、零售、食品、生活風格、社會企業)，協助團隊作新事業開發、制定服務策略、設計服務體驗、制定創新策略與商業模式。

【工作坊主題】 : 給設計師與工程師的「策略設計工作營」
在這個工作坊中，你將學習如何觀察、並有系統地分析勾勒目標市場的經營環境，並學習透過工具與團隊進行深度討論、建立對關鍵趨勢與經營環境的共同認知，接著能將分析結果反應到商業模式中，找出生意的「機會」及「威脅」，做出因應時勢的策略選擇。對設計師與工程師來說，開始學著掌握經營環境分析的能力，能讓你學著跳脫井底思考、讓你更方便頻繁的練習「拜訪未來」、洞悉生意必須作何改變、說一個讓人記住的故事，為自己也為團隊帶來更多的價值。

● 如果你有以下的問題，這個工作坊適合你來參加：
– 你需要一個系統化的方法，讓團隊可以相互分享、討論、激盪各自從不同管道獲得的趨勢資訊
– 你的團隊需要一個簡單清楚、明確可視的方法，讓大家有機會充分思考、表述自己的觀點，並紀錄與討論所觀察的變化
– 你覺得團隊成員在進行新事業開發或策略規劃時，無法感受外在變化的速度、沒有回應變化的急迫感
– 你與團隊討論經營環境的時候，常發現：討論內容瑣碎片段、缺乏事例、太多無法消化的制式報告、討論頻次太低、或每個人思考討論層次不一致

● 工作坊流程 :
– 經營環境是什麼？
– 為什麼需要經營環境分析？
– 什麼是經營環境分析圖？
– 「經營環境分析」的 7 個關鍵區塊
– 「經營環境分析」的動態分析，釐清關聯
– 開始檢視經營環境和我的生意有什麼關係
– 如何分析經營環境與商業模式，做出更有根據的決策？
– 我們的三個案例故事

● 註明：這次的工作坊所用的案例材料部分會以「商業模式圖」來闡釋，因為時間限制，將假設參加的朋友對商業模式圖已經有一定基礎的了解與應用，將不另外解釋。若對《商業模式設計工作坊》有興趣，請參考：https://www.facebook.com/pg/BMINCTW/events/）

👉 VIP 票出售中 https://f2e.kktix.cc/events/fedc-2018
🔔 工作坊票 6/5 開賣 https://f2e.kktix.cc/events/fedc-2018-design-workshop
👉 追蹤最新消息 : https://www.facebook.com/events/196401260949269/

#FEDC #workshop ＃strategydesign #whyshouldIcare #cocreationfordoingjobbetter
＃stratagythinkinganddoing #bettercollaborationwithpeople

HTML/CSS/JavaScript 開發工具總整理

這篇幫您整理出實作 HTML/CSS/JavaScript 時，一些比較酷的工具、函式庫。非常有用！很推薦大家看！我簡單翻譯一下大綱，不過我會推薦以：

(1) 編輯器：教您用那個工具來撰寫 HTML/CSS/JavaScript 會比較好。
(4) 函式庫：補充 JavaScript 原來不足之處。如同加上「金剛飛翼（函式庫）」後的「鐵金剛（JavaScript）」就突然能飛是一樣的。
(3) 前處理器：把常用、好用、可能高達數百行的 CSS/JavaScript 程式碼，濃縮成一個名字，讓您使用後，彈指之間有如寫出數百行 CSS/JavaScript 般。
(2) 框架：原始碼外觀可能完全不像 JavaScript，但寫完後，會由框架轉換成 JavaScript 去執行。讓您不但「寫得少」，還有「功能多」的好處。有點像「前處理器」+「函式庫」的綜合體。
(5) 工具：一些測試、編譯、模板等工具，可以讓你的程式設計工作，更加自動化、更輕鬆。

這樣的順序來研讀。不過我底下的翻譯為了配合原文，無法調整成我認為理想的順序，請大家見諒囉！

原文連結：
https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---------

(1) 編輯器（寫碼之用）：

- 「Sublime Text 3」：
這個我們介紹過好幾次了！個人非常推薦！Sublime Text 3 是要錢的，不過它的前一版 Sublime Text 2，則可以「試用」到天荒地老，不另收費！

- 「Light Table」：
它的好處就是一邊編輯，可以一邊看到結果。不必等到用瀏覽器秀出來才知道對錯。不過這個特性個人沒有覺得有多好，我自己不太推。

- 「WebStorm」：
一個將「寫碼、偵錯、看結果」全部整合在一個視窗的工具。是很不錯！但如果您不喜歡掏錢買軟體，這個可能不是你要的。

- 「Vim」：
已經五十歲的一個老牌編輯器！免費、不太好學、但學會後您不會想換其它編輯器。這有點像開慣手排車的人，要他回來開自排車，簡直要了他的命一樣。

- 「Brackets」
也是整合「寫碼、偵錯、看結果」於一身的工具。Adobe 研發、免費。不過整合得沒有 WebStorm 好，很多功能 Sublime Text 2/3 也做得到。所以個人還是認為學 Sublime Text 比較划算。

(2) JavaScript 程式框架（Frameworks）：

所謂「框架」，就是把本來要自己寫兩三百行程式碼才能實現的功能，讓您在彈指之間就寫出來的工具。如果您的程式碼用了「框架」，外觀上有可能看起來一點都不像 JavaScript 原始碼！不過它在底層「展開」後，仍然是 JavaScript 原始碼無誤！只不過你要寫的是那一兩行「未展開」的框架原始碼，而非「展開後」那兩三百行 JavaScript 原始碼就是了。

用框架來寫程式，就像你包餃子是買做好的「餃子皮（框架）」來包，而非買「麵粉（JavaScript）」從頭做起。時間上省了很多！

比較著名的 JavaScript 框架有（可以混用）：

- Backbone：jQuery （一種函式庫，後述）最流行的框架。
- Ember.js：提供一堆很美麗的 Cocoa UI（一種用 JavaScript 寫成的人機界面），還讓你用少少幾行完成。
- AngularJS：Google 提供！主要用來擴充 HTML 的功能之用。著重在功能面上的一個框架。
- Knockout.js：它著重在「資料綁定」。這是 Backbone 比較弱的一環。Backbone 做資料綁定可能要好幾百行，Knockout.js 大概只要十幾行就完成了。
- Meteor：架構在 Node.js（一種跑在伺服器上的 JavaScript，地位等同 PHP）的框架，目的是希望讓 Node.js 的程式師能少寫幾行程式碼。
- Mocha：一種針對「JavaScript」做「單元測試」的框架。類似 Java 裡的 JUnit。競爭對手包括「Jasmine」與「QUnit」。

(3) 前處理器（Preprocessors）:

所謂「前處理器」，就是把一些常用、複雜的 CSS/JavaScript 寫法，賦予它一個簡短名字。然後只要你在 CSS/JavaScript 原始碼內 寫上這個名字，這些前處理器，就會把它展開，還原成原來 CSS/JavaScript 的樣子。這會讓你大大縮短開發時間！著名的前處理器排列如下（大部份人會慣用其中之一即可，雖然也可以混用）：

以下是 CSS 的三大前處理器：
- Sass
- LESS
- Stylus

以下是 JavaScript 的兩大前處理器：
- CoffeeScript
- TypeScript

以下是全方位的前處理器：
- CodeKit
- LiveReload

(4) 函式庫（Libraries）：

所謂函式庫，就是人家幫你寫好的 JavaScript 副程式。想用時，直接拿來呼叫即可。正如「鐵金剛（JavaScript）」本來不會飛，加上「金剛飛翼（函式庫）」後，就有飛的功能了。著名的函式庫如下所示：

- jQuery：它是用來操縱整個 HTML 節點（或稱 DOM 結構）最棒的函式庫！講到操作 DOM，除了 jQuery 外不作第二人想！
- Underscore：它是用來補足 JavaScript 沒提供「顯而易見」函數而被發明出來的。如 find(), shuffle()...等。它與 Backbone 框架緊密結合。用了 Backbone 的人很少沒聽過 Underscore 的大名的。
- D3：它的拿手好戲就是顯示統計圖表！如果你想用 JavaScript 顯示各類統計圖表，D3 絕對不可錯過！

(5) 工具（Tools & Utilities）

- RequireJS：一個 JavaScript 檔案/模組載入器。允許你把 JavaScript 寫成小小模組，然後像樂高積木一樣載入使用。不好學，但學會後很值得。
- Testem：JavaScript 的測試用工具。
- Grunt：一個可以將 JavaScript 的編譯、載入、測試、執行工作，自動化的命令列工具。類似 C 語言世界裡的 make。
- Normalize：可以將你的程式碼，改到連用 IE 低版本瀏覽器來看，效果都跟 Chrome 或 Firefox 一樣的工具。
- HTML5 Boilerplate：它裡面包含了上百個「模板」，可以讓你「拷貝與貼上」，就能擁有強大的網頁功能，不必寫大量程式碼。
- Twitter Bootstrap：由 Twitter 工程師貢獻的大量模板，也是可以讓你「拷貝與貼上」使用它們。
- Foundation 4：與 Bootstrap 是競爭對手、也有大量模板供你拷貝與貼上使用之。

https://tutsplus.com/tutorial/essentials-tools-for-a-modern-front-end-development-workflow/

---
原文已經率先刊登於 G+ 私密社團「紀老師網頁程式設計」。對 HTML/CSS/JavaScript 感興趣的朋友，可以申請加入：

https://plus.google.com/communities/100793154849235819235

（申請制，審核時間 24 小時內）

本集邀請到 UI 設計師黃翎（Lynn Huang) 來和我們分享業界的故事。Lynn 是 AJA 大予創意的介面設計師，歷經與團隊一同設計規劃 Richart 銀行等數位產品，也是科技 / 科幻主題 Podcast《空想科研》的主持人。

AJA 是台灣著名的設計公司之一，與台新 Richart 、星宇航空、和泰汽車 yoxi 等夥伴，共同打造精彩的數位體驗。那麼，在這裡的設計工作是長什麼樣子？顧問行業又有什麼特殊之處呢？讓 Lynn 用她的想像力，為你展示她對 UIUX 產業的體會吧！

-

00:00 - 時間軸
02:01 認識 AJA 大予創意設計
05:08 公司 UIUX 角色規劃
07:27 Jr. 與 Sr. 設計師的差別
08:52 Agency v.s. In-House
11:31 在 AJA 當 UI 設計師是什麼感覺
14:14 職場上與人類相處、溝通的方法
17:44 怎麼想踏進 UI 設計領域
22:28 工作的日常時間分配
24:06 給想開始學習 UI 的建議
27:43 推薦免費的學習資源
32:02 空想科研 ❘ 科技,科幻與硬奇幻

-

📱 在 Instagram 有幕後秘辛
https://www.instagram.com/scorpiusriven

👨🏻‍💻 追蹤 Facebook 臉書動態
https://fb.me/riven.design

💻 這是 Riven 的個人網站
https://riven.design

🖥 發摟 Medium 設計部落格
https://riven.medium.com

👍 按讚 FB 粉絲專頁 - RAR 設計攻略
https://www.facebook.com/rar.design

🎧 Podcast 廣播聊天節目收聽
https://riven.firstory.io

📡 加入 Telegram 頻道會收到最新消息
https://t.me/rar_design