تهران، سعادت آباد، خیابان کوهستان،
مجتمع کوهستان، سرو ۴، طبقه ۳ واحد ۲
۲۲۱۳۴۴۹۶ ۰۲۱
۳۶۶۶۸۳۲۸ ۰۲۶
info[at]web-city.ir
support[at]web-city.ir

نمونه سازی سریع با پیش طراحی در طراحی سایت

نمونه سازی سریع با پیش طراحی در طراحی سایت

در گذشته در دهه ۹۰، نمونه سازی سریع، ایده خیلی بدی بود. اولین دلیل برای این عقیده این بود که ابزارهای نمونه سازی بسیار پیچیده بودند، طوری که برای استفاده نیاز به یک برنامه نویس وب سایت داشت.
در سال ۲۰۱۰، تحولی در دیدگاه نمونه سازی سریع طراحی وب به وجود آمد. ابزارهای نمونه سازی طراحی سایت جدیدی در چندین سال گذشته ظاهر شده بودند و به سرعت توسط طراحان وب سایت تعاملی برگزیده شده بودند.
دو مورد در تغییر یافتن دیدگاه ها نسبت به ابزارهای نمونه سازی وب سایت وجود داشت. وظیفه ای که باید در این ابزارها انجام می دادند و ابزارهای نمونه سازی طراحی سایت.
ابزار امروزه نمونه سازی طراحی وب سایت، بیشتر مورد پسند طراحان وب بود. سازگاری داشتن با زبان نشانه گذاری تعاملات کاربران وب سایت مانند MXML, XAM, و HTML ما را قادر ساخت تا امروزه نرم افزارهای هوشمند بیشتری ساخته و اجرا کنیم، و به این ترتیب، ساخت ابزارهای طراحی برای طراحان وب سایت راحت تر می شد، البته این امر برای برنامه نویسان وب سایت برعکس عمل می کرد.
درست در همین زمان، نحوه پروسه طراحی سایت تغییر کرد. هرچه ما از طراحی سایت هایی دوری می کنیم که یک سری صفحات و موارد بصری را شامل می شود، و به سمت طراحی اپلیکیشن هایی می رویم که از صفحات فعال کمتری استفاده می کند، خیلی سخت می شود که این تجربه ها را با استفاده از ابزارهای سنتی برای رسم پیش طراحی اپلیکیشن ها و یا کاغذ های پیش طراحی، نمونه سازی کنیم.

از این رو، ما شرایط بهتری برای این موج جدید از ابزارهای نمونه سازی طراحی سایت داریم: افزایش توانایی و افزایش تقاضا.

مشارکت شرکت مایکروسافت: EXPRESSION با پروسه پیش طراحی ترکیب می شود
در میان ابزارهای نمونه سازی طراحی سایت، EXPRESSION شرکت مایکروسافت است که با پروسه پیش طراحی وبسایت ترکیب می شود. پروسه پیش طراحی، یک روش منحصر به فرد برای نمونه سازی طراحی سایت می باشد.

EXPRESSION STUDIO
پروسه پیش طراحی، یک بخش از EXPRESSION STUDIO در میان ابزارهای طراحی می باشد. البته با این کار به نوعی میتوانید آموزش طراحی سایت را هم داشته باشید.با نگاه کردن به تاریخ ابزارهای طراحی وب سایت، مایکروسافت در نهایت عملکرد جدید خود را در این زمینه تحت عنوان نام “EXPRESSION STUDIO” ارائه داد. EXPRESSION STUDIO سومین نسخه خود را منتشر می کند و شامل ۴ یا ۵ محصول دیگر دارد که بستگی به محتوای وب سایت تان، استفاده می شود:
ترکیب EXPRESSION: برای ساختن ابزارهای تعاملی با کاربران وب سایت در صفحه نمایش، ویندوز و سیلورلایت.
ترکیب EXPRESSION: پروسه پیش طراحی؛ برای نمونه سازی تعاملات کاربران وب سایت.
EXPRESSION WEB: برای ساختن تعاملات کاربران بر اساس استانداردهای طراحی سایت.
EXPRESSION ENCODER: برای آماده کردن موارد ویدئویی برای صفحه نمایش، ویندوز، سیلورلایت و وب سایت.

زمانی که درباره صفحه نمایش ایده ای داشته باشید، شاید بخواهید تک تک اجزای آن را مورد بررسی قرار دهید. سپس شما می توانید نمونه سازی درستی از طراحی سایت تهیه کنید و ببینید که اپلیکیشن ها چگونه کار می کنند، اگرچه که هنوز تعامل کاربری وجود ندارد.
معمولا زمانی که شما یک تعامل کاربری را نمونه سازی و طرح می کنید، شما می خواهید از روش گرافیکی دوری کنید تا به مدل تعاملی و ساختار اطلاعات مدل مورد نظر به درستی برسید. به عنوان نتیجه، شما باید برای تعامل کاربری یک WIRE FRAME تهیه کنید که از حداقل گرافیک ها استفاده کرده است و تنها به کاربران وب سایت نشان می دهد که چگونه با آن ها ارتباط برقرار می کند و توسط این اپلیکیشن جستجو می شود. به همین دلیل، پروسه پیش طراحی، یک مجموعه از سبک های پیش طراحی را مهیا می کند که شامل نظارت و کنترل بر موارد گوناگون در نمونه سازی طراحی سایت می باشد.
چیزی که درباره سبک های پیش طراحی جالب است این می باشد که همگی آن ها تحت کنترل هستند و به این ترتیب ظاهرش می تواند تغییر کند. دو مورد زیر، نتایجی از این موضوع می باشند:
شما می توانید به تمام توانایی های کنترل و نظارت این ابزار دست یابید.
شما می توانید سبک های این کنترل را همان طور که نمونه سازی خود را تکمیل می کنید، تغییر دهید.

پیش طراحی نمونه کار برای تعاملات کاربران وب سایت
قدم بعدی این است که صفحه نمایش نمونه وب سایت مان را طراحی کنیم. این موضوع اساسا مربوط به انتخاب کنترل سبک درست پیش طراحی و قرار دادان آن در جای مخصوص به خود در صفحه نمایش می باشد.
برای مثال، من موارد زیر را برای صفحه نمایش نمونه کار طراحی وب سایت خود استفاده کردم:
دکمه پیش طراحی
فلش به عقب
عنوان پیش طراحی
زیر فصل های پیش طراحی
کادر فهرست پیش طراحی
زیر فصل دیگری از پیش طراحی
داده پیش طراحی
عامل تصویری پیش طراحی
دکمه دیگر پیش طراحی

برنامه نویسی جهت یابی وب سایت
تمام چیزی که در این بخش احتیاج دارید این است که روی عواملی کلیک کنید که برای جهت یابی بین صفحه نمایش ها استفاده می شود. گزینه جهت یابی را انتخاب کنید و روی صفحه ای که آن عامل باید به آن اتصال یابد را برگزینید. شما هم چنین می توانید گزینه های “FORWARD” و “BACK” را انتخاب کنید.

اجرای نمونه طراحی سایت
برای انجام دادن نمونه طراحی سایت، تنها دکمه F۵ را فشار دهید. پروژه شروع می شود و یک تست از سرور وب سایت گرفته می شود و سپس نمونه طراحی سایت ما در مرورگر راه اندازی می شود. پیش طراحی نمونه طراحی سایت شامل صفحه نمایش کاربردی، جهت یابی یا همان جستجو شدن و دیگر ابزارهایی است که در سمت چپ شما قرار دارد. این ابزارها به شما کمک می کند تا نمونه طراحی وب سایت تان را بیابید و به کاربران وب اجازه می دهید تا واکنش و بازخورد هایی را ارئه دهند. واقعا ضروری نیست که از همان ابتدا روی جهت یابی و جستجو شدن کار کنید. برای هر صفحه از نمونه طراحی سایت تان، پنل جستجو نشان می دهد که کدام صفحه بر اساس اتصالات و پیوند هایی که در پیش طراحی تنطیم کرده بودید، اجرا شود. شما به راحتی در صفحاتی که در لیست سمت چپ موجود است، حرکت می کنید. شما به راحتی مواردی را که در مرحله پیش طراحی رو کاغذ نوشته بودید را وارد این صفحه از وب سایت می کنید. برای مثال، شما احتمالا با این گزینه شروع می کنید و سپس در نوار جسجو کاربردی تان اضافه می کنید.

ویژگی بی نظیر و جذاب پروسه پیش طراحی سایت
پروسه طراحی وب سایت به صورت فوق العاده ای واکنش ها و بازخورد های کاربران وب سایت را اداره می کند. بدون در نظر گرفتن اینکه شما در WPF و یا سیلورلایت کار می کنید، شما می توانید نمونه طراحی وب سایت تان را جمع بندی کنید و برای مشاهده کاربران وب سایت، اعضای پروژه و مدیران بخش پیش طراحی توزیع کنید. با وجود سیلورلایت، پیش طراحی، یک وب سایت سیلورلایتی را می سازد که می توانید توسط آن نمونه طراحی سایت را توزیع یا منتشر کنید، در چنین شرایطی شما می توانید تنها یک لینک را برای مخاطبان وب سایت تان ارسال کنید.
زمانی که کاربران وب سایت نمونه کارتان را می بینید، قادر هستند توسط ماوس به صفحات مختلفی دسترسی بیابند، به علاوه نظراتی را هم برای تان پست کنند. مخاطبان وب سایت سپس به راحتی واکنش های شان را در یک فایل برای شما می فرستند. شما سپس فایل ها را بارگیری می کنید و در برنامه EXPRESSION BLEND باز می کنید و واکنش ها و نظرات مخاطبان وب سایت را مرور می کنید و در نهایت در صفحه وب سایت تان آن ها را به طور منظم قرار می دهید.

واکنش ها و بازخورد ها، یکی از بهترین ویژگی های پیش طراحی می باشد. همان طور که مدیران پیش طراحی این نمونه را مرور می کنند، شما می توانید توسط همکاران تان شروع به بررسی کردن آن کنید. زمانی که شما نمونه طراحی سایت تان را مرور می کنید، می توانید یادداشت هایی را بنویسید که باعث می شود تغییراتی که می خواستید را در طراحی سایت اعمال کنید. این موضوع یک لیست جدید را به وجود می آورد، که سپس می تواند در EXPRESSION BLEND دوباره بارگیری شود.
زمانی که شما تعامل کاربران وب سایت تان را نمونه سازی کردید، می توانید هم چنین از نمونه پیش طراحی تان برای امتحان طراحی وب سایت به کار ببرید.
ویژگی دیگر پیش طراحی که باید بیان شود، اجزای صفحه نمایش ها می باشد. این صفحات، راهی است که پیش طراحی، یک بخش از نمونه طراحی وب سایت را مهیا می کند که بسیار ضروری است: این اجزای مهم وقتی شناخته شود، بارها و بارها در صفحات مختلف استفاده می شود.
با استفاده از پروسه پیش طراحی وب سایت، می توانید هر گروه از عواملی که دوست دارید را انتخاب کنید. روی آن ها راست کلیک می کنید و سپس گزینه “MAKE INTO COMPONENT SCREEN” را انتخاب کنید. اجزای صفحه نمایش سپس به صورت مجزا در نقشه پیش طراحی نمایان می شود و می تواند در صفحات دیگر هم منتقل شود.
یک استفاده رایج از اجزای صفحات این است که کنترل جهت یابی وب سایت را بسازیم که در بیشتر طراحی و صفحه نمایش ها رایج است. کنترل جهت یابی مشابه همین مورد در هر صفحه از نمونه کار طراحی سایت من وجود دارد. یکی از بهترین ویژگی های اجزای صفحه نمایش این است که به راحتی اطلاعات گروه بندی های موجود در وب سایت را شامل نمی شود. بنابراین، شما تنها یک بار می توانید عملکرد دکمه جهت یابی و یا جستجو را در اجزای صفحه نمایش قرار دهید، و خواهید فهمید که قابلیت جستجو شدن و جهت یابی وب سایت عملی می شود.

موارد فرعی
یکی دیگر از ویژگی های EXPRESSION BLEND، موارد بصری می باشد. موارد بصری به شما اجازه می دهد تا موارد فرعی دیگری را در صفحه نمایش قرار دهید، مانند اجزای صفحه نمایش یا صفحه نمایش به طور کلی. بخش مهم این موضوع این است که شما می توانید مجموعه موارد بصری مختلفی را برای عوامل طراحی مشخص کنید. از این رو، برای مثال، یک دکمه دارای ۳ گروه موارد بصری است: مواردی که در وب سایت روی آن تمرکز می شود یا نمی شود، مواردی که ماوس روی آن قرار می گیرد یا نمی گیرد، و دیگری هم فعال و غیر فعال کردن است. راهی که شما این موارد فرعی را باهم ترکیب می کنید بسیار برای تاثیر ماندگار و قدرتمند نیاز است.
در این مثال نمونه کار، در این جا ۳ عامل بصری برای جهت یابی و جستجو شدن صفحه نمونه طراحی وب سایت من وجود دارد:
دکمه برگشت روشن
دکمه برگشت خاموش
نشان دادن نمونه کار غیر فعال
برای هر یک از این ۳ مورد بصری، مشاهده شدن آیتم های جستجو و جهت یابی منطبق با آن تغییر می یابد. تنها چیزی که الان احتیاج دارید، این است که موارد بصری محتوای خود را به صورت واضح بیان کند. برای این موضوع نیاز به عملکردها دارید.

عملکردها
عملکردها توسط BLEND ۳ ساخته می شود. آن ها راه آسانی را برای اضافه کردن ویژگی های پایه تعاملی در صفحه و البته بدون برنامه ریزی، مهیا می کند.. شما می توانید از عملکردها برای تغییر ظاهر اجزای جستجو کننده نمونه طراحی وب سایت تان در هر مرورگر استفاده کنید. عملکردی که شما نیاز دارید استفاده کنید، GO TO STSTE ACTION نام دارد. در هر صفحه از نمونه طراحی وب سایت، GO TO STSTE ACTION در نوار کنترل جستجو قرار دهید. عملکردها، سپس در پنل جدول زمانی و موارد طراحی وب سایت ظاهر می شود.

قدرت نمونه طراحی وب سایت توسط پیش طراحی
پیش طراحی، یک ابزار قدرتمند منحصر به فردی است. زیرا در EXPRESSION BLEND و NET ساخته شده است و به شما امکان می دهد تا به کاربرد و عملکرد های زیادی دست یابید و اجازه می دهد تا نمونه کار را بیشتر نزدیک وب سایتی که می خواهید طراحی کنید، بسازید. هم چنین به این معنی است که می توانید خارج از مرزهای این ابزار عمل کرده و بیشتر از آن استفاده کنید.
البته، همگی این ویژگی ها به معنی پیش طراحی است . خوشبختانه کمک های بیشتری را می توانید در این باره در مقاله ها، آموزش ها، وبلاگ ها و ویدئو ها ببینید، از این رو، این پروسه نمونه سازی طراحی وب سایت از زمانی که اولین بار دربرنامه BLEND ظاهر شد، آسان تر شده است.

اشتراک

مجید احدی

مجید احدی هستم‌،توسعه دهنده سایت،قبلا در زمینه دوربین های مداربسته فعالیت داشتم مدتی به کار در حوضه فناوری اطلاعات علاقه مند شدم در حال حاضر به عنوان توسعه دهنده سایت فعالیت میکنم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هفت − 2 =