<ruby id="aeuc0"></ruby>
  1. <s id="aeuc0"></s>
    <source id="aeuc0"></source>

    將想法與焦點和您一起共享

    網站建設中UI產品設計流程中的14個要點發布者:本站     時間:2022-03-28 09:03:26

    自從我在Dribbble上貼了一幅我的產品設計成果,受到了大家伙熱烈的反饋,對此我深受鼓勵,我決定寫下這篇文章,用來記錄我這兩年里作為產品設計師,所學到的東西。
     

    說起來有點慚愧,這幾年我一直都在使用同一套產品設計的流程,但是我覺得這套流程最適合我,對我來說是最理想的,所以就很少去更換。我的這套工作流程我覺得有4個地方可以和大家分享一下——前期工作、具體設計、后期工作以及一些提高效率的小細節

    UI產品設計流程中的14個要點
     

    一、前期工作
    1.畫!

    無論是一張紙、筆記本,還是一片什么能寫的玩意兒,都可以。我需要用紙筆記錄下腦中的創意,避免遺忘。有些時候,靈感經常不經意出現,而一時半會兒又找不到合適的紙,因此我會用銀行收據、餐館賬單、書籍封面等做暫時記錄。

     

    UI產品設計流程中的14個要點

     

    草圖記錄理念


    可以專門用一個筆記本來收集你的創意,不時的翻翻,可能會找到一些非常有趣的舊想法,你可以根據這些舊點子想一些新玩意兒。



    2. 收集圖片

     

    UI產品設計流程中的14個要點

     

    “一位藝術家必定是一位收藏家。他懂得品味藏品,而不是單純的‘貯藏’。他們懂得有選擇得去收藏。他們會根據自己內心的喜好選擇收藏的東西“


    還有一項前期要做的工作就是收集圖片,我每天都會收集一些圖片。收集圖片的方法可能有好幾百種,但是我還是習慣最Old-School的方法——Dropbox文件夾分類(例如,我會分成后臺界面設計、iOS設計、插畫設計等等)每當我有新的項目的時候,我就會看看這些圖片,用來尋找靈感。


    3. 情緒板和準備工作


    Dribbble,Behance,Pttrns,Pinterest——我們有很多可以需找靈感的地方。而且很容易就能找到和你項目相關的作品。多去逛逛,你可能會從別人的經驗中學會解決問題。

     

    當我開始新項目的時候,我總會準備4個文件夾——PSD,屏,資源,靈感。我會把和這個項目相關的東西全部按下面分類丟到文件夾里面。

     

    UI產品設計流程中的14個要點
     
     

    可以是Behance上整套案例的研究,也可以是整個應用中的一張界面設計圖。

    二、開始著手設計
    3. 不必在乎線框圖的質量

     

    我不喜歡精雕細琢線框圖。畢竟,這玩意兒只是一個過渡,而且客戶能夠預先準備好線框圖就更好了。真正的業界好客戶(而且肯定對品質也有追求的)肯定預先會以草圖或者線框圖的形式來表述需求。

     

    線框圖的作用是就是讓彼此更好的理解目的,而不是最終結果。線框圖能夠幫助架構層級,讓你了解大概需要多少屏界面,讓你了解客戶的想法

     

    設計師必須懂得去“敏捷”設計,如果真的太在意線框圖的細節,那么整個設計流程會拉長,設計師應該學會去取舍。


    5. PSD - 大尺寸畫布

    我記得7個月前開始Badoo項目的時候,我最開始觀摩了一下同事的工作方法,我覺得他不是很得要領。最好用PS做一個大尺寸畫布,用來承載流程中的一些細節。我一般會創建8000*5000的畫布,不是用來畫出整個應用的UI套件,而是用來記錄元素在不同階段的不同狀態——也就是流程。設計復用很方便,開發看到這種東西也會工作的更快。


    6. 所有屏都放入一個PSD中

    如果是移動應用,我喜歡把所有屏的界面設計全部裝入到一個PSD中。

    在設計移動應用時,我喜歡把整個流程中所有屏的界面設計全部裝入到一個PSD中,整體的對比效果會更好,也更容易讓他人理解你的設計理念。

    UI產品設計流程中的14個要點
     


    元素的復用也非常方便,只需要復制一下其他屏的圖層/圖層組,修改一下背景或者幾個圖標就成了。



    7. 整理、規范圖層和圖層組


    我是一個崇尚整齊的人,因此我的PSD結構非常的有序。我個人的規則是,如果超過8個圖層,那么就創建一個圖層組。、

    這里推薦一下《PS禮儀手冊》,有興趣的可以去看看

     

    8. 和朋友溝通

     

    我非常重視那些能夠給出專業性反饋意見的人。留意他們的反應和初次看到你設計時的想法,這未嘗不是一種用戶測試。而且多聆聽別人的意見,能夠讓你從不同的角度看待問題。在整個設計流程中,我盡可能的多和別人溝通,避免出現主觀差錯。每個人都可以給出一些不錯的意見。還記得那句話嗎?“只要你進了這個屋子,你就是用戶體驗設計師?!?br />
     
    9.圖示

    當所有屏的設計都裝入到一個PSD中后。應該做一點圖示,用來暗示交互流程,我覺得這算是一種早期原型設計吧,與此同時,還能充分感受到視覺設計的細節。集中到一個PSD中的好處是,如果你畫多個交互流程,畫多個以上的時候,指示線的視覺風格可能會混亂,而一個PSD能夠讓你整體視覺高度一致。

     

    UI產品設計流程中的14個要點

     

    3 種不同的指示線——第一種指示線用來指示界面流程(并帶有序號),第二種用來指示屏幕內的鏈接或元素,第三種用來指示外部鏈接或應用

     

    UI產品設計流程中的14個要點

     

    指示線搭配內容的效果
     

     

    UI產品設計流程中的14個要點

     

    整體預覽


    很多人喜歡把連線搞得滿屏都是,但是我采用了一種更靈活的方法,我的線可以畫得很短,只需要連接到一個圓圈數字,就可以代表連接到第幾屏。減少連線的繁雜感。

     

    為了讓你們更好理解我上述的心得,這里我給出一份PSD,各位請參考:

     

    https://www.dropbox.com/s/lnxg174ib9iqpa8/Diagram-Template.zip
     

    三、后期工作——視覺規范

    完成了設計工作后,要做的事情就是出一份視覺規范,然后檢查一下整體的視覺層級。我個人認為,無論是小型項目還是大型項目,視覺規范都有其存在的必要性。無論是對你自己,還是對于同事,都能起到很好的規范作用,避免不一致的設計。

     
    10. 配色表

    扁平化的要領之一是配色精簡。也方便了我們展現配色表。

     

    UI產品設計流程中的14個要點

     

    11. 字體表

    要完善的記錄Logo使用的字體,文本使用的字體,標題使用的字體等等,這對于開發會大有裨益。個人復查作品時也會很有幫助。

     

    UI產品設計流程中的14個要點
    12. UI 套件
    UI套件非常重要,尤其對于工作對接來說,能夠保持視覺高度的一致性。前端也非常需要這東西。做好了之后丟給前端,他要問你,你就說這東西在UI套件中,他立馬就能明白了。

    這一條非常重要,關系到整體的視覺一致性。


    四、提高效率的一些建議

    13. 待辦事項

    前面已經提過,我是一個崇尚有序的人。因此我高度依賴待辦事項清單。我推薦Cultured Code的Things,或者直接用一張紙來做真正的待辦事項清單也可以。這樣當你完成整體清單時,感受會非常的棒。以前可能我會5項工作同時展開,但是最近我發現,如果僅僅做1-2項工作,我會更集中,效果也自然會更好。

    14. 目標

    必須要清除的了解,你想要達成什么目標,但是也不要過于受目標限制。我一般會指定14天的目標(類似沖刺計劃)和嫉妒目標。我會設定一些對我來說是新里程碑的目標(比如用AE完成我個人的第一個動效設計)以及日常目標(完成2個Behance案例研究)

    其他

    個人不用鼠標,用的是繪圖板,PS沒有打開工具面板,因為所有工具的快捷鍵我都記住了。然后PS作品iPhone預覽我用的是Skala Preview。個人想學習Sketch和AE。原型設計,網頁設計我用InVision應用,iOS設計我用Marvel應用。有時候還會用POP進行一些早期原型設計。



    選擇我們,優質服務,不容錯過
    1. 優秀的網絡資源,強大的網站優化技術,穩定的網站和速度保證
    2. 15年上海網站建設經驗,優秀的技術和設計水平,更放心
    3. 全程省心服務,不必擔心自己不懂網絡,更省心。
    ------------------------------------------------------------
    24小時聯系電話:021-58370032
    關鍵詞標簽:上海網站建設 上海網站制作 網站優化 小程序開發
    性爱网站在线观看_免费无码国产_久久人91午夜亚洲精品无码区_久久精品国产99国产精品
    <ruby id="aeuc0"></ruby>
    1. <s id="aeuc0"></s>
      <source id="aeuc0"></source>