您現在的位置是:電腦技術吧?>? 組裝維修 ??>??全面體驗,體驗都要做哪些??>??正文詳情

全面體驗,體驗都要做哪些

穰夢凡2019-11-16 13:30:40 人圍觀
簡介做體驗有幾種素描作為一種界面設計工具,具有全矢量、輕量級和像素級的精確性,非常適合移動應用界面設計和簡單的平面圖標設計。以下是通過一段時間的使用,與PS相比,寫生對于

Sketch作為一個為UI設計而生的工具,全矢量、輕量級、像素級精準,非常適合做移動端應用類的界面設計和簡單的扁平圖標設計。

下文是我通過一段時間的使用,對比PS,梳理了Sketch對我們而言的優點和痛點,探討了下Sketch對提升工作效率是否有幫助。

  它輕巧、優雅、高效,三點相輔相成 。

出道至今已經強力地占據了一片設計師市場,經常被拿來跟PS對比。

  Part 1 Sketch的八大優勢

  1. 小清新顏值高

  簡潔高效 抗干擾

  界面簡潔美好,功能清晰。

無懸浮面板,選擇一個對象/圖層(objects)就會展示對應檢查器(inspectors),不會有PS中處理大文件時各種開關窗口情況。

  ▲ 軟件截圖(全屏):左側欄為圖層區;右側欄為檢查器區

  2. 使用暢快易上手

  2.1 無限畫布畫板 自由度高

  不管有多少畫布(pages)都被包含在同一個文檔中,還可以在程序內部進行搜索,便于管理大型項目

  在一個畫布中可以平鋪無限個畫板(Artboard),這樣的全局視野,規劃自由度高,也利于思考界面元素關系和維護界面設計的一致性,方便各種check。

  ▲ 示意文件截圖(局部):右側為隨意擺放的4個畫板

  說明:Sketch文檔PageArtboardLayer

  在一個Sketch文檔中可以建立多個畫布(Page),畫布中可以自由放置畫板(Artboard)。

  而每個元素/對象都作為一個圖層(layer),以圖層或組(group)的形式安置在artboard中。

  2.2 無冷啟動時間 運行快

  0啟動時間,也就是沒有類似于PS的啟動畫面,節省了等待時間

  由于多是矢量文件,因此體量小,運行快。

  2.3 簡化操作 交互體驗好

  操作人性,各種貼心設計 ,使眼與手在界面設計過程中更加輕松高效完成工作,上手指數超高。

  方便選擇:

  上文提到的Sketch中不同面板位置是固定的,選中某個對象才會顯示對應的檢查器,不用在眾多屬性窗口中苦苦尋覓

  鼠標掠過畫布中元素的時,左側圖層欄會出現藍色框對對焦到選中的元素

  左側分欄可以看到矢量圖形的的縮略圖,不用仔細閱讀面板信息即可準確選擇

  ▲ 選中右側元素BHBH,左側藍色框自動對焦圖層。

  簡而言之,不懂PS/AI的小白上手Sketch完全無礙。

  3. 像素級精準

  3.1像素級對齊

  Sketch中在編輯路徑時,可以選擇三種對齊方式

  Dont round to nearest pixels:不自動對齊像素:編輯路徑時可以隨意移動節點

  Round to half pixels:以半像素為單位對齊:可能出現半像素

  Round to full pixels:以1像素為單位對齊像素:錨點全部像素對齊,避免鋸齒,可以節省設計濕大量微調時間。

  ▲ 三種對齊方式

  ▲ 三種對齊方式的說明圖 *圖片來源

  3.2數值化編輯

  矢量軟件的一大優勢就是可以編輯精準,Sketch中可以實時調節形狀的半徑/數量等各個參數,數值化編輯讓設計更加精準和專業。

  基于公式運算的變形:

  PS中的標尺和矢量工具都很笨重,比如建立倍數關系的東西、按黃金分割分配比例、做菲波那切數列圖標什么的都很糾結。

  而在Sketch中甚至可以直接完成簡單運算:

  ▲ 像 100 * 1.6 60 這樣的運算可以在 Sketch 中進行 *圖片來源

  Sketch讓設計師更加關注數值,更理性有邏輯的去編排布局,而不是隨意拖拽元素。

  4. 非破壞性編輯

  隨時調節形狀的半徑/數量:

  在PS中如果需改變已建圖形的半徑就要重新建立形狀,而Sketch則可以隨時編輯。

  ▲ 圓角變形就是辣么簡單 *圖片來源

  隨時編輯的布爾運算

  跟PS和AI一樣,sketch也有聯合、相減、相交、差異這些布爾運算。

  更方便的地方在于參與運算的子形狀都可以即時編輯。

每個路徑都可以隨時修改運算方式和層次等操作,方便管理復雜的形狀組合。

  比PS中的合并形狀更具自由度,也更容易理解層級關系。

  ▲ 每層與下一層發生布爾運算

  九宮切片自動化

  導入位圖文件后可以調整九宮節點,直接實現九宮變形,節省了人工完成的時間。

  ▲ 九宮編輯

  可視化漸變調節

  由于是矢量文件,所以實現了參數可視化,在圖形可以看到直觀效果。

  ▲ 圖形上方即有漸變操作桿直接調節

  復制旋轉

  可以方便地建立旋轉圖形及編輯中心點。

  總覺得有點酷炫。

  圖層樣式可無限累加

  可逐層設置的多種混合模式,也就是說可以加外描邊的外描邊的外描邊的外描邊

  并可以任意調節各層樣式。

另外,描邊寬度也可以加錨點改變噠(同AI)

  5. 可調用的嵌套樣式

  Sketch的明星功能符號(Symbol)和共享樣式(Shared style:layer stylestext styles):

  符號(Symbol)

  就是共享元素,一次編輯,所有共用的地方全部生效,就像是 Photoshop 里的智能對象,且生效范圍僅在每一個 .sketch 文件中。

不同之處在于Sketch中改變一個元素副本大小所有都同步,PS中智能對象的大小是獨立的;且Sketch的符號中文本是可以單獨編輯的。

  符號被運用的最廣泛的地方可能是按鈕這樣的基本 UI 元素,舉個栗子,在PS中建立兩個文字不同的圖標需要新建智能對象或者文字與按鈕分離,編輯時需要打開一個或兩個智能對象Sketch中編輯就輕松很多。

  共享樣式(Shared style:layer stylestext styles)

  圖層共享樣式PS中也能復制黏貼,然文字樣式的編輯和共享PS中并沒有。

共享文字樣式等同于直接在軟件中調用文字規范,非常有用的功能~

  ▲ 紫色文件夾即應用了符號(來源:官網)

  6. 原生測量利器

  十分好用的標尺工具

  如果需要查看兩個元素之間的距離,在選中第一個元素后按住Alt然后將光標指向第二個元素即可。

  此時如果按住Alt并移動元素,便能在移動過程中時刻看到元素之間的距離變化:

  ▲ 對齊也變得非常容易

  布局網格和參考線

  參考線是PS比較渣的點,只能一條條來,不支持布局式參考線(按比例建立多條),做界面設計時基本要借助第三方插件,而在Sketch中就很方便啦。

  ▲ 參考線批量一鍵設置

  7. 靈活的切圖和輸出

  批量輸出爽爆,還可以自動畫出切片大小(slice),切片輸出直觀方便 (包括上文提到的九宮變形)

  可以導出 0.5x、1x、2x、3x、512W 和 512H 的版本,同時還可以自定義不同尺寸的后綴。

  ▲ 一鍵導出多種尺寸和格式

  8. 前景好迭代快

  手機端配套支持

  自帶的Sketch Mirror支持同步手機端,時時查看效果。

  IOS 友好

  IOS 各種支持的好,且內置的ios模板 (artboard),各種文檔尺寸不用手動輸。

  CSS友好

  Sketch是寫碼的設計師最愛,可能是代碼調用方便(?)以下是Avocode(號稱是連接設計師與碼農的橋梁)做的調研報告How designer worked in 2015中關于軟件使用比例的截圖。

  可以理解會有不少創業型小團隊將Sketch作為主力設計工具。

  ▲ Sketch的使用比例快要趕上PS

  社區繁榮插件多

  Sketch由于備受追捧,社區的活躍度高,各種插件、資源查找方便。

  小團隊迭代快

  作為為設計師存在的軟件,據說非常愿意傾聽設計師意見,響應迅速、更新迭代快。

  Part 2 Sketch的三大痛點

  1. 弱爆的位圖處理能力

  位圖處理就在兩個地方:

  簡單的投影和模糊(4種模糊方式)

  位圖編輯功能:兩個選區工具(魔術棒和選擇工具)、反選、裁剪、矢量填充和直接填充。

  當然并沒有畫筆、濾鏡種種,且圖層樣式只有四種:填充、描邊、投影、內陰影(沒有常用的內外發光 斜面浮雕)

  所以說不適于做擬物類界面設計,用Sketch挑戰繪圖向設計很低效。

  2. 格式支持局限,難以團隊協作

  不支持:PSD和AI文件,部分支持eps/svg。

  支持:除圖片文件jpg/png/tiff/pdf外,可以導出eps/svg(可以與AI對接)

  3. 平臺和語言限制

  Sketch在官網上的定位就是 Sketch- Professional Digital Design for Mac

  首先需要Mac,且只有英文系統 (可能會有中文字體支持問題)

  如:無法方便地為一段中英混合的文字指定中英文字體(一個知乎上看到的槽點)

  比如說「你好Hello」這幾個字,在PS下可以先設為冬青黑,再設為Avenir Next,它就是冬青黑的中文 Avenir Next的英文。

但Sketch不支持這樣的操作,為大段文字設置不同的中英文字體就是災難。

  字體行高詭異

  不同字體的實際行高也不一樣,做列表類界面的時候特別麻煩。

  另外 Sketch 的行高很有問題,我隨手找過幾個字體對比過,比如在行高設為 88px 時,每個字體的行高都不一樣,行高設為自動時不同字體文本框 padding 也是不同的。

  排版對齊很麻煩

  Photoshop 的文字有分「段落文本(Paragragh)」和「點文本(Point)」,Sketch中 對應的則是「Fixed」和「Auto」,看上去 Auto 對應的是 PS 里的 點文本,但是 Sketch 的文本框上下會留出一些留白間距,而 PS 則是沒有留白間距的處理,這樣一來,對齊的時候 PS 感覺會更精準一些。

  ▲ 任意三種字體上對齊的結果

  拼界面無明顯優勢

  運行超快的Sketch能否拿來拼(位圖)界面?

  導入了一套約18M的文件,其中包含jpg和png文件。

移動位圖過程中有明顯卡頓,九宮切圖因為自動化所以會比(ps)較快,但無法做常用的位圖編輯,總體交互操作相較PS也沒有太多優勢。

  ▲ 18M輸出文件

  Part 3 結論:不妨一試

  誠然Sketch對位圖編輯是非常不友好的,完全不能與PS 相提并論,因此現階段Sketch 一定不是必要工具。

當然它的賣點本來就無關位圖,其針對UI設計的操作、交互模式大大提高工作效率。

不過就像大家知道AI做矢量比PS高效,但就是不移步AI一樣(實際工作中位圖處理多過矢量),軟件切換多少有心理成本。

另外還涉及到團隊協作問題,Sketch 現如今在我司還如此孤立無援,且還要多背一臺MacBook。

  但是Sketch非常適合扁平化設計,順應了設計理念:數值化編輯像素級精準等等, 而且矢量化設計也是一種趨勢。

  好玩好用,上手成本低,值得一試。

  作為一枚GUI總結一下,Sketch在以下幾方面可能有所助益:

  1. 移動端APP和響應式網頁設計利器

  全局化視野 精準的自動對齊 符號和共享樣式顯然就是為此而生

  2. 簡單的矢量化圖標

  通過布爾運算能處理的圖標都適合在Sketch中操作,輸出也快速方便

  3. 簡易形(幾何組合造型)嘗試

  Sketch的數值化編輯、非破壞性編輯使得圖形組合的自由度非常高

  4. 游戲界面風格稿前期設計

  也就是刻畫之前的各階段:色彩搭配、布局調整、樣式設計

  有利于聚焦在設計過程、界面邏輯,而非細節。

即避免失控(設計點偏離)以及在豐富的材質中迷失。

  Abobe的反擊

  當然PS也已經向sketch學習,PS CC 2015推出Design Mode,看上去也是萌萌噠。

  ▲ Design Mode *圖片來源

  并沒有用過。

看討論是說由于軟件體量悠久的操作習慣等問題只是小改,沒有多好用。

這個有空研究

  搜集資料的過程中還發現了CC不為人知(也許就我不知道)的功能Libraries panel (附教程)

  ▲ 看圖秒懂

  看圖秒懂,就是可以各種調用:色板、sketch的共享字體樣式、常用圖片是不是都在這里了 。

這個有空研究

  想到PS也有一個版本是可以平鋪很多畫板的,但并沒有很多人用。

  對比Sketch和PS帶來的反思

  1. 設計是核心:厘清設計思路很重要

  兩家都是用來實現設計想法的工具,最關鍵的還是設計和想法,Sketch中的很多功能都是幫助設計師關注設計流程、把控層級的,

  2. 主動優化流程

  PS更新后有很多有意思的功能和冷知識可能因為以前的使用慣性等原因沒有去開發;

  培養好的使用習慣,比如圖層管理、資源整理;

  也許偶爾花點時間去優化流程會是一大助力;

  新東西不妨弄一弄,讓自己的系統更加Flexible,多多自我迭代。

版權聲明:本文由 穰夢凡 整理編輯。

原標題:體驗,做全面體驗有哪些項目

轉載注明出處:http://www.dn9ww09s.icu/assemble/12844.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • mp3轉換m4r格式轉換器,m4r格式轉換器官方下載

    mp3轉換m4r格式轉換器,m4r格式轉換器官方下載 相關圖片m4r格式鈴聲轉換器許多用戶對m4r格式文件相當陌生。實際上,這是iPhone鈴聲的音頻格式。如果你的iPhone設備想要設置鈴聲,你需要將音頻文件轉換成這種格式。要實現m4r的格音樂m4r轉換...

  • nfc怎么用,錘子pro2nfc功能在哪

    nfc怎么用,錘子pro2nfc功能在哪 相關圖片一加7支持nfc嗎Hammer于2017年11月發布了nut pro2,采用高通snapdragon 660處理器和32g內存,是一款不錯的全屏手機。對于nut pro2,有網友錘子nfc...

  • 字體花紋,花紋字體復制

    字體花紋,花紋字體復制 相關圖片花邊字體生成器如果你有更好的方法,本教程只提供一個想法供你分享,讓我們看看效果第一步:使用螺旋工具繪制螺旋第二步:根據情況從中心刪除多余的節點第三步:復制一個并適...

  • system not found,not found

    system not found,not found 相關圖片monitoringsystem一些計算機用戶在開機后遇到操作系統找不到的錯誤提示,無法正常開機。這是什么原因?如何解決system recovery...

  • 像一幅作品,像風一般作品

    像一幅作品,像風一般作品 相關圖片像神一樣的txt作品越來越多的國內設計師正轉向Behance,在社區展示他們設計案例的所有細節。那么,我們應該怎么做才能看起來像一個經常在專家聚集的設計社區工作的設計師呢?今天...

  • 手機swf轉換mp4格式轉換器,手機swf怎么轉換成mp4

    手機swf轉換mp4格式轉換器,手機swf怎么轉換成mp4 相關圖片swf轉換成mp4無聲音目前,從網頁上下載的視頻文件大多采用swf格式,有些用戶通過flash制作swf文件。但是,有時swf文件不符合用戶的使用規則,希望將swf格式轉換為mp4swf轉換mp4為什么會亂...

  • 用戶體驗原則,用戶體驗遵循的原則

    用戶體驗原則,用戶體驗遵循的原則 相關圖片用戶體驗理念Firefish注:皮克斯動畫工作室,簡稱皮克斯。1986年,史蒂夫·喬布斯以1000萬元的身價領跑后,創作了《玩具總動員》、《海底總動員》和《腦力特工隊》等經用戶體驗交互...

  • wacom 驅動,wacom驅動更新

    wacom 驅動,wacom驅動更新 相關圖片wacom安卓驅動華康是一個經典的手繪板品牌。許多用戶在連接到計算機時會提示安裝相應的驅動程序。但是,有些用戶遇到了無法安裝wacom驅動程序的情況。原因是什么以及如何解決wac...

  • excel每頁都打印表尾,excel表頭固定打印

    excel每頁都打印表尾,excel表頭固定打印 相關圖片excel每頁固定表頭在日產的工作和學習中,excel是我們總結數據的重要工具。有時當我們需要打印excel時,需要在每一頁上都有一個標題,這樣我們才能更直觀地看到情況。Excel打電子表格...

  • 20個分鏡頭范例,文字稿本范例

    20個分鏡頭范例,文字稿本范例 相關圖片采訪分鏡頭腳本范例個人網站有很多用途,包括市場營銷、求職、個人品牌推廣、創意表達,或者只是與同行交流。與社交媒體或企業門戶相比,個人網站作為一個發布平臺往往更加自...

熱評文章

  • m4r轉mp3,m4r文件轉mp3

    m4r轉mp3,m4r文件轉mp3 相關圖片mp3怎么轉成蘋果鈴聲M4r是iPhone的鈴聲格式。Android用戶可以將任何常見的音頻格式文件設置為鈴聲。不過,iPhone用戶必須使用m4r格式。許多iPhone用戶對此感到mp3格式轉換成m4r...

  • 提高對比度,提高對比度的方法

    提高對比度,提高對比度的方法 相關圖片提高圖像對比度缺乏對比度是一個非常常見的問題,通常很容易補救。當你聽說顧客并不完美的時候!他們真正想說的是,他們想看到更多的對比設計元素。今天的好文章總結了五個簡...

  • 抖音黑白特效視頻,抖音黑白特效在哪里

    抖音黑白特效視頻,抖音黑白特效在哪里 相關圖片抖音那個黑白怎么弄自助餐短視頻是一個非常流行的短視頻工具,有很多方法來播放它。顫音有很多特效,其中黑白特效非常流行。自助餐短視頻黑白特效可以讓整個視頻看起來像黑白...

  • 網頁設計交互原型,網頁設計交互規范

    網頁設計交互原型,網頁設計交互規范 相關圖片網頁設計和交互設計新技術不斷推動網頁設計師和設計機構嘗試新的創意,創意和想象力在網頁中逐漸實現,那些不可思議的概念變成了現實,這也是設計師的夢想變成了現實,對吧?...

  • 頭條熱詞分析,頭條號熱詞分析

    頭條熱詞分析,頭條號熱詞分析 相關圖片頭條機器喜歡的熱詞是什么今天的頭條新聞不僅有很多用戶從中獲取信息,也有很多創作者。為了讓創作者創造更多貼近熱點的信息,今天的頭條正式推出了熱詞分析功能。你知道如何...

  • 人機界面是啥,人機界面

    人機界面是啥,人機界面 相關圖片人機界面由什么組成4.1欄4.1.1狀態欄狀態欄顯示設備及其周圍環境的重要信息默認(暗)內容燈狀態欄:透明始終固定在整個屏幕的上邊緣不創建自定義狀態欄用戶取決于系統默認狀態欄...

  • 抖音怎么自定義音樂,抖音自定義音樂

    抖音怎么自定義音樂,抖音自定義音樂 相關圖片抖音配樂怎么用本地音樂自助餐是一個非常有趣和流行的音樂創意短視頻社交軟件。現在,這個領域的競爭也非常激烈。為了保持它的領先地位,顫音一直在引進新的有趣的東西,如顫...

  • 馬賽克圖片怎么去除,有什么辦法可以去掉馬賽克

    馬賽克圖片怎么去除,有什么辦法可以去掉馬賽克 相關圖片馬賽克清除器手機版你很難下載的視頻資源導致了所有邪惡的馬賽克。當你搜索整個網絡,發現你根本找不到沒有代碼的資源,你能忍受嗎?也許你也可以使用馬賽克去除軟件,去除馬...

  • 訂酒店用什么軟件,住酒店app

    訂酒店用什么軟件,住酒店app 相關圖片什么軟件訂酒店最便宜春天是溫暖的,鮮花盛開。一切都在復蘇。又是旅游的好季節。旅行時,預定旅館是很自然的。讓我們從設計的角度來看看目前市場上流行的酒店應用產品I.酒店預...

  • 怎樣才有借唄資格,怎么獲得借唄開通資格

    怎樣才有借唄資格,怎么獲得借唄開通資格 相關圖片資格是什么意思Flyme6已經上線一年半了,給你帶來了體驗。今天的flyme終于要升級了!近日,魅族正式發布消息,4月22日Flyme7將正式亮相新聞發布會,Flyme7將通執業資格是什么...

關注微信

变脸官网查询