布萊恩的創業小窩

  前端工程師 網頁開發神器Emmet,別怕,這篇手把手帶你輕鬆入門!   目錄 快速產生標籤名稱 （Tag Name） 快速產生 className 與 id 父子兄弟階層、群組、上一層 父子元素一次輸入 兄弟階層一次輸入 將元素設為同一階層的群組 上一層 複製元素 編號 設定起始編號 顯示文字 自訂屬性值 身為一個 前端工程師 ，一定要裝一個「省時神器」 Emmet 外掛，可以大大節省前端工程師在編寫  HTML  及 CSS 的時間。省下的時間可以讓你去體驗人生各種美好的事物，如玩玩喵星人、上上健身房運動等等。 Emmet 支援的網頁編輯器如下圖： 安裝下載的方式因個網頁編輯器而異，且在網路上皆可以查到教學，故此省略。以下小編先介紹基本的使用方式： 快速產生標籤名稱 （Tag Name） 前端工程師 在寫網頁的第一步，就是在網頁編輯器中開出新的頁面，並產生標準的  HTML5  樣板。透過 Emmet，我們可以先在編輯器中輸入「!」或是「html:5」後，再按下 Ctrl+E 鍵即可。 假設我們要產生一個 p 元素，那麼我們只要直接輸入 p 後，再按下 Ctrl+E 鍵，就能自動產生起始元素及結束元素。如下所示： 只要是 HTML 所定義的元素，如 h1-h6、center、title 等等，都能使用上述方示，快速產生出相對應的語法如下 有些元素還會帶入跟該元素有關的屬性，例如：iframe、a 或是 img 等 快速產生 className 與 id 我們也可以在產生元素時，直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤，則輸入「h1.title」後按 Ctrl+E 若是要針對單一元素要加上多個 class name 的話，只要把它們用半形的句號隔開，接在一起就可以了。例如今天我們要產生 Class Name 為「new...

  ​ 本文為下篇，上篇請看此 連結 Origami Studio 打造出 FB 與 IG 的UIUX設計 臉書（Facebook）用來打造Instagram的原型 UI/UX設計 工具。即使不會寫程式的設計師也能快速建立App原型（Prototype），還可匯出原始碼給工程師使用，拉近設計師與工程師溝通的距離。臉書（Facebooke）旗下許多使用者介面是Origami Studio設計和建立而成，例如，Instagram、通訊軟體Messenger、社團功能Groups等。 臉書（Facebooke）在 2013 年推出了這個原型製作工具。起初建立在蘋果圖形視覺化應用程式Quartz Composer上的工具，是原生OS X的應用程式，但 Xcode 環境的那部分並不是最好的原型製作選擇。所以臉書（Facebooke）去年推出了 Origami Studio。 ​ https://www.youtube.com/watch?v=c09YzLXcwr4&feature=emb_logo Marvel：產出APP的設計圖 設計者不需會寫程式便能製作「會動」的app，這裡的會動指的是能夠像真正的app那樣操作，但只能呈現靜態的畫面，也無法在手機中真正運行，不過最大好處就是只要有設計圖，就能快速產生初版的Prototype，不需寫出真正的App就讓使用者體驗到 UI/UX設計 ，如果想要修改畫面也能快速修改完成。 ​ https://www.youtube.com/watch?v=Zdjg9yhBqTU&feature=emb_logo Justinmind 節省UI/UX設計的時間 快速一體化的原型 UI/UX設計 可讓設計人員專注於用戶體驗。很容易與最廣泛使用的設計平台結合，包括Sketch和Photoshop，可從這些平台中、瀏覽器或檔案系統中來新增內容和影像，甚至可使用Justinmind建立自己的UI圖庫，並提供全套模板來創建高擬真原型。 ​ https://www.youtube.com/watch?v=lYkC6qaRBe4 上述任何一個設計平台，都很適合目前的 UI/UX設計 師，與其花時間思考使用哪一個平台時，仍還是需要思考問題的本質，「心態」是最重要的一部分，有健康的心，在面對挑戰時試著使用適合的工具找方法解決，讓這些平台為整...

  ​ 本文為下篇，上篇請看此 連結 Claritee：不會設計仍可從零上手 一款智慧型線框圖 UI/UX設計 工具，可將想法轉換為可視線框圖，是產品開發的關鍵一步，因為它提供一種低成本的可視化方法，無論設計者僅完成單個頁面還是整個網站，都可自動查看互動式原型。團隊可確認投入時間和資源創建過程中，能在原型設計呈現前解決問題。 ​ InVision：讓團隊不失去方向，保持工作進度 在繁雜的團隊工作中，日復一日，總容易迷失與工作效率低落，藉由這一款強化團隊溝通互動的原型 UI/UX設計 平台，簡化工作流程、掌握整體專案進度，縮短工作的流程與溝通。InVision提供從線框圖轉換到UI設計所需的所有元素，輕鬆實現團隊合作的呈現和原型設計。同時支持即時設計修改和收集團隊的快速反饋，設計師通常也會用來管理自己的工作流程。 ​ https://www.youtube.com/watch?v=0qisGSwZym4 Axure RP：我很醜，可是我有脈絡 有別於Sketch介面的美觀，Axure更專注在使用者互動上，兩者各有特點，但剛開始學習 UI/UX設計 容易過於注重表面的視覺呈現 (Visual Design) 而非核心的使用者需求 (User Needs)。Axure 的簡陋反而讓使用者能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上，快速繪製低擬真 (low-fidelity) 的 Wireframe，同時也可以做到中高擬真 (mid- to high-fidelity) 的互動原型 (Prototype)。 Axure RP將 SVG 導入、Sketch 和Adob​​e XD集成與原型製作功能相結合。可輕鬆的將Adob​​e XD和Draw共享Axure RP原型和畫板，並在螢幕頂部收集輸入。可檢查佈局介面、獲取CSS片段和下載，同時將靜態圖像轉換為動態Axure Cloud原型。Axure RP還增加綜合文檔、自動化紅線和更完整的移交給開發人員，無需程式語言。 ​ https://www.youtube.com/watch?v=X5I__ZDJmBs&feature=emb_logo Framer：解決溝通上的煩惱 製作 UI/UX設計 原型最重要的目的就是「溝通」，近年來許多設計流程裡，開始重視”原型”的重要性，使用Framer原型設計中，...

  ​ 本文為下篇，上篇請看此 連結 Figma：超人氣線上UI/UX設計 在和團隊討論進行時，腦袋靈光一現便可立即記錄下來的線上工具，擁有自由拖曳的編輯器、框線創建，輕輕鬆鬆就將溝通內容即時落實在高擬真度的原型設計中！不僅如此，內建的動畫素材增添身歷其境的呈現效果。 Figma 從推出至今，愈來愈受到 UI/UX設計 師的青睞。這一款基於瀏覽器的協作式設計工具雖被廣泛稱為UX設計應用程式，但也可使用於快速原型設計的軟體。其他功能包括 Figmotion 和 Autoflow 等外掛程式及Arc Tool和Vector Networks 的可用性。 ​ https://www.youtube.com/watch?v=axDzyLEfYgU Webflow：網站編輯，所見即所得 近來流行的線上網頁架站平台，使用者大多介於「外行平面設計師」及「專業網站工程師」之間，即使不會 Coding 和切版，仍可輕鬆建置出個人風格強烈的網站。此平台提供乾淨、語意化的程式語言和設計加速開發人員的工作，內建程式為大眾皆可使用的零編碼，設計者便可直接創建網站的功能與版型，Webflow 會自動轉換為線上可使用的網站，因此不用等全部架構設計完成，便可即時看見在網路上的呈現。 Sketch：歷久不衰的經典UI/UX設計工具 以簡單功能與UI設計專門為訴求，早期成為 UI/UX設計 師慣用軟體，較資深的設計者大多首選以此為主軸的設計流程。可創建各種形式的使用者介面，例如瀏覽器、行動裝置或程式的按鍵執行，因此使用者已達全球數百萬工程師。 Sketch提供流暢的設計介面與豐富的繪圖功能，設計師可創建高質量圖像。強調介面性能的Sketch和可跨平台線上使用的Figma雖不同特點，但能使設計者專注、快速的解決問題才是重點。 ​ https://www.youtube.com/watch?v=qrgDwQ0Fy1k Mockplus：跨部門神器，讓不同團隊的人都看的懂！ 簡潔易用並專注於原型設計的 UI/UX設計 軟體，非常適合跨團隊協作。可幫助專案企劃有效的溝通網頁功能、軟體介面、App 互動，透過畫出原型，讓產品經理、設計師、程式開發、主管、客戶之間能夠了解產品本身的使用流程，把想像或文字化為具體可用的示範。 Mockplus支援不同平台  Axure 、 Sketch 、 Ado...