انتخاب ترکیب رنگ
ترکیبات رنگ می توانند مکمل همدیگر باشند و نیز مشاهدات کاربران را آسان کند و به آنهااجازه دهد که هر متنی که در صفحه وجود دارد را بخوانند . بیشتر طراحان عقیده دارند که متن مشکی بر روی زمینه سفید ایده آل است . دلیل آن این است که این ترکیب یک گیرائی خاص برای خواندن ارائه می کند و برای کاربران خیلی راحت است زیرا همان متونی که در رسانه های دیگر قرار داده می شوند . قابلیت استفاده و مطالعات نشان می دهد که این نتیجه گیری بطور دقیق اتفاق افتاده است .
بیشتر موقعیت ها به شما اجازه می دهد که از طرح مشکی بر روی زمینه سفید استفاده کنید وتا جایی که ممکن باشد نیز، استفاده می شود . خیلی از سایتها رنگهایی دارند که یک کمپانی خاص را نشان می دهد و یا رنگهای پر زرق و برق دارند و همیشه از الگوی سیاه بر روی مشکی تبعیت نخواهد کرد .
در یک دسته بندی، فقط مکانهایی که در آنجا سایت جسارت دارد که از مدل سیاه و سفید بدون آنکه لطمه ای به کارآیی آن سایت وارد شود استفاده کند. Home Page یا صفحه اول یک وب سایت است . مندرجات اطراف Home Page فراوان هستند و سایت می تواند اهداف خوبی را برای کاربر تامین کند . این ترکیبات رنگها در المانهای دیگر صفحه مثل عکسها و چهار چوب ها می تواند استفاده شود و باعث ایجاد انگیزه برای جستجو و درخواست اطلاعات برای کاربر گردد.
*تذکر فنی :
برای ایجاد ترکیبات مختلف از پیش زمینه و متن،از سایت زیر دیدن کنید:
http://www.hidaho.com/colorcenter/cc.html گذارهای رنگ :
گذار رنگها روشی است که در آن همجواری رنگها یا جدایی آنها را بیان می کند . گذارهای رنگ ما بین رنگ متن و پیش زمینه بسیار مهم و قابل توجه است و برای کمک به جدایی قسمتهای مختلف صفحه به کار برده می شود . گذارها هنگامی که با عکس در صفحه ایجاد می شوند مسائل زیادی را بوجود می آورند . وقتی که گذارهای رنگ هموار(صاف ) یا یک عکس ایجاد می شود کاربران نیاز به درجه رنگ بالاتری برای حمایت از آن و نیز به زمان بیشتری برای بارگذاری نیاز دارد .
قلم ها
نظر به اینکه در ایجاد و انتشار وب ساختار آن نیز مانند دیگرتکنولوژیهای آن به طور مداوم تغییر می کنند ، دو فونت معمول وجود دارند که در اینترنت از آنها به کرات استفاده می شود . اولین آن New Roman برای کامپیوترهای PC است که معادل آن Time بر روی سیستم های مکینتاش می باشد ، فونت دوم ، Arial برای کامپیوترهای PC و معادل باآن Helvetica بر روی سیستم های مکینتاش می باشد . تکنولوژیهایی نظیر داینامیک و فونتهای تعبیه شده و توکار برای ارائه سریع و انتخاب بهتر ظاهر می شوند .
به هر جهت این فونتهای معمول یک سایت زیبا و جذاب ایجاد می کنند و یک نمایش خوب را ارائه می دهند .
و اگر گاهی از آن استفاده کنید احتمالا متوجه خواهید شد که فونتهایی که به آنها نگاه می کنید از موقعیت خوبی برخوردار هستند . ممکن است به سایتی نگاه کنید که از فونت دیگری استفاده کرده که چشمان شما را به آسانی درگیر می کند زیرا در بسیاری از موارد از آن استفاده نمی شود .
محدودیت ها :
یکی از محدودیت هایی که در استفاده از فونت وجود دارد این است که فونتهای انتخابی باید روی سیستم کاربر نصب گردند تا در مرورگر ترجمه شود و اگر کاربر آن فونت را در سیستم خود نداشته باشد، مرورگر آن را با فونت پیش فرض سیستم خود ترجمه می کند . برای PC ها فونت Times New Roman و Times برای مکینتاش . اگر قصد دارید که از فونت دیگری استفاده کنید، اصل فونت باید برای کاربران در دسترس باشد تا آنها بتوانند فونت را بارگذاری و سپس آن را بر روی سیستم خود نصب کنند و این کار باعث می شود که شما را به تجارب و سرمایه گذاری بر روی سایت خود مطمئن می کند .
فن چاپ :
از آنجایی که فونتها از اجزاء لازم هر سایتی محسوب می شوند فونت و رنگی را انتخاب کنید که همراه با المانهای دیگر صفحه بایدبتواند جملات بدون کلام ایجاد کند . خواندن متون زیاد مانند چیزهای دیگری که می خوانید فشار زیادی وارد می کند و خسته کننده می باشد و باعث منحرف کردن توجه کاربر می شود. یک فونت انتخابی خوب می تواند در صفحه خوابیده شود و یا درخشش خود را برای کاربر تنظیم و ایجاد کند .
سایز فونت
سایز فونت نرمال برای بیشتر مرورگرها 3 می باشد و اندازه های دیگر با این مقدار فرضی اندازه گیری می شوند . برای مثال اگر بخواهید سایز فونت را به 5 افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
< Font Size=2 >
به جای استفاده از
< Font Size=5 >
سایز فونت نرمال برای بیشتر مرورگرها 3 می باشد و اندازه های دیگر با این مقدار فرضی اندازه گیری می شوند . برای مثال اگر بخواهید سایز فونت را به 5 افزایش دهید کدی که برای آن به کار می برید بصورت فوق است :
نوع صحیح True Type :
خیلی از فونتهای شناخته شده به عنوان نوع صحیح هستند به این معنی که آنها می توانند در هر سایز نقطه ای بدون کم شدن کیفیت کاراکترها ترجمه شوند . True Type یک تکنولوژی دیجیتال است که با کامپیوترهای Apple توسعه یافته است و امروزه هم با سیستم های Apple و هم با سیستم هایMicrosoft استفاده می شوند . Times new roman و Arial از نوع صحیح هستند .
بعضی از این فونتها مثل verdena و Georgia نسبتا بیشتر ظاهر می شوند و به زیبایی ترجمه می شوند و یک صفحه سنگین و پرمایه ایجاد می کنند .
جلوگیری از اثرات بصری نامطلوب :
این فرآیند باعث جلوگیری از ناهمواری لبه های متن یا نوشته می شود . اغلب از تصاویر برای نمایش کاراکترها ، کلمات و جملات استفاده می شود . این فرآیند کناره های متن را بصورت هموار در می آورد . با تیره کردن خطوط بین متن و پیش زمینه ( پر کردن ناصافی های لبه های متن ) لبه های دندانه دار کنار فونت را از بین می برد . این گزینه بیشترین اثر خود را در تایپ متن با سایز های بزرگ ظاهر می کند. یکی از مضرات این فرآیند این است که مقداری رنگ را به تصویر یا نوشته اضافه می کند . مخصوصا در سایزهای بزرگ ممکن است برای بارگذاری مشکلاتی ایجاد گردد .
خطوط افقی با طول زیاد :
برای آسانتر خواندن متن از ایجاد متن هایی با خطوط طولانی که در پنجره های مرورگر ایجاد می شود پرهیز کنید . خواندن بصورت خط به خط و هر بار بازگشت به سمت چپ صفحه در هر زمان (اگر خطوط داخلی طولانی باشد) کاری مشکل است . این نکته را متذکر می شویم که خطوط را بصورت پاراگراف ایجاد کنید و بیشتر از 10 تا 12 کلمه برای مرورگرهای معمولی را در یک پاراگراف قرار ندهید . اگر مجبورید که متون زیادی در صفحه داشته باشید دو قالب ستون برای آن ایجاد کنید .
ملاحضات دیگر :
برای یافتن بهترین فونتی که خواسته های شما را به بهترین حالت بر آورد کند نیاز به تشخیص دامنه فونت و حدود عبارت برای تغییرات و دگرگونی آن دارید .
باید همه این تکنیکها و موارد را به بهترین صورت انجام دهید . توصیه های زیر می تواند در جلوگیری از اشتباهات معمول در هنگام توسعه یک سایت به شما کمک کند .
در نظر داشته باشید که تمامی فونتهای مجزا با هم یکی می شوند و نیز بدانید که چگونه فونتها به طراحی شما وابسته هستند .
هر فونتی به طور جدا گانه می تواند تمام منظورات ما را در یک زمان برطرف سازد .
طراحی المانهامثل ( سایز و فاصله خطوط و رنگ پیش زمینه و پس زمینه ، Margin )همه و همه می توانند در محاسبه و ایجاد یک نتیجه مطلوب کمک می کنند . متن فونتهای نسبتا بی اثر مثل Sansserif می تواند تنوع و دگرگونی عمیق در اشکال ساده میان ترکیبات گوناگون انجام دهد .
فونتهای مرورگر Netscape
برای مرورگر Netscape در سایت
http://www.bitstream.com/ اشکال کاراکترهایی که در صفحات کاربرد دارند وجود دارد و آنها در یک فایل فشرده (PFR) ذخیره شده اند .
PFR - Portable Font Resource
می توانید فایل PFR را به عنوان یک مرجع برای صفحات HTML و اسناد Style sheet خود قرار دهید . وقتی که صفحه توسط مرورگری مشاهده شد که از این فایل پشتیبانی می کرد مرورگر فایل PFR را می خواند و کاراکترها را دوباره ایجاد می کند . PFR قادر است که کاراکترها را در اسناد اصلی برای همراهی اسناد در هر جایی به کار ببرد . فونتهای میکروسافت :
فونتهای وب اولیه میکروسافت Open Type نامیده می شوند سایت
http://www.microsoft.com/hypography تلاش مشترکی بین میکروسافت و Adobe می باشد . ازنقطه نظر نگاه وب Open Type مانند Truedoc عمل می کند و کاراکترها را قادر می سازد که از میان اسناد در فرم متراکم شده ای عبور کنند .
Open Type پهنای ابتدائی دارد که True Type و Post Script نوع 1 را به عنوان یک قالب منفرد در هم ادغام کرده است .
گر چه True Dec و Open Type تکنولوژیهای رقابتی با یکدیگرهستند ولی آنها قادر خواهند بود که با هم در یک کامپیوتر همجوار باشند و هر فونتی را در صفحه ظاهر کنند به شرط آنکه کاربران آن فونت را بر روی سیستم های خود Install کنند . این قالب این تعهد را ایجاد می کند که کاربرانی که از مرورگرهای مختلف استفاده می کنند همیشه هر دو این تکنولوژیها را حمایت کنند .
بعضی کاربران مرورگرهای قدیمی دارند . به عنوان یک طراح وب باید بتوانید بین تقاضای خود برای تناسب فونتها و نیاز به جلب بیشترین مخاطب ارتباطی برقرار سازید .
واین حقیقت کوشش بیشتر شما را برای ایجاد یک صفحه با منظر خوب ( مستقل از نوع مرورگری که این صفحات با آن دیده می شوند ) را می طلبد .
فضای سفید :
هنگامی که در ابتدا صفحه ای بر روی مرورگر شما بار گذاری میشود ،علاوه بر آنکه در هر قسمت صفحه با مفاهیمی مواجه میشوید ،نتایج مندرجات محدودی را که به خوبی و با هماهنگی توزیع شده اند مشاهده می نمایید.
اولین حس شما از این نوشته ها چیست ؟ اگر شما بمانند خیلی از کاربران هستید صفحه ای با توزیع هماهنگ المانهاو مقداری فضای خالی (که در انجمن توسعه به عنوان فضای سفید معروف است) را ترجیح می دهید . توجه داشته باشید که کاربران به خاطر ایجاد صفحه ای با متنهای زیاد و شلوغ از شما قدردانی نخواهند کرد . آنها خیلی سریع صفحه شما را مرور می کنندو اگر صفحه شما اینچنین بود ممکن است اطلاعات زیادی را از دست بدهند . این نکته بدان معنی نیست که برای کاربران اطلاعات زیاد ایجاد نکنید بلکه به این مفهوم است که نباید همه این اطلاعات را در یک صفحه قرار دهید . هر صفحه وب باید حدودا 50 درصد متن کمتری نسبت به یک صفحه مشابه چاپ شده آن داشته باشد .
هر صفحه باید برای ارائه اجمالی اطلاعات طراحی شود و باید اتصالاتی برای رسیدن کاربران به جزئیات بیشتر و عمیق تر ایجاد شود . همه کاربران یه یک مقدار اطلاعات نیاز دارند . به کاربر این اختیار را بدهید که خود انتخاب کند که آیا جزئیات رامی خواهد یا نه ؟
و نیز صفحه را به منظور کوتاه کردن آن قسمت نکنید . مگر آنکه شکستن آن منطقی باشد . هر صفحه باید مستقل بوده و وابستگی به جایی نداشته باشد .
بعضی از طراحان و انتشار دهندگان وب از جداول و عکسهای Gif برای اضافه کردن فضا به صفحه استفاده می کنند . بعد از محاسبه اینکه کاربران چه چیزی را نیاز دارند که بدانند می توانید صفحه آرایی خود را با استفاده از جداول و حاشیه ها HTML برای قرار دادن موفقیت سند و مندرجات صفحه در فضاهای خالی شروع کنید به عبارت دیگر جداول همه آن چیزهایی هستند که شما به آنها نیاز دارید .
ساختارها
ساختار صفحه با فایلهای Gif شفاف :
یک عکس شفاف می تواند در صفحه به جای اشغال کردن فضاهای خالی وارد شود ونیز شما می توانید طول و عرض آن را با بکار بردن ویژگیهایی در تگ < Image > برای ایجاد ابعاد فضای در خواستی، کنترل کنید . برای مثال اگر بخواهید پاراگرافی وارد کنید باید تگ زیر را ایجاد کنید (عکس gif همرنگ با background صفحه است):
< Img Src="transparent.gif" height=2 width=15" >
با دادن این مقادیر پاراگراف با فاصله 15 pix از سمت چپ شروع می شود . با همان رویه می توانید فضای بین پاراگراف را با قرار دادن مقادیر فوق افزایش دهید .
< Img Src="transparent.gif" height=20 width=2" >
عکسهای Gif می توانند در صورت نیاز در جداول برای کنترل سایز ستونها و سطرها در صورت نیاز قرار داده شوند . به خاطر داشته باشید که هدف ما کاهش بی نظمی های صفحه ، به این منظور که کاربران را قادر به مرور مطالب و اسناد و نیز انتخاب اتصال دیگر کند ، می باشد .
ساختار صفحه با جداول :
طراحان وب بایدبه خوبی ساختار صفحه را درک کنند و از جداول در ساختار صفحات استفاده کنند . به طور پیش فرض تمامی موارد در HTML از طرف چپ تراز می شوند . طراحان وب از جداول برای توزیع مندرجات کل صفحه نمایش درمرورگر استفاده می کنند . ساختار جدول می توانند با مندرجات پر گردندنیز می توان برای جداول قاب قرار نداد تا کاربران متوجه وجود جدول در صفحه نگردند. CSS -Cascading Style Sheet می تواند برای رفع جداول در ساختار HTML ایجاد شوند که متاسفانه همه مرورگرها از آن حمایت نمی کنند و فعلا تا زمانی که CSS بصورت استاندارد جهانب در نیامده از جداول به عنوان استاندارد استفاده می شود .
ساختار صفحه با استفاده از فریم ها :
فریم ها نیز می توانند برای ساختار صفحات مورد استفاده قرار گیرند با این وجود آنها نقش میانی در Navigation هارا نیز دارند . فریم ها می توانند در یک سایت استفاده شوند و باید به زودی در بحث روند طرح و برنامه ریزی مطرح شوند . به این خاطر که فریم ها به صورت نمایشی در طرح Navigation اثر دارند . فریم ها بر روی عاملهای دیگر سایت نیز اثر می گذارند و سایت را به خوبی آرایش می کنند .
ساختار صفحه با استفاده از تعیین موقعیت :
لایه ها یا المانهای پشته ای دیگر بصورت عمودی در آمدند و بیشتر مرورگرها از آنها حمایت می کنند . نا هماهنگی اصلی در لایه گذاری این است که Netscape Navigator از تگ < Layer > استفاده می کند . در صورتیکه Internet Explorer با استانداردهای W3C ،موقعیت یاب CSS برای تمامی المانها مطابقت می دهد . بنابراین دو فایل آغاز گر مجزا باید برای اطمینان از مطلوبیت از عبور پایگاه داده استفاده شود. متاسفانه خیلی از ویراستارهای HTML به طور اتوماتیک هر 2 ورژن را بصورت کد درآوردند .
سئوالات ابتدائی :
1- مطالعات نشان می دهد که کاربران زمان زیادی را برای بروز کردن مرورگرهای خود صرف می کنند. 2 عامل مهم در کاهش سرعت جابه جایی مرورگر چیست؟
2- آیا طراح سایت باید در آزمایش کارآیی سایت خود شرکت کند؟چرا؟
3- چه نوع وظایفی باید با هم در سئوالات آزمایش کارآیی با پرسش ها همراه باشند؟
مقدمه :
شما ممکن است توانسته باشید تمامی منابع طراحی در دنیا را برای سایت خود بکار گیرید ولی نتوانسته باشید که سایتی را ایجاد کنید که وظایفش را به خوبی انجام دهد ؟ چگونه ؟زمانی که کارآیی کاربران و مخاطبین خود را در نظر نگرفتید ،و این امر یک حرکت خودجوش نیست و باید به تمامی نیازهای کاربران پاسخ داده شود . این فصل در موردتمامی پارامترهایی که کاربران شما می خواهند بحث می کند و به شما نشان می دهد که چگونه کارآیی سایت خود را آزمایش کنید .
سلام . خسته نباشید.اگه میشه تبادل لینک کنیم . حداقل تا انتخابات.اگه ایرانی هستی.تبلیغ کن .مرسی
با سلام ممنون باشه