| 導購 | 订阅 | 在线投稿
分享
 
 
當前位置: 王朝網路 >> 學院 >> 一款搭配SKETCH的輕量移動原型工具
 

一款搭配SKETCH的輕量移動原型工具

2016-08-30 06:46:05  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
 
  對原型工具都不滿意?自己動手做一個!本文是Silver的開發者在Medium上寫的一篇介紹文章,從各個方面介紹了這款原型工具的優勢和特色(與Sketch深度整合、超方便預覽、轉場效果豐富原型逼真等等),同爲設計師,他開發的産品更貼近我們的日常需求,非常值得體驗。

  Silver是一款便捷進行移動設計流程的工具,它包含:一個iOS應用、一個Mac應用和一個Sketch插件,三者之間無縫銜接,完美配合。

  背景

  2015年初,爲了找到完美的原型工具,我將Silver作爲一個兼職項目進行研究,研究中發現了一些很棒的工具,包括:Framer, Pixate, Form, Origami, Invision, Flinto, Marvel,PRoto.io和 UXPin。每一項工具都獨具特色,同時也爲我的設計流程添加了不少麻煩。這些工具部分適合微交互設計,部分適合流程類原型設計。當然,在完全沒有整合它們之前,在設計流程中的每一步進行工具的切換非常痛苦。

  可以說,我無法找到一款完全滿足所有需求的工具。

  我的需求其實不麻煩:

  - 開始設計移動應用之前,先進行用戶流原型設計。盡管每次只能設計一個頁面,但完整的故事需要一個頁面流,我不想對設計失去全局控制。

  - 能在移動設備上實時預覽、感受和體驗自己設計的應用,而不是導出圖片、同步文件或者繪制熱點。原型的制作越簡單越好,否則我會立即放棄使用。

  - 先進行低保真設計並進行測試,從測試結果中不斷叠代優化設計,在不切換工具的情況下逐步增加原型的保真度。

  - 能展現應用開發時面臨的真實技術限制,避免設計出無法落地實現的應用。

  - 作爲目前界面設計的最佳工具,我希望可以在Sketch中完成設計,該原型工具能與Sketch深度整合並支持其相關插件。

  - 一旦完整流程確定後,我可以基于頁面制作微交互。Framer是我個人最喜歡的頁面級別交互的原型工具,因此該工具最好能夠與Framer兼容。

  - 最關鍵的地方在于減少設計流程中不需要的瑣事,這樣我才能將精力花在與客戶溝通、進行深度研究或是設計多套方案供測試等方面。

  與其抱怨缺少這麽一款能滿足我所有需求的殺手級原型工具,還不如自己動手。我具備Sketch插件的制作經驗,對其內部原理也有所了解,因此立即選定了基于插件的解決方案。我立馬召集了自己心中最牛的插件開發者Andrey跟我一起進行嘗試。

  以下是我倆搞定的Silver基本功能,以及它們如何幫你提升設計效率的建議:

  與Sketch深度整合

  將Silver應用安裝到Mac上之後,你還需要安裝一個Sketch插件,用來在後台與之配合。Silver應用出現在菜單欄上,用作與移動設備連接,其它所有功能都融合在Sketch及插件之中。

  △ Silver菜單欄應用,連接與斷開狀態。

  Silver的內置邏輯能幫你把設計轉換爲Sketch文檔中的原型,我們的目標是消除導入、導出、同步以及切換工具等設計流程中的瑣事。

  通過WiFi或者USB連接設備

  如果你正在設計移動應用,務必注意,必須在移動設備上去預覽界面的最終效果!

  借助iOS設備安裝的Silver預覽應用,你不僅可以實時關注Sketch中藝術板(Artboard)的微小修改,而且可以預覽使用Silver Sketch插件創建的設計流程。

  通過WiFi連接的設備能夠讓你隨意在辦公室展示你的原型,除此之外,Silver還可以通過USB連接的方式做到這點,而且鏡像展示更迅速,它能夠根據設備是否插上自動判定使用USB或者WiFi。

  設計工作流而不只是頁面

  Silver有一項頗受喜愛的特性,它支持Sketch內通過連接藝術板上的圖層形成工作流。選擇一個圖層並敲擊鍵盤上的C就能創造一個連接,同時這樣也生成了一個Interface-Builder(Mac OS X下用于設計和測試UI界面的應用)風格的端點連接器,它可以通過拖拽連接到目標藝術板,選擇觸發轉場及具體轉場類型的手勢。

  當你用Silver創建了一個工作流並且在iOS應用上進行預覽,你能體驗到一個擁有真實轉場的iOS頁面集合。這不僅讓你的原型更加真實,而且幫助你更好的利用iOS導航結構進行組織。

  Silver支持三種類型的轉場順序:

  1、推移轉場

  【視頻】創建推移轉場:https://vimeo.com/145123175

  你能使用推移轉場來導航到應用內容的下一層級。比如說,聊天應用裏從對話列表到對話詳情。屏幕左側邊緣右劃能夠回到上一個界面,也能通過建立一個負責回退行爲的圖層來實現。

  2、模態轉場

  【視頻】合並推移與模態轉場:https://vimeo.com/145229320

  模態轉場用于啓動一個獨立的要麽完成要麽明確放棄的任務。撰寫新郵件、Instagram上發一張照片、印象筆記裏創建一條新筆記,都屬于必須在一步或多步必須完成(或者取消)的獨立任務。取消一個模態任務,你必須創建一個包含Dismiss Modal行爲的圖層。

  模態轉場提供了目標藝術板出入的靈活動畫形式,你可以創建一個使用劃動手勢來進行交互的模態轉場。

  【視頻】使用模態轉場創建滑出導航:https://vimeo.com/145230740

  3、無轉場

  假如你偏愛頻繁的切換到其它藝術板,可以通過將轉場模式設爲None來實現。它將即刻以你連接的藝術板取代當前的藝術板。你不但可以用這種方法來展示當前藝術板的不同狀態,也可以用來創建一個基于底部標簽欄的應用原型,切換標簽時不需要任何轉場過渡,如下所示:

  【視頻】使用無轉場的藝術板連接創建底部標簽應用:https://vimeo.com/145241088

  觸發核心iOS功能

  除了創建設計流,Silver還能創建連接圖層來觸發:啓動攝像頭、浏覽照片、啓動系統郵件、編輯短信、撥打電話或者在默認浏覽器中打開一個外部URL地址等核心iOS功能。你不必再通過仿制靜態屏幕在原型中來模擬這些功能。

  下面我們舉個例子,看看如何創建連接來允許用戶在他們的iOS設備上浏覽照片。將選中的照片填充到一個圖層,命名爲_Photo。

  【視頻】創建連接用以浏覽照片並顯示選中照片:https://vimeo.com/145242395

  固定的頁眉和頁腳

  【視頻】用Silver創建頁眉與頁腳:https://vimeo.com/144324822

  Silver支持通過鍵盤快捷鍵創建固定的頁眉和頁腳,選中要固定的圖層,點擊Ctrl+Shift+H來固定頁眉,點擊Ctrl+Shift+F來固定頁腳,就這麽簡單。與該圖層的尺寸和位置的有關變化,都會在預覽中自動更新。

  實時輸入框

  【視頻】用Silver創建輸入框:https://vimeo.com/144331683

  有時我們要制作一個需要用戶輸入信息的原型,比如說簡單包含用戶名和密碼輸入的登錄頁面,或是包含諸多信息輸入框的個人資料編輯頁面。按照以往的做法,大家可能會制作一個僞造的原型,因爲再原型中模擬真實輸入框的過程太麻煩。

  Silver出手,原型我有。只需要簡單設置一下,你可以在Silver中輕松創建常規的文本圖層以便在原型中真實模擬文字輸入框。實時輸入框引入了UITextField對象的一些功能,比如設置占位符、在輸入框中顯示清除按鈕、選擇輸入鍵盤類型等,凡是設計需要考慮的狀態都應有盡有。

  嵌入WebView

  【視頻】嵌入網頁內容及Framer原型:https://vimeo.com/145226520

  Silver還能將矩形圖層轉換成實時WebView,這對于使用HTML構建的應用功能遲早有用,而且在已有內容裏添加新設計會更方便。

  WebView還支持連接到本地Framer原型,這樣你能夠將頁面級別的交互引入到Framer中,它們與應用的其它內容融合的更棒。Framer中的一個組件依舊可以正常工作,能夠直接從Framer代碼中調用Silver對應的具體功能。

  關于公測

  以上都是Silver內測版的功能,僅展示了一些皮毛,年底我們會爲最終版提供更強大的功能。幾周之後,我們將限量邀請部分設計師/開發者加入公測,如果你有興趣,請到Silverflows.com注冊登記。
 
 
 
上一篇《2016年日曆怎麽制作》
下一篇《十二月設計圈幹貨素材大合集》
 
 
 
 
 
 
 
 
日版寵物情人插曲《Winding Road》歌詞

日版寵物情人2017的插曲,很帶節奏感,日語的,女生唱的。 最後聽見是在第8集的時候女主手割傷了,然後男主用嘴幫她吸了一下,插曲就出來了。 歌手:Def...

兄弟共妻,我成了他們夜裏的美食

老鍾家的兩個兒子很特別,就是跟其他的人不太一樣,魔一般的執著。兄弟倆都到了要結婚的年齡了,不管自家老爹怎麽磨破嘴皮子,兄弟倆說不娶就不娶,老父母爲兄弟兩操碎了心...

如何磨出破洞牛仔褲?牛仔褲怎麽剪破洞?

把牛仔褲磨出有線的破洞 1、具體工具就是磨腳石,下面墊一個硬物,然後用磨腳石一直磨一直磨,到把那塊磨薄了,用手撕開就好了。出來的洞啊很自然的。需要貓須的話調幾...

我就是掃描下圖得到了敬業福和愛國福

先來看下敬業福和愛國福 今年春節,支付寶再次推出了“五福紅包”活動,表示要“把欠大家的敬業福都還給大家”。 今天該活動正式啓動,和去年一樣,需要收集“五福”...

冰箱異味産生的原因和臭味去除的方法

有時候我們打開冰箱就會聞到一股異味,冰箱裏的這種異味是因爲一些物質發出的氣味的混合體,聞起來讓人惡心。 産生這些異味的主要原因有以下幾點。 1、很多人有這種習...

《極品家丁》1-31集大結局分集劇情介紹

簡介 《極品家丁》講述了現代白領林晚榮無意回到古代金陵,並追隨蕭二小姐化名“林三”進入蕭府,不料卻陰差陽錯上演了一出低級家丁拼搏上位的“林三升職記”。...

李溪芮《極品家丁》片尾曲《你就是我最愛的寶寶》歌詞

你就是我最愛的寶寶 - 李溪芮 (電視劇《極品家丁》片尾曲) 作詞:常馨內 作曲:常馨內 你的眉 又鬼馬的挑 你的嘴 又壞壞的笑 上一秒吵鬧 下...

烏梅的功效與作用以及烏梅的食用禁忌有哪些?

烏梅,又稱春梅,中醫認爲,烏梅味酸,性溫,無毒,具有安心、除熱、下氣、祛痰、止渴調中、殺蟲的功效,治肢體痛、肺痨病。烏梅泡水喝能治傷寒煩熱、止吐瀉,與幹姜一起制...

什麽是脂肪粒?如何消除臉部脂肪粒?

什麽是脂肪粒 在我們的臉上總會長一個個像脂肪的小顆粒,弄也弄不掉,而且顔色還是白白的。它既不是粉刺也不是其他的任何痘痘,它就是脂肪粒。 脂肪粒雖然也是由油脂...

網絡安全治理:國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰受害者

來源:中國青年報 新的攻擊方法不斷湧現,黑客幾乎永遠占據網絡攻擊的上風,我們不可能通過技術手段杜絕網絡攻擊。國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰...

河南夫妻在溫嶺網絡直播“造人”內容涉黃被刑事拘留

夫妻網絡直播“造人”爆紅   1月9日,溫嶺城北派出所接到南京警方的協查通告,他們近期打掉了一個涉黃直播APP平台。而根據掌握的線索,其中有一對涉案的夫妻主播...

如何防止牆紙老化?牆紙變舊變黃怎麽辦?

如何防止牆紙老化? (1)選擇透氣性好的牆紙 市場上牆紙的材質分無紡布的、木纖維的、PVC的、玻璃纖維基材的、布面的等,相對而言,PVC材質的牆紙最不透氣...

鮮肌之謎非日本生産VS鮮肌之謎假日貨是謠言

觀點一:破日本銷售量的“鮮肌之謎” 非日本生産 近一段時間,淘寶上架了一款名爲“鮮肌之謎的” 鲑魚卵巢美容液,號稱是最近日本的一款推出的全新護膚品,産品本身所...

中國最美古詩詞精選摘抄

系腰裙(北宋詞人 張先) 惜霜蟾照夜雲天,朦胧影、畫勾闌。人情縱似長情月,算一年年。又能得、幾番圓。 欲寄西江題葉字,流不到、五亭前。東池始有荷新綠,尚小如...

關于女人的經典語句

關于女人的經典語句1、【做一個獨立的女人】 思想獨立:有主見、有自己的人生觀、價值觀。有上進心,永遠不放棄自己的理想,做一份自己喜愛的事業,擁有快樂和成就...

未來我們可以和性愛機器人結婚嗎?

你想體驗機器人性愛嗎?你想和性愛機器人結婚嗎?如果你想,機器人有拒絕你的權利嗎? 近日,第二屆“國際人類-機器人性愛研討會”大會在倫敦金史密斯大學落下帷幕。而...

全球最變態的十個地方

10.土耳其地下洞穴城市 變態指數:★★☆☆☆ 這是土耳其卡帕多西亞的一個著名景點,傳說是當年基督教徒們爲了躲避戰爭而在此修建。裏面曾住著20000人,...

科學家稱,人類死亡後意識將在另外一個宇宙中繼續存活

據英國《每日快報》報道,一位科學家兼理論家Robert Lanza博士宣稱,世界上並不存在人類死亡,死亡的只是身體。他認爲我們的意識借助我們體內的能量生存,而且...

《屏裏狐》片頭曲《我愛狐狸精》歌詞是什麽?

《我愛狐狸精》 - 劉馨棋   (電視劇《屏裏狐》主題曲)   作詞:金十三&李旦   作曲:劉嘉   狐狸精 狐狸仙   千年修...

 
 
 
對原型工具都不滿意?自己動手做一個!本文是Silver的開發者在Medium上寫的一篇介紹文章,從各個方面介紹了這款原型工具的優勢和特色(與Sketch深度整合、超方便預覽、轉場效果豐富原型逼真等等),同爲設計師,他開發的産品更貼近我們的日常需求,非常值得體驗。 Silver是一款便捷進行移動設計流程的工具,它包含:一個iOS應用、一個Mac應用和一個Sketch插件,三者之間無縫銜接,完美配合。 背景 2015年初,爲了找到完美的原型工具,我將Silver作爲一個兼職項目進行研究,研究中發現了一些很棒的工具,包括:Framer, Pixate, Form, Origami, Invision, Flinto, Marvel,PRoto.io和 UXPin。每一項工具都獨具特色,同時也爲我的設計流程添加了不少麻煩。這些工具部分適合微交互設計,部分適合流程類原型設計。當然,在完全沒有整合它們之前,在設計流程中的每一步進行工具的切換非常痛苦。 可以說,我無法找到一款完全滿足所有需求的工具。 我的需求其實不麻煩: - 開始設計移動應用之前,先進行用戶流原型設計。盡管每次只能設計一個頁面,但完整的故事需要一個頁面流,我不想對設計失去全局控制。 - 能在移動設備上實時預覽、感受和體驗自己設計的應用,而不是導出圖片、同步文件或者繪制熱點。原型的制作越簡單越好,否則我會立即放棄使用。 - 先進行低保真設計並進行測試,從測試結果中不斷叠代優化設計,在不切換工具的情況下逐步增加原型的保真度。 - 能展現應用開發時面臨的真實技術限制,避免設計出無法落地實現的應用。 - 作爲目前界面設計的最佳工具,我希望可以在Sketch中完成設計,該原型工具能與Sketch深度整合並支持其相關插件。 - 一旦完整流程確定後,我可以基于頁面制作微交互。Framer是我個人最喜歡的頁面級別交互的原型工具,因此該工具最好能夠與Framer兼容。 - 最關鍵的地方在于減少設計流程中不需要的瑣事,這樣我才能將精力花在與客戶溝通、進行深度研究或是設計多套方案供測試等方面。 與其抱怨缺少這麽一款能滿足我所有需求的殺手級原型工具,還不如自己動手。我具備Sketch插件的制作經驗,對其內部原理也有所了解,因此立即選定了基于插件的解決方案。我立馬召集了自己心中最牛的插件開發者Andrey跟我一起進行嘗試。 以下是我倆搞定的Silver基本功能,以及它們如何幫你提升設計效率的建議: 與Sketch深度整合 將Silver應用安裝到Mac上之後,你還需要安裝一個Sketch插件,用來在後台與之配合。Silver應用出現在菜單欄上,用作與移動設備連接,其它所有功能都融合在Sketch及插件之中。 △ Silver菜單欄應用,連接與斷開狀態。 Silver的內置邏輯能幫你把設計轉換爲Sketch文檔中的原型,我們的目標是消除導入、導出、同步以及切換工具等設計流程中的瑣事。 通過WiFi或者USB連接設備 如果你正在設計移動應用,務必注意,必須在移動設備上去預覽界面的最終效果! 借助iOS設備安裝的Silver預覽應用,你不僅可以實時關注Sketch中藝術板(Artboard)的微小修改,而且可以預覽使用Silver Sketch插件創建的設計流程。 通過WiFi連接的設備能夠讓你隨意在辦公室展示你的原型,除此之外,Silver還可以通過USB連接的方式做到這點,而且鏡像展示更迅速,它能夠根據設備是否插上自動判定使用USB或者WiFi。 設計工作流而不只是頁面 Silver有一項頗受喜愛的特性,它支持Sketch內通過連接藝術板上的圖層形成工作流。選擇一個圖層並敲擊鍵盤上的C就能創造一個連接,同時這樣也生成了一個Interface-Builder(Mac OS X下用于設計和測試UI界面的應用)風格的端點連接器,它可以通過拖拽連接到目標藝術板,選擇觸發轉場及具體轉場類型的手勢。 當你用Silver創建了一個工作流並且在iOS應用上進行預覽,你能體驗到一個擁有真實轉場的iOS頁面集合。這不僅讓你的原型更加真實,而且幫助你更好的利用iOS導航結構進行組織。 Silver支持三種類型的轉場順序: 1、推移轉場 【視頻】創建推移轉場:https://vimeo.com/145123175 你能使用推移轉場來導航到應用內容的下一層級。比如說,聊天應用裏從對話列表到對話詳情。屏幕左側邊緣右劃能夠回到上一個界面,也能通過建立一個負責回退行爲的圖層來實現。 2、模態轉場 【視頻】合並推移與模態轉場:https://vimeo.com/145229320 模態轉場用于啓動一個獨立的要麽完成要麽明確放棄的任務。撰寫新郵件、Instagram上發一張照片、印象筆記裏創建一條新筆記,都屬于必須在一步或多步必須完成(或者取消)的獨立任務。取消一個模態任務,你必須創建一個包含Dismiss Modal行爲的圖層。 模態轉場提供了目標藝術板出入的靈活動畫形式,你可以創建一個使用劃動手勢來進行交互的模態轉場。 【視頻】使用模態轉場創建滑出導航:https://vimeo.com/145230740 3、無轉場 假如你偏愛頻繁的切換到其它藝術板,可以通過將轉場模式設爲None來實現。它將即刻以你連接的藝術板取代當前的藝術板。你不但可以用這種方法來展示當前藝術板的不同狀態,也可以用來創建一個基于底部標簽欄的應用原型,切換標簽時不需要任何轉場過渡,如下所示: 【視頻】使用無轉場的藝術板連接創建底部標簽應用:https://vimeo.com/145241088 觸發核心iOS功能 除了創建設計流,Silver還能創建連接圖層來觸發:啓動攝像頭、浏覽照片、啓動系統郵件、編輯短信、撥打電話或者在默認浏覽器中打開一個外部URL地址等核心iOS功能。你不必再通過仿制靜態屏幕在原型中來模擬這些功能。 下面我們舉個例子,看看如何創建連接來允許用戶在他們的iOS設備上浏覽照片。將選中的照片填充到一個圖層,命名爲_Photo。 【視頻】創建連接用以浏覽照片並顯示選中照片:https://vimeo.com/145242395 固定的頁眉和頁腳 【視頻】用Silver創建頁眉與頁腳:https://vimeo.com/144324822 Silver支持通過鍵盤快捷鍵創建固定的頁眉和頁腳,選中要固定的圖層,點擊Ctrl+Shift+H來固定頁眉,點擊Ctrl+Shift+F來固定頁腳,就這麽簡單。與該圖層的尺寸和位置的有關變化,都會在預覽中自動更新。 實時輸入框 【視頻】用Silver創建輸入框:https://vimeo.com/144331683 有時我們要制作一個需要用戶輸入信息的原型,比如說簡單包含用戶名和密碼輸入的登錄頁面,或是包含諸多信息輸入框的個人資料編輯頁面。按照以往的做法,大家可能會制作一個僞造的原型,因爲再原型中模擬真實輸入框的過程太麻煩。 Silver出手,原型我有。只需要簡單設置一下,你可以在Silver中輕松創建常規的文本圖層以便在原型中真實模擬文字輸入框。實時輸入框引入了UITextField對象的一些功能,比如設置占位符、在輸入框中顯示清除按鈕、選擇輸入鍵盤類型等,凡是設計需要考慮的狀態都應有盡有。 嵌入WebView 【視頻】嵌入網頁內容及Framer原型:https://vimeo.com/145226520 Silver還能將矩形圖層轉換成實時WebView,這對于使用HTML構建的應用功能遲早有用,而且在已有內容裏添加新設計會更方便。 WebView還支持連接到本地Framer原型,這樣你能夠將頁面級別的交互引入到Framer中,它們與應用的其它內容融合的更棒。Framer中的一個組件依舊可以正常工作,能夠直接從Framer代碼中調用Silver對應的具體功能。 關于公測 以上都是Silver內測版的功能,僅展示了一些皮毛,年底我們會爲最終版提供更強大的功能。幾周之後,我們將限量邀請部分設計師/開發者加入公測,如果你有興趣,請到Silverflows.com注冊登記。
󰈣󰈤
 
 
 
  免責聲明:本文僅代表作者個人觀點,與王朝網路無關。王朝網路登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
 
時尚麗人(16)
時尚麗人(15)
時尚麗人(14)
時尚麗人(13)
石林,奇觀,攬勝
傍晚的教堂
TIME
世紀金源
 
>>返回首頁<<
 
 
 
 
 
 
 
 熱帖排行
 
 
 
 
© 2005- 王朝網路 版權所有