LCCNET 聯成電腦

菜鳥救星

m_nav_line m_nav_line

HOT影片

m_nav_line

12個專業UX設計師的經典線框範例

icon_fb icon_twitter icon_google LINE it!
article_main_img

 

 

       在設計過程的最初階段,很多時候我們可能會忽略線稿,直接選擇字體和上色。但是,用線框圖來解決問題其實有很多好處,既可以節省時間,也更容易發現可用性問題,更重要的是,可以讓設計人員專注於創造更好的用戶體驗。

 

延伸閱讀:Cacoo線上繪製圖表 還可多人協同設計
 

      一些設計師喜歡創造更直覺、更擬真性的線框,而另一些設計師則喜歡只使用紙張和簽字筆,讓事情盡可能簡單。作者Kristin Hillery從Dribbble收集了一些喜歡的線框範例,以展示它們的與眾不同,並且提供給大家更多的靈感。

 

延伸閱讀:Wireframe有障礙?別錯過MockFlow 上集

延伸閱讀:Wireframe有障礙?別錯過MockFlow 下集

 


        自由職業設計師Alex Dovhyi 跳過筆和紙,嘗試用Freehand創造這些線框,Alex說:“這個特定的頁面代表了預覽和基本資訊的網格。”

 

 


        Julio Castellano 分享VR風險識別應用程式的使用者流程。Julio說“這個項目主要是教育新進員工需要在有危險的地點工作,在他們實際去那裡前,可以透過這個App先體驗當時的情況。”

 

 


        Martyna Królikowska 為Wearly設計的線框,這是一個銷售輕便服裝的平台。

 

 

 


        Zahid Hasan Zisan 撰寫的是旅遊部落格的landing page線框。

 

 


       對於Dribbble App概念來看這個早期的UI草圖是如此的整潔,源自Krisztina Szerovay

 


 
      看看Javier Oliver 的活動頁面,如何從低擬真性變成高擬真性線框,然後是最終的UI畫面。

 

 


       James Boross 為Bitesize Chef App設計的線框,可以很容易的看到使用者在點擊按扭的整個流程。

 

 


      Go Nimbly設計師Grant Helton 說:“我在最新的原型中,增加了應用程式流程的線框,將引導使用者如何進入每個畫面。每個畫面都增加了浮動的頁腳,允許使用者看到他們在流程中的哪個畫面,並且依據需要跳轉至其他畫面。“我們正在挖掘這個由InVision製作的線框。

 

 


        Swapnil Borkar 分享一個有趣的手繪圖,是Lyearn 的landing page。

 

 
        從Shojol Islam的作品看到真正乾淨清爽,這個線框用於REPTO平台。

 

 


        UX設計師Jovan Belic使用漂亮的動畫來展示線框。

 

 


        Monica Galvan 向我們展示了紙筆繪出的線框草圖與Sketch繪出的低擬真線框圖的對照畫面。

 

       看完這些經典的線框範例,立刻也來動動手吧!畫線框好物推薦:
Wireframe有障礙?別錯過MockFlow /上

Wireframe有障礙?別錯過MockFlow /下

Cacoo線上繪製圖表 還可多人協同設計
 

 

原文出自:12 WIREFRAME EXAMPLES FROM SOME OF OUR FAVORITE UX DESIGNERS 

 

 

 

 

痞客邦Blog:http://lccnetvip.pixnet.net/blog
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w