• <progress id="wgcwd"><track id="wgcwd"></track></progress>
      <em id="wgcwd"></em>
    1. <tbody id="wgcwd"></tbody>

      <rp id="wgcwd"><object id="wgcwd"><input id="wgcwd"></input></object></rp>
    2. 
      
    3. <rp id="wgcwd"><object id="wgcwd"><input id="wgcwd"></input></object></rp>
    4. 當前位置:首頁>>建站技巧>>網站建設中如何規范原型圖?

      網站建設中如何規范原型圖?西藏番茄科技

      時間:2018-10-31 17:35 點擊:1992

      網站建設(制作)原型圖設計遵循的基礎原則是:1.盡可能的簡介,在滿足將產品需求轉化為界面功能需求的同時,只取核心的存在,畫蛇添足,人類始終向往和追求一切美好的事物,即便是黑白灰的世界,一樣會帶給人美的享受。2.盡可能的簡化操作流程,讓用戶能以最簡單的流程就找到他想要的功能。3.盡可能考慮蜘蛛百度的搜錄習慣,貼合百度搜索進行網站建設(制作)。

      1.繪制原型圖的尺寸

      考慮到繪制與查看原型圖的便利性,以及大部分產品與開發人員使用小屏幕筆記本,當前原型圖的尺寸一般采用375*667px,相當于iPhone 6s屏幕尺寸的一半,以iOS系統為主,安卓系統個別頁面單獨做圖說明。


      2.原型圖常用組件尺寸
      指經常使用的通用組件,如狀態欄、頂部導航欄、底部導航欄等,這里由于最大寬度已經確定都是375px,因此關注的是各通用組件高度。狀態欄可以設置為母版高度是20px,頂部導航欄高度44px,底部tab導航欄高度49px。


      3.對齊

      頁面中的模塊或元素不能隨意放置,要保持對齊性,這樣呈現出的效果才規整有序。


      4.親密關聯

      也就是我們經常提到的“格式塔原理”的演變,是指內容屬性可以劃歸為一組的,在位置布局上距離相近,不同屬性內容之間的距離相對遠一些。如下圖閱讀類APP的個人中心頁面,按照消費行為、個人互動消息、系統操作分成了不同模塊,同一模塊下相近屬性歸為一組。



      5.對比和重復

      • 頁面不同元素之間要有對比效果,目的是更清晰的組織信息、使層級關系明了,能夠引導用戶瀏覽并且制造焦點。
      • 設計的某些元素可能在整個頁面中多次出現。重復的元素可能是某個模塊、一條分割線、某種粗字體、某類型圖標標識等。

      如下圖,我的書評-我的回復頁面,通過背景色對比區分“原貼以及針對原貼的回復”,并且多個貼子的回復樣式是重復排版的。

      二、細節規范

      1.字體或模塊色值

      作為交互設計師必須始終明確,原型圖的重點是功能和邏輯結構的梳理與呈現,用色不是我們應該考慮的。

      2.字體類型與字號大小

      原型圖中使用相同的字體,保持所有頁面字體呈現一致性。字號要依據具體頁面中元素重要性的不同而定,一般來說為便于清楚查看,字號最小12px。如下圖紅色框選部分,標題與簡介不是相同的字體,給人感覺頁面很跳破壞了統一性。


      三、總結

      交互設計師在產出原型圖時,在滿足產品和業務需求的基礎之上,遵循一些普適的規范原則,不僅使你的原型圖美觀簡潔,更是交互設計師專業性的體現要素之一。

      番茄科技不僅能提供品牌設計,還提供公眾號開發、小程序開發制作、APP開發、一物一碼商品溯源系統、智慧物聯網云平臺建設等。拉薩商務對接電話18081882629,成都聯系13388166210.

      坎巴嘎布微商城開發

      喜馬拉雅蕎麥葉茶

      藏式九味防溫香囊/金剛防溫香囊品牌包裝設計

      拉薩市網站應該如何備案?

      日本很色的动漫电影|吉吉影音av成人资源|恋夜秀场免费视频在线直播间|3d无码亚洲左右avi
    5. <progress id="wgcwd"><track id="wgcwd"></track></progress>
        <em id="wgcwd"></em>
      1. <tbody id="wgcwd"></tbody>

        <rp id="wgcwd"><object id="wgcwd"><input id="wgcwd"></input></object></rp>
      2. 
        
      3. <rp id="wgcwd"><object id="wgcwd"><input id="wgcwd"></input></object></rp>